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

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

3. What is (web) Accessibility?
“Web resources are ‘accessible’ if people with disabilities can use them as effectively as non-disabled people”
-UT Accessibility Institute,

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

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

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

7. Accessibility for others:
Slow Internet Connection
Old Browser
Missing Plugins
No Speakers
Small Display (pda, mobile phone)
Eyes busy / Hands busy
Noisy Environment
Source:

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

9. 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

10. 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.

11. 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:

12. Perceivable Operable Understandable Robust
WCAG 2.0 = POUR
Perceivable
Operable
Understandable
Robust
-Source:

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

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

15. 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

16. Skip navigation links
Add a “skip navigation” link at the top of the page
Visible or invisible (with CSS - keyboard focus)
Source:

17. 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

18. 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

19. 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

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

21. 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,

22. Links to Resources UT Accessibility Institute
Designing Accessible Websites
WCAG
Web Content Accessibility Guidelines

23. Links to Resources TOOLS AND SAMPLE CODE http://accessify.com/
WAVE:
Adobe Accessibility:
W3C Accessibility Tools:

24. References “Appropriate use of alternative text”.WebAIM
“Attractive, Accessible Websites”,
“Creating Semantic Structure”. WebAIM
“The future of web accessibility”,

25. References “ ‘Skip navigation’ Links”, webAIM
Sutel, Seth. “Blind web surfers sue for accessibility”. AP. Retrieved from:
10/24/06
UT Accessibility Institute,
“Web Content Accessibility Guidelines 2.0 Checklist”, W3C,