Introduction to Web Accessibility (and Usability)

1. Introduction to Web Accessibility (and Usability) Robert L. Todd USG, Director, Policy and Partnership Development robert.todd@usg.edu Senior Research Scientist Georgia Institute of Technology Introduction to Web Accessibility and Usability Robert L. Todd

2. Design for the web that attempts to make information available to all users. Design for Disability, but also for Usability - the design of interfaces that are effective, efficient and satisfying What is Accessible Web Design? Introduction to Web Accessibility and Usability Robert L. Todd

3. Web Accessibility – Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. (W3C.org, 2013) What is Accessible Web Design? Introduction to Web Accessibility and Usability Robert L. Todd

4. Basically - it means that people with disabilities can use the Web. Specifically - it includes all types of disabilities, e.g., visual, auditory, physical, speech, cognitive, and neurological. What is Accessible Web Design? Introduction to Web Accessibility and Usability Robert L. Todd

5. What is Accessible Web Design? Introduction to Web Accessibility and Usability Robert L. Todd

6. Example: Not very accessible … What is Accessible Web Design? Introduction to Web Accessibility and Usability Robert L. Todd

7. What is usability? • Usability - the design of interfaces that are effective, efficient and satisfying • Exhibit – Usable? Introduction to Web Accessibility and Usability Robert L. Todd

8. Usability is a quality attribute relating to how easy something is to use. It refers to how quickly people can learn to use something, how efficient they are while using it, how memorable it is, how error-prone it is, and how much users like using it. (Nielsen & Loranger, 2006) What is usability? Introduction to Web Accessibility and Usability Robert L. Todd

9. Good resource: Usability.gov http://www.usability.gov/basics/ucd/index.html What is usability? Introduction to Web Accessibility and Usability Robert L. Todd

10. When designing online resources, it is rarely useful to distinguish between accessibility and usability - they are an organic whole. Relationship: Accessibility and Usability Introduction to Web Accessibility and Usability Robert L. Todd

11. Electronic Curb Cuts - For the most part, the same design features that make a site accessible make it usable, and vice versa Relationship: Accessibility and Usability Introduction to Web Accessibility and Usability Robert L. Todd

12. Example: If a site uses images for navigation and there is no alt text, then … it is not accessible. But … if it includes poorly written, verbose alt text, it is accessible, but not usable. Relationship: Accessibility and Usability Introduction to Web Accessibility and Usability Robert L. Todd

13. Alt Text Examples: Relationship: Accessibility and Usability Introduction to Web Accessibility and Usability Robert L. Todd

14. Alt Text Examples: Relationship: Accessibility and Usability Introduction to Web Accessibility and Usability Robert L. Todd

15. Accessible – Also Usable Introduction to Web Accessibility and Usability Robert L. Todd

16. To sum up: Accessibility is nothing more than the logical extension of usability to include all people. Usability and accessibility should go hand-in-hand For the most part, this is true: increased accessibility leads to greater usability Accessibility and Usability Introduction to Web Accessibility and Usability Robert L. Todd

17. Who are the People with Disabilities? Introduction to Web Accessibility and Usability Robert L. Todd

18. “Disability” is an imprecise word: Disability (and ability) is different over time and between people People can have combinations of disabilities Better to use functional descriptions TBI example Cerebral Palsy example Disabilities Introduction to Web Accessibility and Usability Robert L. Todd

19. Specific disabilities and case studies Visual disabilities Hearing disabilities Physical disabilities Speech disabilities Behavioral disabilities Disabilities Introduction to Web Accessibility and Usability Robert L. Todd

20. Specific disabilities and case studies Cognitive and neurological disabilities Multiple disabilities Aging related conditions Disabilities Introduction to Web Accessibility and Usability Robert L. Todd

21. Excellent online source with case studies at W3C/WAI: http://www.w3.org/WAI/intro/people-use-web/Overview.html Disabilities Introduction to Web Accessibility and Usability Robert L. Todd

22. Different disabilities may be addressed by similar accommodations Blind person Person with no use of hands Both assisted by keyboard controls in place of mouse, in conjunction with other assistive technology (AT) Disabilities Introduction to Web Accessibility and Usability Robert L. Todd

23. Accessibility solutions contribute to Universal Design and Usability Example - Voice recognition benefits: Person with no use of hands Busy worker with poor typing skills Disabilities Introduction to Web Accessibility and Usability Robert L. Todd

24. Macular Degeneration Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm In general, magnification and high levels of illumination will assist in reading and other near vision tasks. Introduction to Web Accessibility and Usability Robert L. Todd

25. Cataracts Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm Age related cataracts are often yellow or brown causing loss of sensitivity to blue. Introduction to Web Accessibility and Usability Robert L. Todd

26. Diabetic Retinopathy Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm This is the largest single cause of visual impairment among those of working age. Introduction to Web Accessibility and Usability Robert L. Todd

27. Tunnel Vision/Retinitis Pigmentosa Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm This impairment often makes it possible to read small print but not large print. Introduction to Web Accessibility and Usability Robert L. Todd

28. 20/200 Legally Blind View of Computer Screen Introduction to Web Accessibility and Usability Robert L. Todd

29. Aging/Cataract View of Computer Screen Introduction to Web Accessibility and Usability Robert L. Todd

30. 19.4% of Americans (54 million) have a disability 800 million+ world-wide 10% to 15% of the browsing population Audience Factors Introduction to Web Accessibility and Usability Robert L. Todd

31. Disability as a function of age Audience Factors: Numbers Introduction to Web Accessibility and Usability Robert L. Todd

32. Prevalence of disabilities in U.S. Audience Factors: Numbers Introduction to Web Accessibility and Usability Robert L. Todd

33. Aging and disability Audience Factors: Numbers Introduction to Web Accessibility and Usability Robert L. Todd

34. Graying of the U.S. Audience Factors: Numbers Introduction to Web Accessibility and Usability Robert L. Todd

35. Accessibility Guidelines and Standards Introduction to Web Accessibility and Usability Robert L. Todd

36. Which guidelines to use? Section 508 similar to WCAG 2.0, level A and part of level AA WCAG 2.0 Conformance levels AA and AAA most restrictive WCAG 2.0 Conformance Level AAA - most accessible, but some trade-off in design limitations Web Accessibility Guidelines Introduction to Web Accessibility and Usability Robert L. Todd

37. 508 or WCAG 1.0? A general comparison. Laws vs. Guidelines Paragraphs (l), (m), (n), (o), and (p) of Section 508 article 1194.22 are different from WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1 checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to comply with this section. Introduction to Web Accessibility and Usability Robert L. Todd

38. Which guidelines to use? Section 508 - created by the Access Board, legislated WCAG - created by the WAI/W3C, voluntary, 2.0 current, 1.0 still used Web Accessibility Guidelines Introduction to Web Accessibility and Usability Robert L. Todd

39. 508 or WCAG 2.0? WCAG 2.0 techniques can be used to meet unambiguously every one of the Section 508 guidelines. Conversely, a Section 508-compliant page using these techniques will also conform to WCAG 2.0 Level A and part of Level AA (with the exception of three criteria) Laws vs. Guidelines Introduction to Web Accessibility and Usability Robert L. Todd

40. 508 or W3C? A general comparison. 508 paragraph (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). W3C Priority 1, checkpoint 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video. Laws vs. Guidelines Introduction to Web Accessibility and Usability Robert L. Todd

41. 508 or W3C? W3C is a more international standard W3C 2.0 has three levels of conformance A AA AAA WCAG 2.0 current - POUR Laws vs. Guidelines Introduction to Web Accessibility and Usability Robert L. Todd

42. 508 or W3C? Level AA of WCAG requires use of relative values; no use of absolute values Level A of WCAG and Section 508 - absolute values allowable WCAG 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) Laws vs. Guidelines Introduction to Web Accessibility and Usability Robert L. Todd

43. Section 508 guidelines Guidelines - www.section508.gov Checklist - www.webaim.org/standards/508/checklist Web Accessibility Guidelines Introduction to Web Accessibility and Usability Robert L. Todd

44. WCAG Guidelines Guidelines - www.w3.org/TR/WCAG10/ http://www.w3.org/TR/WCAG20/ Checklist - http://webaim.org/standards/wcag/checklist Web Accessibility Guidelines Introduction to Web Accessibility and Usability Robert L. Todd

45. Accessibility Verification Introduction to Web Accessibility and Usability Robert L. Todd

46. Some free, online tools for verifying web accessibility: WAVE -http://wave.webaim.org/ Cynthia Says - http://www.cynthiasays.com/ Accessibility Verification Introduction to Web Accessibility and Usability Robert L. Todd

47. Some free, online tools for verifying web accessibility: Achecker - http://achecker.ca/checker/index.php PowerMapper -http://try.powermapper.com/demo/powermapper.aspx Let’s test on a site and see what happens … Accessibility Verification Introduction to Web Accessibility and Usability Robert L. Todd

48. Accessibility Verification Professional tools: • Powermapper tools • HiSoftware Compliance Sheriff Rather complete list of all tools, free and for pay: • WebAIM List of Evaluation Tools Introduction to Web Accessibility and Usability Robert L. Todd

49. Validation and Repair Tools Validation tools - perform accessibility analyses of pages or sites and return a report or rating WAVE - http://wave.webaim.org/index.jsp Cynthia Says - http://www.contentquality.com/ Validating Web Pages Introduction to Web Accessibility and Usability Robert L. Todd

50. Validation and Repair Tools Repair tools - tools that assist web authors to modify code to be more accessible. Many such tools are automatic or wizard based. Most include validation tools, as well. Powermapper tools HiSoftware Compliance Sheriff Validating Web Pages Introduction to Web Accessibility and Usability Robert L. Todd