![Page 1: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/1.jpg)
Kate BronstadINF 385E
Information Architecture and Design I
November 2nd, 2006
Accessibility
![Page 2: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/2.jpg)
Overview
•Accessibility & Disability•Why Accessbility is important•Web Guidelines & Standards•Accessible practices you can adopt•Resources•References
![Page 3: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/3.jpg)
What is (web) Accessibility?
“Web resources are ‘accessible’ if people with disabilities can use
them as effectively as non-disabled people”
-UT Accessibility Institute, www.utexas.edu/research/accessibility
![Page 4: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/4.jpg)
Types of disabilities
•Visual - blind, low vision, and color blind
•Motor/Physical
•Auditory
•Cognitive Learning
![Page 5: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/5.jpg)
Why accessibility matters
•Human rights•Good business practice•Legality
-section 508-TX HB 2819-ADA?
![Page 6: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/6.jpg)
Target vs. the Blind
Judge rejected Target’s argument that ADA only applied to physical spaces. The case will proceed.
![Page 7: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/7.jpg)
Accessibility for others:
•Slow Internet Connection •Old Browser •Missing Plugins •No Speakers •Small Display (pda, mobile phone) •Eyes busy / Hands busy •Noisy Environment
Source:http://www.utexas.edu/learn/accessibility/disability.html
![Page 8: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/8.jpg)
Web Accessibility Guidelines
•WCAG 1.0-official W3C recommendation-WCAG 2.0 in draft
•Section 508 checkpoints-based on WCAG 1.0
![Page 9: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/9.jpg)
WCAG 2.0 Principle 1
•Content must be perceivable–Give text descriptions for all non-text (but still meaningful) content–For multi-media content, provide synched alternatives–Distinguish content from presentation–Make distinction between foreground information and background obvious
![Page 10: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/10.jpg)
WCAG 2.0 Principle 2
•Interface components in the content must be operable
–Everything functional by keyboard–Allow for user-controlled time limits–If your content could cause a photosensitive person to have a seizure, at least find a way to guard them from it.–Give the user easy ways to understand, navigate, and orient themselves in the page–Reduce ways users could make mistakes, and make it easy for them to correct mistakes.
![Page 11: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/11.jpg)
WCAG 2.0 Principles 3 & 4
•Content and controls must be understandable–“Make text content readable and understandable”–“Make the placement and functionality of content predictable”
•Content should be robust enough to work with current and future user agents (including assistive technologies)
–Support compatibility with current and future user agents (including assistive technologies)–Ensure that content is accessible or provide an accessible alternative
-Source: http://www.w3.org/TR/WCAG20/
![Page 12: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/12.jpg)
WCAG 2.0 = POUR
Perceivable
Operable
Understandable
Robust
-Source: http://www.w3.org/TR/WCAG20/
![Page 13: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/13.jpg)
What is accessible?
Transformability:
Presenting and structuring information so that it can be perceived in multiple ways
![Page 14: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/14.jpg)
Small things = big difference
•Alt use – in moderation•Skip navigation links•Semantic structure
![Page 15: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/15.jpg)
Best <alt> practices
•Accurately represent the same information and function as the image
•If the image is decorative, or part of a link, use alt=“” •If image is within a form, use alt to describe the function (ex. alt= “submit search”)
•Don’t use “image of” or “link to” when coding makes this apparent
![Page 16: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/16.jpg)
Skip navigation links
•Add a “skip navigation” link at the top of the page
•Visible or invisible (with CSS - keyboard focus)
Source:http://www.webaim.org/techniques/skipnav/
![Page 17: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/17.jpg)
Semantic structure
•Convey meaning that doesn’t rely on context of presentation •Use hierarchical heading structure (ex. h1 is most important)
•Use <strong> for bold and <em> for italics
•Use lists correctly
![Page 18: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/18.jpg)
Semantic structure
•In non-layout tables, use <th> to define rows and columns,plus “headers” and “ids” for more complicated tables
•For layout tables, use CSS •With forms, use <label> to describe the information the user should enter
•Also use <label> in pull-down menu to describe what user can choose to do
![Page 19: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/19.jpg)
Other basic points
•Avoid pull-down menus for navigation, provide alternative if needed.
•Make text of hyperlinks comprehensible on their own, not just “click here”
•Use <acronym> and <abbr> when called for. •If site has site map, have link on every page
![Page 20: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/20.jpg)
Accessibility and Web 2.0
•User generated content and AJAX complicate things.
•If use JavaScript/AJAX, do so with caution
![Page 21: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/21.jpg)
Ways to check your website
•Turn off the images and sound
•Tab through site
•Use screen reader emulator like FANGS •Use online tools like WAVE, http://wave.webaim.org/index.jsp
![Page 22: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/22.jpg)
Links to Resources
UTAccessibility Institute
http://www.utexas.edu/research/accessibility/
Designing Accessible Websiteshttp://www.utexas.edu/learn/accessibility/
WCAGWeb Content Accessibility Guidelines
http://www.w3.org/TR/WAI-WEBCONTENT/
![Page 23: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/23.jpg)
Links to Resources
TOOLS AND SAMPLE CODEhttp://accessify.com/
http://webaim.org/WAVE:
http://wave.webaim.org/index.jspAdobe Accessibility:
http://www.adobe.com/accessibility/index.htmlW3C Accessibility Tools:
http://www.w3.org/WAI/ER/tools/
![Page 24: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/24.jpg)
References
“Appropriate use of alternative text”.WebAIMhttp://webaim.org/techniques/alttext
“Attractive, Accessible Websites”,http://accessify.com/features/articles/good-lookers/
“Creating Semantic Structure”. WebAIMhttp://www.webaim.org/techniques/semanticstructure/
“The future of web accessibility”, http://www.webcredible.co.uk/user-friendly-resources/weaccessibility/future.shtml
![Page 25: Kate Bronstad INF 385E Information Architecture and Design I November 2 nd , 2006](https://reader036.vdocuments.net/reader036/viewer/2022062411/568167bd550346895ddd0fb2/html5/thumbnails/25.jpg)
References
“ ‘Skip navigation’ Links”, webAIMhttp://www.webaim.org/techniques/skipnav/
Sutel, Seth. “Blind web surfers sue for accessibility”. AP. Retrieved from:http://biz.yahoo.com/ap/061024/business_of_life.html 10/24/06
UT Accessibility Institute,http://www.utexas.edu/research/accessibility/resource
“Web Content Accessibility Guidelines 2.0 Checklist”, W3C,http://www.w3.org/TR/2005/WD-WCAG20-20050630/checklist-linear.html