Web Accessibility Gone Wild


Published on

Mistakes, misconceptions, over-indulgences, minutia, and generally silly aspects of modern web accessibility. Presented by Jared Smith
at Accessing Higher Ground Conference 2009.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Accessibility Gone Wild

  1. 1. Web Accessibility Gone Wilde v e n M!O R E w No wilder Jared Smith http://webaim.org
  2. 2. Gone wild? Mistakes, misconceptions, over- indulgences, minutia, and generally silly aspects of modern web accessibility ... or “How to FAIL at web accessibility”
  3. 3. Disclaimers • There will be controversy and you may disagree. • I’ll attempt to be an equal opportunity offender • There’s little logic to the sequencing of topics
  4. 4. There is no typical user WebAIM surveys of screen reader user preferences
  5. 5. Accessibility > Compliance The mythical “accessible” web site doesn’t exist! Use guidelines as tools to achieve accessibility. Your site can be fully compliant, yet totally inaccessible.
  6. 6. Focusing on True Accessibility and Not Merely Compliance
  7. 7. Knowing That Accessibility is a Continuum
  8. 8. Alt text should present CONTENT and FUNCTION Very rarely a description
  9. 9. • alt=”bullet”
  10. 10. alt=”image of my cat”
  11. 11. Adding “image of...”, “graphic of...”, etc. to alt text
  12. 12. alt=”Photo of the White House”
  13. 13. alt=”Photo of the White House” Is “Photo of...” necessary? It doesn’t really matter.
  14. 14. alt=”smiling lady”???
  15. 15. S urv e y say s . . . “ P h o t o o f s m i l i ng l ad y ”
  16. 16. alt=”smiling lady”
  17. 17. Images that are the only thing within a link MUST have alt text Image buttons and hot spots too
  18. 18. Logos that link to the home page alt=”WebAIM” alt=”WebAIM home” alt=”WebAIM logo” alt=”WebAIM logo with link to home page” There’s no real consensus
  19. 19. Overly long alt text... Using real text instead of images (when it makes sense to)...
  20. 20. Providing a long description for EVERY complex image (focus on CONTENT and FUNCTION) Avoiding redundant alternative text
  21. 21. Contents of a Beatles Song Loves She You Yeah longdesc=”1/2 of the content of a Beatles song is ‘Yeah’, 1/6th is ‘She’, 1/6th is ‘Loves’, and 1/6th is ‘You’”
  22. 22. Putting anything other than a URL in longdesc...
  23. 23. The most accessible site on Earth...
  24. 24. •Home •Products •Support •Sales •Forum •Contact Us Hey, I’m the content!!!
  25. 25. Can you have too much accessibility?
  26. 26. Accessibility preferences are for sissies
  27. 27. Accessibility implemented part way or incorrectly can be worse than no accessibility at all
  28. 28. Which provides better accessibility?
  29. 29. Don’t make disability relevant
  30. 30. ... but understand that the experiences of those with disabilities will be different
  31. 31. Building one version of a web site that is fully accessible
  32. 32. Accesskey and Tabindex (unless you're sure you know what you're doing) Learn the power of tabindex=”0” and tabindex=”-1”
  33. 33. Tabindex • tabindex=”1+” Specifies exact tab order. Ensure tab order is complete, logical, and intuitive. • tabindex=”0” Place item in the default tab order • tabindex=”-1” Do not place in tab order, but allow the element to programmatically receive focus
  34. 34. Visually hiding content • display:none AND visibility:hidden hides from everyone • Position off-screen left with CSS for screen readers • Use judiciously
  35. 35. Skip to content •One link is typically sufficient • Are headings “a mechanism”? • Think beyond screen reader access • Use ARIA landmark roles
  36. 36. Removing the focus indicators from links a { outline:0; } Navigate through CNN.com to see this in action
  37. 37. Enhancing focus indicators a:focus, a:hover { outline:1px; background-color:#ff0; text-decoration:underline; } Non-underlined links must become underlined on hover and focus
  38. 38. Bullet-proof web design...
  39. 39. Headings Properly structured, one <h1>, never empty ... and other semantic structure.
  40. 40. Title attribute • Advisory information only • Ignored by screen readers, except... • form elements missing labels • <frame title=”navigation”> • <acronym>/<abbr>...usually.
  41. 41. Using title attribute properly...
  42. 42. Cognitive disabilities (not much happening here)
  43. 43. Cognitive load vs Functionality
  44. 44. Other • Site maps aren’t typically used • Provide accurate, descriptive page titles • Don’t provide summary for layout tables • Don’t stress over screen reader pronunciation • Expand first instance of acronyms and abbreviations. You don’t have to use <acronym>/<abbr> on all instances. Don’t worry if well known terms. • Use fieldset for grouped radio buttons and checkboxes • Layout tables don’t (typically) affect accessibility
  45. 45. Questions? Jared Smith WebAIM.org twitter: @jared_w_smith AHG hashtag: #ahg09