Information Architecture and Design I Accessibility Kate Bronstad INF 385E Information Architecture and Design I November 2nd, 2006

Overview Accessibility & Disability Why Accessbility is important Web Guidelines & Standards Accessible practices you can adopt Resources References

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

Types of disabilities Visual - blind, low vision, and color blind Motor/Physical Auditory Cognitive Learning

Why accessibility matters Human rights Good business practice Legality -section 508 -TX HB 2819 -ADA?

Target vs. the Blind Judge rejected Target’s argument that ADA only applied to physical spaces. The case will proceed.

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

Web Accessibility Guidelines WCAG 1.0 -official W3C recommendation -WCAG 2.0 in draft Section 508 checkpoints -based on WCAG 1.0

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

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.

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/

Perceivable Operable Understandable Robust WCAG 2.0 = POUR Perceivable Operable Understandable Robust -Source: http://www.w3.org/TR/WCAG20/

What is accessible? Transformability: Presenting and structuring information so that it can be perceived in multiple ways

Alt use – in moderation Skip navigation links Semantic structure Small things = big difference Alt use – in moderation Skip navigation links Semantic structure

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

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/

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

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

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

Accessibility and Web 2.0 User generated content and AJAX complicate things. If use JavaScript/AJAX, do so with caution

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

Links to Resources UT Accessibility Institute http://www.utexas.edu/research/accessibility/ Designing Accessible Websites http://www.utexas.edu/learn/accessibility/ WCAG Web Content Accessibility Guidelines http://www.w3.org/TR/WAI-WEBCONTENT/

Links to Resources TOOLS AND SAMPLE CODE http://accessify.com/ http://webaim.org/ WAVE: http://wave.webaim.org/index.jsp Adobe Accessibility: http://www.adobe.com/accessibility/index.html W3C Accessibility Tools: http://www.w3.org/WAI/ER/tools/

References “Appropriate use of alternative text”.WebAIM http://webaim.org/techniques/alttext “Attractive, Accessible Websites”, http://accessify.com/features/articles/good-lookers/ “Creating Semantic Structure”. WebAIM http://www.webaim.org/techniques/semanticstructure/ “The future of web accessibility”, http://www.webcredible.co.uk/user-friendly-resources/weaccessibility/future.shtml

References “ ‘Skip navigation’ Links”, webAIM http://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