The document discusses various misconceptions and mistakes surrounding web accessibility, emphasizing that true accessibility often goes beyond mere compliance with guidelines. It highlights the importance of properly using alt text, understanding user experiences with disabilities, and ensuring logical navigation through thoughtful design choices like tabindex and semantic structure. The content serves as a critique of common practices, advocating for effective communication and user-centric approaches in web design.

1. Web Accessibility
Gone Wilde v e n M!O R E
w No wilder
Jared Smith
http://webaim.org

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

21. Overly long alt text...
Using real text instead of images
(when it makes sense to)...

22. Providing a long description for EVERY complex image
(focus on CONTENT and FUNCTION)
Avoiding redundant alternative text

23. 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’”

24. Putting anything other than
a URL in longdesc...

25. The most accessible site
on Earth...

26. •Home
•Products
•Support
•Sales
•Forum
•Contact Us
Hey, I’m the content!!!

27. Can you have too much accessibility?

28. Accessibility preferences
are for sissies

29. Accessibility implemented part way or incorrectly
can be worse than no accessibility at all

30. Which provides better accessibility?

31. Don’t make disability relevant

32. ... but understand that the experiences of
those with disabilities will be different

33. Building one version of a web
site that is fully accessible

34. Accesskey and Tabindex
(unless you're sure you know what you're doing)
Learn the power of tabindex=”0” and tabindex=”-1”

35. 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

36. Visually hiding content
• display:none AND
visibility:hidden hides from
everyone
• Position off-screen left with CSS for
screen readers
• Use judiciously

37. Skip to content
•One link is typically sufficient
• Are headings “a mechanism”?
• Think beyond screen reader access
• Use ARIA landmark roles

38. Removing the focus indicators
from links
a {
outline:0;
}
Navigate through CNN.com to see this in action

39. 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

40. Bullet-proof web design...

41. Headings
Properly structured, one <h1>, never empty
... and other semantic structure.

42. Title attribute
• Advisory information only
• Ignored by screen readers, except...
• form elements missing labels
• <frame title=”navigation”>
• <acronym>/<abbr>...usually.

43. Using title attribute properly...

44. Cognitive disabilities
(not much happening here)

47. Cognitive load vs Functionality

48. 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

50. Questions?
Jared Smith
WebAIM.org
twitter: @jared_w_smith
AHG hashtag: #ahg09