The document discusses common mistakes and misconceptions around web accessibility, including providing unnecessary or redundant alt text, overly long alt text descriptions, using images when text would suffice, improperly using tabindex and accesskeys, and prioritizing compliance over usability for those with cognitive disabilities. It also provides tips for proper use of headings, form labels, abbreviations and acronyms, and skip links to improve accessibility.

1. We b A c c e s s i bi l i t y
G o n e W i ld
N o w eve n w i lde r !
Jared Smith & Jon Whiting
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.
• We’ll attempt to be equal
opportunity offenders
• There’s little logic to the sequencing
of topics

4. Survey of screen reader
user preferences
http://webaim.org/projects/screenreadersurvey/

5. Alt text blunders

6. • alt=”bullet”

7. alt=”bullet”

8. alt=”image of my cat”

9. Adding “image of...”, “graphic of...”, etc.
to alt text

10. alt=”photo of the
White House”

11. alt=”photo of the
White House”

12. alt=”smiling lady”???

13. alt=”smiling lady”

14. alt=”Our business promises the best
service you will find on the
planet. Our team is professionally
trained to offer excellent customer
service throughout the contract
negotiation process. Customer
satisfaction is our top priority
and is guaranteed.”

15. “Describing” images - particularly
decorative images used to
convey mood or feeling.

16. Apple iPhone
alt=”iPhone web site”
Images that have a function MUST have alt text

17. Images that have a function MUST have alt text
alt=”iPhone web site”

18. Avoiding redundant text...
<a href=”http://apple.com/iphone/”>
<img src=”iphone.jpg” alt=””><br>
Apple iPhone</a>

19. Logos that link to the home page

20. Logos that link to the home page
There’s no real consensus

23. Overly long alt text...
Using real text instead of images (when possible)...

24. alt=”Sales steadily increased
from $5 million to $16 million
between 1996 and 2004”

25. Focusing on equivalent CONTENT rather
than describing an image

26. longdesc=”80 percent of this
chart resembles Pac-man. 20
percent does not.”

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

28. The most accessible site
on Earth...

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

30. Can you have too much accessibility?

31. FAIL!

32. Which provides better accessibility?

33. FAIL!

34. FAIL!

35. FAIL!

36. Text-only alternatives
• Not an excuse for a site that could
otherwise be made accessible
• Only benefits a small number of users
• Native accessibility = text alternative
• Rarely used

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

38. Using text only versions of
inaccessible web sites...

39. We don’t need no stinkin’ badges

40. Accesskey and Tabindex

41. Tabindex
• tabindex=”1+”
Specifies exact tab order. Ensure tabindex
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

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

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

44. Navigation
Navigate through CNN.com using only the keyboard

45. Navigation
• Ensure page is keyboard accessible
• Do not remove outline
• Provide clear focus indicators

46. Text resizing
Increase the font size (not zoom) at
MLB.com

47. Bullet-proof web design...

48. Fixing screen readers
alt=”sea sun”
vs.
alt=”CSUN”

50. Until user agents...
They do

51. You don’t need to provide...
• default text in form fields
• printable character between links
• redundant text links for client-side
image maps

52. Acronym and Abbreviation
• Expand in text at first instance OR use
<acronym> or <abbr>.
• It’s not necessary to expand all instances.
• It’s not necessary to expand commonly
known acronyms and abbreviations (for our
web site - HTML, CSS, etc.)

53. Proper use of Acronym and Abbreviation

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

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

56. Using title attribute
properly...

57. Accessibility > Compliance
The mythical “accessible” web site doesn’t exist!
“Is your site WCAG 2.0 AAA compliant???”

58. Cognitive disabilities
(not much happening here)

61. Cognitive load vs Functionality

63. Other
• Accessibility statements. Who cares?
• Site maps aren’t typically used
• Design for optimal line length (Jello layouts)
• Provide accurate, descriptive page titles
• You don’t HAVE to check in screen readers
• Don’t provide summary for layout tables
• Use fieldset for grouped radio buttons and
checkboxes
• Layout tables don’t (typically) affect accessibility

64. Questions?
<plug shameless=”true”>
read the articles
check the blog
join the list
subscribe to newsletter
get our training
</plug>