Top Mistakes in Web Accessibility


Published on

The presentation given at

Published in: Technology, Design

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 EKRAKÓW, 20.10.2011
  2. 3TYPES
  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 CognitiveMotor impaired can find using keyboard or mouse problematic.Alternative inputs can have different range of complexity, most frequentbeing 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 guideinto frequent problems
  17. Incorrect alternative text
  18. Text provided asthe 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 DaytonaFerrari is an Italian sports Ferrari is an Italian sports Ferrari is an Italian sportscar manufacturer based in car manufacturer based in car manufacturer based inMaranello, 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 ofoperation 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-down2.4.1 A mechanism is available to bypass blocks of content that arerepeated 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” nonerole=”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 hereSuccess 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 notrelated to the linkSuccess 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 AJAXaria-live="off" aria-live="assertive"aria-live="polite" aria-live="rude"
  43. Browser extensions Fangs Web Developer Toolbar Accessibility Evaluation ToolbarFree screen readers NVDA ChromeVox FireVox VoiceOver
  44. Fangs No anchor textNo 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&AWojtek Zając (@theanxy) This work is licensed under a Creative Commons Attribution 3.0 Unported License