Successfully reported this slideshow.

Accessible Web Sites: What can you do?

4

Share

Loading in …3
×
1 of 37
1 of 37

Accessible Web Sites: What can you do?

4

Share

Download to read offline

Presented at a Leadership Institute webinar for the Montana Arts Council in May 2012. Primarily a talk discussing the concepts behind the WCAG 2.0 guiding principles.

Based on the December presentation for the Montana web programmers meetup, but modified for the audience.

Presented at a Leadership Institute webinar for the Montana Arts Council in May 2012. Primarily a talk discussing the concepts behind the WCAG 2.0 guiding principles.

Based on the December presentation for the Montana web programmers meetup, but modified for the audience.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Accessible Web Sites: What can you do?

  1. 1. Accessible Web Sites WHAT CAN YOU DO?
  2. 2. Who am I? - A web designer and programmer - An advocate for web accessibility - A writer on practical accessibility - Read more at http://www.joedolson.com
  3. 3. What am I going to talk about? 1) Overview of web accessibility principles 2) Examples of testing methods (with and without tools) 3) Tools and resources for further work.
  4. 4. Web Accessibility: An Overview
  5. 5. Fundamentals - Techniques: - Technology specific - Rapidly changing as technology shifts - Principles: - Technology independent - Change as research learns more about human cognition
  6. 6. Knowing principles helps you learn techniques
  7. 7. Web Content Accessibility Guidelines v.2 Principles: - Perceivable - Operable - Understandable - Robust
  8. 8. Perceivable - your product can be perceived regardless of disability. People who cannot use one or more of their senses can still obtain the information on your web site.
  9. 9. Perceivability Red Flags: - Is information contained in an image? A sound file? A video? - Does the information require specific knowledge to interpret, such as awareness of position on the page or color? - Does the document use HTML headings? - Does the document's contrast meet minimum specifications?
  10. 10. Perceivability Requires Imagination - Imagine the MANY possible ways to access your site: - If the user cannot hear sounds (no speakers, Deaf or Hard of Hearing) - If the user cannot see images (non-image rendering browser, blind or sight-impaired) - If the user is not using the site as you laid it out (re- drawn by a mobile browser or linearized by a screen reader)
  11. 11. Operable - your product can be operated regardless of disability. People who cannot use one or more of their senses can still perform actions such as navigation, purchasing, or communicating at your web site.
  12. 12. Operability Red Flags - Can you easily distinguish link text from other text on the site? - When navigating without a mouse, can you tell where you are in the site? Is the navigation order logical? - On a form, can you navigate the form without a mouse? Do you have to use fine motor skills to successfully select options? - Do pages have unique titles? - Are links clearly labeled? (e.g. not “Read more” or “Click here”)
  13. 13. Both menus have the “Express Free” option selected. The left is using a keyboard.
  14. 14. Operability is Complicated When it comes to forms and complex applications such as video players, operability is very difficult to test thoroughly without specialized knowledge and tools. However, the keyboard test is a good start for any issue.
  15. 15. Understandable The Information on and operation of the site must be understandable. Users must be able to understand the information as well as the operation of the user interface.
  16. 16. Understandability Red Flags - Are interface methods consistent with expectations? Links should be underlined; other text not. - Is navigation consistent from one page to the next? - Are functions identified consistently? (“Search” on one page and “Find” on another) - In a form, is it clear what information is needed and how to enter it? (Dates, phone numbers, and other formatted data in particular.) - Is the language of the document specified?
  17. 17. Robust - Your site is built according to standards. A site is robust if it will be maximally usable on a wide range of browsers or devices; building with W3C HTML standards helps ensure that it will be usable on future devices or browsers. Validating your site with the W3C's validator tool is the primary test for this: http://validator.w3.org
  18. 18. Questions?
  19. 19. Seeing with other eyes TESTING WITHOUT TOOLS
  20. 20. Testing doesn't always need special tools - Understanding how people with disabilities use a site - Learning how to see potential problems - Applying the principles of accessibility
  21. 21. Think like assistive technology - Imagining you are blind isn't sufficient; you also have to think like a machine - You have to understand what information is available to the computer. This form of testing is only an overview: it can't detect every problem. It can forestall endemic issues, however.
  22. 22. The Blind Experience - Is keyboard dependent. - Uses complex keyboard commands - Gets information about visual objects from related text Can links be visited via keyboard? Form fields? Submit buttons? Are form responses announced when a form is submitted? Has the web site defined keyboard controls which may conflict with the assistive technology? Do images and media files have text equivalents?
  23. 23. Low vision or partial sight. - Use OS tools or assistive technology with screen magnification - May adjust browser settings to increase font size - May use alternate contrast schemes - May have narrow field of vision Is all text visible when the font size is enlarged? Are line lengths too long using screen magnifiers? Is contrast sufficient for text to be legible with poor light perception or color blindness? Do instructions depend on color identification for success?
  24. 24. Reduced motor skills. - May use a mouse, but have difficulty controlling it with precision. - May be keyboard dependent. - May use special pointing devices such as a mouth stick, head wand, or eye tracker. Are clickable areas large enough to activate using less refined pointing devices such as a mouth stick or head wand? Is keyboard focus visible, so keyboard dependent users can tell what they are currently activating?
  25. 25. Cognitive Limitations. - May need extra time to complete time-based tasks. - May become confused if navigation or layout of site changes significantly from page to page - May need orientation tools to return to previous pages - May be highly distracted by motion or sound Concerns relating to learning disabilities range broadly across issues with recall, comprehension, reading skill, attention, and spatial cognition. Use of contrast, color coordination of related items, choice of fonts, and simplification of written text are among the rich variety of strategies for supporting these issues.
  26. 26. Refining perceptions TOOLS AND RESOURCES
  27. 27. Overview of testing. The best testing is to put a group of assistive tech users in front of your site, and set them tasks to accomplish. This is, obviously, beyond the means of most developers and clients. The compromise is threefold: - Limit use of newer, less-tested technologies. - Research new features thoroughly. - Do as much testing as you can.
  28. 28. General purpose tools (free!). - Firefox Accessibility Toolbar: http://bit.ly/firefox-toolbar - Internet Explorer Accessibility Toolbar: http://bit.ly/ie-toolbar - WebAIM's WAVE tester: http://wave.webaim.org - Windows 'Ease of Access': http://bit.ly/ease-of-access - MacOS Accessibility: http://bit.ly/mac-access
  29. 29. WAVE
  30. 30. WAVE results Red: definite error Green: Yay! Yellow: needs human verification
  31. 31. Color contrast testing tools (free!). - Firefox ColorZilla extension: http://bit.ly/color-zilla - Graybit.com: http://bit.ly/u12eSu - Color contrast comparison tool:http://bit.ly/color-compare - Color contrast exploration tool:http://bit.ly/color-explore - ColorPic eyedrop tool: http://bit.ly/colorpic
  32. 32. MT.gov results: shows all defined contrasts
  33. 33. Screen reader tools (free). - WebAnywhere: (web) http://bit.ly/web-anywhere - NVDA: (Windows) http://www.nvda-project.org/ - VoiceOver: (Mac) – it's built in! Screen reader tools (not at all free). - JAWS: http://bit.ly/jaws-reader - Window-Eyes: http://bit.ly/rBlRYW - Zoomtext: http://www.aisquared.com/zoomtext/ + many, many others.
  34. 34. Secondary Tools. - W3C HTML Validator: http://validator.w3.org/ - W3C CSS Validator: http://jigsaw.w3.org/css-validator/ - W3C Semantic Extractor: http://bit.ly/vBKMyy - HTML 5 Outline Generator: http://bit.ly/w02s3J
  35. 35. MT.gov: HTML validator results - Validator results require significant expertise to fully Understand.
  36. 36. Finding more information. - WCAG Recommended Techniques: highly technical, though simpler than the WCAG itself. http://www.w3.org/TR/WCAG-TECHS/ - WebAIM: Simplified summaries, recommendations. Extensive documentation on almost every accessibility topic: http://webaim.org - University of Minnesota, Duluth Web Design References: Extensive curated catalog of accessibility articles on the web: http://bit.ly/t3tPZC

×