1. slide 1 of 64 Universal Accessability Paul Houle Library Systems CU Library Based on a presentation by Sarah Horton

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

3.  Designing Accessible WebsitesDEFINITIONS Access by accommodation… 

4.  Designing Accessible WebsitesDEFINITIONS … versus design

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

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

7.  Time to complete task varies: 2.4 times between 25% and 75% percentile 15 times between fastest and slowest Jacob Nielsen’s Alertbox 5/15/2006

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

9.  Some sites offer “accessible” or “text-only” versions…  Designing Accessible WebsitesEQUITABLE USE www.nln.ac.uk

10.  …but alternate versions are often accessible but not equivalent  Designing Accessible WebsitesEQUITABLE USE www.nln.ac.uk

11.  Some sites put the onus on users…  Designing Accessible WebsitesEQUITABLE USE www.oldnavy.com

12.  …by requiring them to adapt their environment  Designing Accessible WebsitesEQUITABLE USE www.jkrowling.com

13.  Fixed-width columns, mix of text and graphic text  FLEXIBLE DESIGN www.newyorker.com

14.  The main text scales but the column width remains the same…  FLEXIBLE DESIGN www.newyorker.com

15.  …and the image-based navigation does not scale  FLEXIBLE DESIGN www.newyorker.com

16.  Fixed designs hold together at a certain text size…  FLEXIBLE DESIGN www.academicimpressions.com/

17.  …but break apart when the text is enlarged  FLEXIBLE DESIGN www.academicimpressions.com/

18.  Fixed-width pages use only a portion of a large display…  FLEXIBLE DESIGN www.newyorker.com

19.  …and do not reflow for viewing on small screens  FLEXIBLE DESIGN www.newyorker.com

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

21.  Flexible pages adapt to modifications, such as… FLEXIBLE DESIGN www.wikipedia.org

22.  …enlarged type… FLEXIBLE DESIGN www.wikipedia.org

23.  …larger page widths FLEXIBLE DESIGN www.wikipedia.org

24.  …smaller page widths FLEXIBLE DESIGN www.wikipedia.org

25.  …customized for small screens FLEXIBLE DESIGN www.wikipedia.org

26.  …and formatting turned off… FLEXIBLE DESIGN www.wikipedia.org

27.  …and with custom formatting FLEXIBLE DESIGN www.wikipedia.org

28. slide 28 of 64 Be careful about Frames Pop-up windows Javascript AJAX Flash Designing Accessible WebsitesEQUITABLE USE

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

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

31.  Image-based content that is not accessible to non-visual users…  FALLBACKS www.apple.com

32.  …can be supplied via alternate text (alt-text)  FALLBACKS www.apple.com

33.  Though for equitable use…  FALLBACKS www.apple.com

34.  …the alt-text must be equivalent  FALLBACKS www.apple.com

35.  Equivalent text for text graphics is essential…  FALLBACKS www.creativecommons.org

36.  …but alt-text describing reinforcing graphics is not helpful  FALLBACKS www.creativecommons.org

37.  Flash-based content can be presented with a fallback…  FALLBACKS www.warnerbros.com

38.  …though it often isn’t  FALLBACKS www.warnerbros.com

39.  On some sites, the Flash fallback…  FALLBACKS solarsystem.nasa.gov

40.  …is a suggestion to install Flash, here offered with an additional fallback link…  FALLBACKS solarsystem.nasa.gov

41.  …to a text version  FALLBACKS solarsystem.nasa.gov

42.  The most successful Flash fallback… FALLBACKS www.kidshealth.org

43.  …is invisible to the user FALLBACKS www.kidshealth.org

44.  Another way to provide fallbacks is to offer alternates in the interface FALLBACKS www.pbs.org/wgbh/nova/sciencenow/

45.  Providing alternate formats accommodates technology preferences and constraints FALLBACKS www.pbs.org/wgbh/nova/sciencenow/

46.  Audio-based content that is not accessible to users who cannot hear… FALLBACKS www.pbs.org/wgbh/nova/sciencenow/

47.  …can be supplied via captions FALLBACKS www.pbs.org/wgbh/nova/sciencenow/

48.  …can be supplied via captions FALLBACKS www.pbs.org/wgbh/nova/sciencenow/

49.  …as well as a transcript FALLBACKS www.pbs.org/wgbh/nova/sciencenow/

50. slide 50 of 64 Guidelines  Universal design Principles of Universal Design Center for Universal Design North Carolina State University  Usability Jakob Neilson, useit.com Steve Krug, Don’t Make Me Think  Universal usability Sarah Horton, Access by Design Designing Accessible WebsitesGUIDELINES