Implementing universal accessability

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)


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


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

http://www.oldnavy.com/

slide 12 of 64

…by requiring them to adapt their environmentDesigning Accessible WebsitesEQUITABLE USEwww.jkrowling.com

http://www.jkrowling.com/



slide 13 of 64

Fixed-width columns, mix of text and graphic textFLEXIBLE DESIGNwww.newyorker.com

http://www.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/

http://www.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


slide 21 of 64

Flexible pages adapt to modifications, such as…FLEXIBLE DESIGNwww.wikipedia.org

http://www.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


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)


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


slide 46 of 64

Audio-based content that is not accessible to users who cannot hear…


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

Education

Implementing universal accessability