Your SlideShare is downloading. ×

Web Accessibility Gone Wild


Published on

Mistakes, misconceptions, over-indulgences, minutia, and generally silly aspects of modern web accessibility. Presented by Jared Smith …

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Web Accessibility Gone Wilde v e n M!O R E w No wilder Jared Smith
  • 2. Gone wild? Mistakes, misconceptions, over- indulgences, minutia, and generally silly aspects of modern web accessibility ... or “How to FAIL at web accessibility”
  • 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. There is no typical user WebAIM surveys of screen reader user preferences
  • 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. Focusing on True Accessibility and Not Merely Compliance
  • 7. Knowing That Accessibility is a Continuum
  • 8. Alt text should present CONTENT and FUNCTION Very rarely a description
  • 9. • alt=”bullet”
  • 10. alt=”image of my cat”
  • 11. Adding “image of...”, “graphic of...”, etc. to alt text
  • 12. alt=”Photo of the White House”
  • 13. alt=”Photo of the White House” Is “Photo of...” necessary? It doesn’t really matter.
  • 14. alt=”smiling lady”???
  • 15. S urv e y say s . . . “ P h o t o o f s m i l i ng l ad y ”
  • 16. alt=”smiling lady”
  • 17. Images that are the only thing within a link MUST have alt text Image buttons and hot spots too
  • 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. Overly long alt text... Using real text instead of images (when it makes sense to)...
  • 20. Providing a long description for EVERY complex image (focus on CONTENT and FUNCTION) Avoiding redundant alternative text
  • 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. Putting anything other than a URL in longdesc...
  • 23. The most accessible site on Earth...
  • 24. •Home •Products •Support •Sales •Forum •Contact Us Hey, I’m the content!!!
  • 25. Can you have too much accessibility?
  • 26. Accessibility preferences are for sissies
  • 27. Accessibility implemented part way or incorrectly can be worse than no accessibility at all
  • 28. Which provides better accessibility?
  • 29. Don’t make disability relevant
  • 30. ... but understand that the experiences of those with disabilities will be different
  • 31. Building one version of a web site that is fully accessible
  • 32. Accesskey and Tabindex (unless you're sure you know what you're doing) Learn the power of tabindex=”0” and tabindex=”-1”
  • 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. Visually hiding content • display:none AND visibility:hidden hides from everyone • Position off-screen left with CSS for screen readers • Use judiciously
  • 35. Skip to content •One link is typically sufficient • Are headings “a mechanism”? • Think beyond screen reader access • Use ARIA landmark roles
  • 36. Removing the focus indicators from links a { outline:0; } Navigate through to see this in action
  • 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. Bullet-proof web design...
  • 39. Headings Properly structured, one <h1>, never empty ... and other semantic structure.
  • 40. Title attribute • Advisory information only • Ignored by screen readers, except... • form elements missing labels • <frame title=”navigation”> • <acronym>/<abbr>...usually.
  • 41. Using title attribute properly...
  • 42. Cognitive disabilities (not much happening here)
  • 43. Cognitive load vs Functionality
  • 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. Questions? Jared Smith twitter: @jared_w_smith AHG hashtag: #ahg09