More Related Content


Top Mistakes in Web Accessibility

  1. Top Mistakes in Web Accessibility F R O N T R OW CO N F E R E N C E KRAKÓW, 20.10.2011
  2. 3 TYPES
  3. 1. Bored manager T H E Y S AY “Disabled people are not in my target group” FAV O R I T E T O O L his blackberry
  4. 2. A future lover T H E Y S AY “I’ll AJAX all over your CSS3” FAV O R I T E T E C H N I Q U E hashbangs
  5. 3. Over-exciter T H E Y S AY “I created a text- only version of my church’s website” FAV O R I T E T O O L JS text resizer
  6. You’ll need to deal with different types of people. Let’s get some facts straight
  7. Benefits of web accessibility ✦ About 15% (5 mln) of total population in Poland live with some kind of disability ✦ The average age of web users increases every year ✦ Good for not proficient language users ✦ Meets legal requirements ✦ Everyone benefits! (think slower connections)
  8. Benefits of web accessibility ✦ Strong overlap with: mobile web
  9. Benefits of web accessibility ✦ Strong overlap with: SEO
  10. Types of disability
  11. Visual Hearing Motor Cognitive ✦ Blind ✦ Partial vision loss ✦ Color blindness
  12. Visual Hearing Motor Cognitive Video transcription (closed captioning) benefits not just those with hearing impairments. ✦ Disabling sound ✦ Content becomes searchable and quotable
  13. Visual Hearing Motor Cognitive Motor impaired can find using keyboard or mouse problematic. Alternative inputs can have different range of complexity, most frequent being different types “switches”.
  14. Visual Hearing Motor Cognitive Cognitive problems occur to older users and those with worse level of document language. ✦ Increase readability ✦ Large headlines ✦ Descriptive link text ✦ Increased target area of navigation links
  15. “For me being online is everything. It’s my hi-fi, my source of income, my supermarket, my telephone. It’s my way in” TeLynn Holdsworth, screen reader user
  16. A brief guide into frequent problems
  17. Incorrect alternative text
  18. Text provided as the text alternative must present the content and function.
  19. fig. Image based navigation with no alt text
  20. BAD I <img src="" alt="Image of heart"> you. GOOD Ferrari Daytona Ferrari Daytona Ferrari is an Italian sports Ferrari is an Italian sports Ferrari is an Italian sports car manufacturer based in car manufacturer based in car manufacturer based in Maranello, Italy. Maranello, Italy. Maranello, Italy. alt=”Ferrari Daytona” alt=”” alt=”Buy Ferrari”
  21. Some rules to remember… ✦ Context is important ✦ Short is better than long ✦ Avoid redundancy ✦ Skip “image of…” or “graphic of…” ✦ Describe function ✦ alt= "" for decorative images
  22. Following the visual appearance
  23. Semantics is the king <h3> <ul>
  24. Not changing defaults
  25. Don’t do OUTLINE: 0; (or at least provide with alternatives) 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
  26. Disabling mobile zoom
  27. Don’t copy & paste <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> without testing
  28. Failing in navigation
  29. Lengthy mega drop-down 2.4.1 A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
  30. Keep the proper structure of document headings.
  31. Keep the proper structure of document headings.
  32. Hiding content FROM SCREEN FROM SCREEN READERS .hidden { position: absolute; left: -10000px; .hide { top: auto; display: none; width: 1px; visibility: hidden; height: 1px; } overflow: hidden; } D I S P L AY O N F O C U S .hidden:focus { position: static; width: auto; height: auto; }
  34. WAI-ARIA Landmark Roles Landmark HTML 5 element role=”application” none role=”banner” none role=”complementary” <aside> role=”contentinfo” <footer> role=”main” none role=”navigation” <nav> role=”search” none ~ The Paciello Group
  35. Inaccessible forms
  36. Label your inputs ✦ Check the tab order ✦ Group form elements ✦ Make sure it’s JS independent WRONG: Name: [radio button] Mr. [radio button] Mrs. [text input] [text input] [text input] eMail Address Retype eMail
  37. Form validation ~ Derek Featherstone: Aria and Progressive Enhancement
  38. Ambiguous links
  39. Read more Click here Success Criterion 2.4.4 - Link Purpose (In Context) Failure 63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link Success Criterion 2.4.9 - Link Purpose (Link Only) Failure 84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.
  40. Adding interaction
  41. Manage focus order!
  42. Use ARIA roles to add meaning to your components and provide with readable data. <li role="menuitemcheckbox" aria-checked="true"> Sort by Last Modified </li> LIVE REGIONS for AJAX aria-live="off" aria-live="assertive" aria-live="polite" aria-live="rude"
  43. Browser extensions Fangs Web Developer Toolbar Accessibility Evaluation Toolbar Free screen readers NVDA ChromeVox FireVox VoiceOver
  44. Fangs No anchor text No h e ading s No a l t te x t S ubm i t n o t be i ng re ad o u t
  45. Thanks! Q&A Wojtek Zając (@theanxy) This work is licensed under a Creative Commons Attribution 3.0 Unported License