slide 1 of 64
Universal Accessability
Paul HouleLibrary Systems
CU Library
Based on a presentation by Sarah Horton
slide 2 of 64
What is universal accessability?
An extension of usability
Make systems usable for everyone
First: be flexible to people’s needs
Second: provide alternative access
Gives best user experience
At least cost
Designing Accessible WebsitesDEFINITIONS
slide 3 of 64Designing Accessible WebsitesDEFINITIONS
Access by accommodation…
slide 4 of 64Designing Accessible WebsitesDEFINITIONS
… versus design
slide 5 of 64
Prevalance of Disabilities
• US Census: 1 in 5 Americans report disability
• 9% of incoming freshman have a disability that affects computer use
Designing Accessible WebsitesEQUITABLE USE
slide 6 of 64
Disabilities and Adaptations
• Blindness (screen readers, ALT text)
• Low vision (scalable text)
• Color blindness (use colors carefully)
• Deafness (captions)
• Motor problems (access keys)
• Cognitive deficits (general usability)
Designing Accessible WebsitesEQUITABLE USE
slide 7 of 64
•Time to complete task varies:
• 2.4 times between 25% and 75% percentile
• 15 times between fastest and slowestJacob Nielsen’s Alertbox 5/15/2006
slide 8 of 64
“Technologically Challenged”
• Text web browsers
• Old equipment
• Small screens (PDA, cell phone)
• Large screens (16:9, HDTV)
• Web robots
Designing Accessible WebsitesEQUITABLE USE
slide 9 of 64
Some sites offer “accessible” or “text-only” versions…Designing Accessible WebsitesEQUITABLE USEwww.nln.ac.uk
slide 10 of 64
…but alternate versions are often accessible but not equivalent
Designing Accessible WebsitesEQUITABLE USEwww.nln.ac.uk
slide 11 of 64
Some sites put the onus on users…Designing Accessible WebsitesEQUITABLE USEwww.oldnavy.com
slide 12 of 64
…by requiring them to adapt their environmentDesigning Accessible WebsitesEQUITABLE USEwww.jkrowling.com
slide 13 of 64
Fixed-width columns, mix of text and graphic textFLEXIBLE DESIGNwww.newyorker.com
slide 14 of 64
The main text scales but the column width remains the same…
FLEXIBLE DESIGNwww.newyorker.com
slide 15 of 64
…and the image-based navigation does not scale FLEXIBLE DESIGNwww.newyorker.com
slide 16 of 64
Fixed designs hold together at a certain text size…FLEXIBLE DESIGNwww.academicimpressions.com/
slide 17 of 64
…but break apart when the text is enlargedFLEXIBLE DESIGNwww.academicimpressions.com/
slide 18 of 64
Fixed-width pages use only a portion of a large display…
FLEXIBLE DESIGNwww.newyorker.com
slide 19 of 64
…and do not reflow for viewing on small screensFLEXIBLE DESIGNwww.newyorker.com
slide 20 of 64
Cascading Style Sheets
• Can display document parts out of order (put navigation at the end for screen readers)
• Users can customize (Opera)
• Support flexible layouts
Designing Accessible WebsitesEQUITABLE USE
slide 21 of 64
Flexible pages adapt to modifications, such as…FLEXIBLE DESIGNwww.wikipedia.org
slide 22 of 64
…enlarged type…FLEXIBLE DESIGNwww.wikipedia.org
slide 23 of 64
…larger page widthsFLEXIBLE DESIGNwww.wikipedia.org
slide 24 of 64
…smaller page widthsFLEXIBLE DESIGNwww.wikipedia.org
slide 25 of 64
…customized for small screensFLEXIBLE DESIGNwww.wikipedia.org
slide 26 of 64
…and formatting turned off…FLEXIBLE DESIGNwww.wikipedia.org
slide 27 of 64
…and with custom formattingFLEXIBLE DESIGNwww.wikipedia.org
slide 28 of 64
Be careful about
• Frames
• Pop-up windows
• Javascript
• AJAX
• Flash
Designing Accessible WebsitesEQUITABLE USE
slide 29 of 64
Accessable Flash
• Good: text in Flash is really text
• Good: Flash supports video with captions
• Good: Flash supports access keys (use them!)
• Bad: many sites have broken flash detection
• Bad: many platforms will never support flash (text mode browsers)
Designing Accessible WebsitesEQUITABLE USE
slide 30 of 64
Fallbacks offer alternate modes of access Primarily text-based because text can
be seen and heard
Some provisions for alternates built into technology
Otherwise, alternates can be integrated into interface
FALLBACKS
slide 31 of 64
Image-based content that is not accessible to non-visual users…
FALLBACKSwww.apple.com
slide 32 of 64
…can be supplied via alternate text (alt-text)FALLBACKSwww.apple.com
slide 33 of 64
Though for equitable use…FALLBACKSwww.apple.com
slide 34 of 64
…the alt-text must be equivalentFALLBACKSwww.apple.com
slide 35 of 64
Equivalent text for text graphics is essential…FALLBACKSwww.creativecommons.org
slide 36 of 64
…but alt-text describing reinforcing graphics is not helpful
FALLBACKSwww.creativecommons.org
slide 37 of 64
Flash-based content can be presented with a fallback…
FALLBACKSwww.warnerbros.com
slide 38 of 64
…though it often isn’tFALLBACKSwww.warnerbros.com
slide 39 of 64
On some sites, the Flash fallback…FALLBACKSsolarsystem.nasa.gov
slide 40 of 64
…is a suggestion to install Flash, here offered with an additional fallback link…
FALLBACKSsolarsystem.nasa.gov
slide 41 of 64
…to a text versionFALLBACKSsolarsystem.nasa.gov
slide 42 of 64
The most successful Flash fallback…FALLBACKSwww.kidshealth.org
slide 43 of 64
…is invisible to the userFALLBACKSwww.kidshealth.org
slide 44 of 64
Another way to provide fallbacks is to offer alternates in the interface
FALLBACKSwww.pbs.org/wgbh/nova/sciencenow/
slide 45 of 64
Providing alternate formats accommodates technology preferences and constraints
FALLBACKSwww.pbs.org/wgbh/nova/sciencenow/
slide 46 of 64
Audio-based content that is not accessible to users who cannot hear…
FALLBACKSwww.pbs.org/wgbh/nova/sciencenow/
slide 47 of 64
…can be supplied via captionsFALLBACKSwww.pbs.org/wgbh/nova/sciencenow/
slide 48 of 64
…can be supplied via captionsFALLBACKSwww.pbs.org/wgbh/nova/sciencenow/
slide 49 of 64
…as well as a transcriptFALLBACKSwww.pbs.org/wgbh/nova/sciencenow/
slide 50 of 64
Guidelines
Universal designPrinciples of Universal DesignCenter for Universal DesignNorth Carolina State University
UsabilityJakob Neilson, useit.comSteve Krug, Don’t Make Me Think
Universal usabilitySarah Horton, Access by Design
Designing Accessible WebsitesGUIDELINES