web accessibility gone wild
DESCRIPTION
Mistakes, misconceptions, over-indulgences, minutia, and generally silly aspects of modern web accessibility. Presented by Jared Smith at Accessing Higher Ground Conference 2009.TRANSCRIPT
![Page 1: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/1.jpg)
Web Access ib i l i tyGone Wi ld
Jared Smithhttp://webaim.org
Now even MORE
wi lder !
![Page 2: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/2.jpg)
Gone wild?Mistakes, misconceptions, over-
indulgences, minutia, and generally silly aspects of modern web
accessibility... or “How to FAIL at web accessibility”
![Page 3: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/3.jpg)
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
![Page 4: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/4.jpg)
WebAIM surveys of screen reader user preferences
There is no typical user
![Page 5: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/5.jpg)
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.
![Page 6: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/6.jpg)
Focusing on True Accessibility and Not Merely
Compliance
![Page 7: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/7.jpg)
Knowing That Accessibility is a Continuum
![Page 8: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/8.jpg)
Alt text should present CONTENT and FUNCTION
Very rarely a description
![Page 9: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/9.jpg)
• alt=”bullet”
![Page 10: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/10.jpg)
alt=”image of my cat”
![Page 11: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/11.jpg)
Adding “image of...”, “graphic of...”, etc. to alt text
![Page 12: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/12.jpg)
alt=”Photo of the White House”
![Page 13: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/13.jpg)
alt=”Photo of the White House”
Is “Photo of...” necessary? It doesn’t really matter.
![Page 14: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/14.jpg)
alt=”smiling lady”???
![Page 15: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/15.jpg)
S u r v e y s ay s . . .
“ P h o t o o f s m i l i n g l a d y ”
![Page 16: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/16.jpg)
alt=”smiling lady”
![Page 17: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/17.jpg)
Images that are the only thing within a link MUST have alt text
Image buttons and hot spots too
![Page 18: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/18.jpg)
Logos that link to the home pagealt=”WebAIM”
alt=”WebAIM home”alt=”WebAIM logo”
alt=”WebAIM logo with link to home page”
There’s no real consensus
![Page 19: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/19.jpg)
![Page 20: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/20.jpg)
![Page 21: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/21.jpg)
Overly long alt text...
Using real text instead of images(when it makes sense to)...
![Page 22: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/22.jpg)
Providing a long description for EVERY complex image(focus on CONTENT and FUNCTION)
Avoiding redundant alternative text
![Page 23: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/23.jpg)
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’”
SheLoves
You
Yeah
Contents of a Beatles Song
![Page 24: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/24.jpg)
Putting anything other than a URL in longdesc...
![Page 25: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/25.jpg)
The most accessible site on Earth...
![Page 26: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/26.jpg)
•Home•Products•Support•Sales•Forum•Contact Us
Hey, I’m the content!!!
![Page 27: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/27.jpg)
Can you have too much accessibility?
![Page 28: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/28.jpg)
Accessibility preferences are for sissies
![Page 29: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/29.jpg)
Accessibility implemented part way or incorrectly can be worse than no accessibility at all
![Page 30: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/30.jpg)
Which provides better accessibility?
![Page 31: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/31.jpg)
Don’t make disability relevant
![Page 32: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/32.jpg)
... but understand that the experiences of those with disabilities will be different
![Page 33: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/33.jpg)
Building one version of a web site that is fully accessible
![Page 34: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/34.jpg)
Accesskey and Tabindex
(unless you're sure you know what you're doing)
Learn the power of tabindex=”0” and tabindex=”-1”
![Page 35: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/35.jpg)
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
![Page 36: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/36.jpg)
Visually hiding content
• display:none AND visibility:hidden hides from everyone
• Position off-screen left with CSS for screen readers
• Use judiciously
![Page 37: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/37.jpg)
Skip to content
• One link is typically sufficient
• Are headings “a mechanism”?
• Think beyond screen reader access
• Use ARIA landmark roles
![Page 38: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/38.jpg)
Removing the focus indicators from links
Navigate through CNN.com to see this in action
a {outline:0;}
![Page 39: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/39.jpg)
Enhancing focus indicatorsa:focus, a:hover {outline:1px;background-color:#ff0;text-decoration:underline;}
Non-underlined links must become underlined on hover and focus
![Page 40: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/40.jpg)
Bullet-proof web design...
![Page 41: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/41.jpg)
HeadingsProperly structured, one <h1>, never empty
... and other semantic structure.
![Page 42: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/42.jpg)
Title attribute
• Advisory information only
• Ignored by screen readers, except...
• form elements missing labels
• <frame title=”navigation”>
• <acronym>/<abbr>...usually.
![Page 43: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/43.jpg)
Using title attribute properly...
![Page 44: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/44.jpg)
Cognitive disabilities
(not much happening here)
![Page 45: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/45.jpg)
![Page 46: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/46.jpg)
![Page 47: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/47.jpg)
Cognitive load vs Functionality
![Page 48: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/48.jpg)
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
![Page 49: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/49.jpg)
![Page 50: Web Accessibility Gone Wild](https://reader033.vdocuments.mx/reader033/viewer/2022052823/55557625b4c9058a5a8b4d87/html5/thumbnails/50.jpg)
Questions?
Jared SmithWebAIM.org
twitter: @jared_w_smithAHG hashtag: #ahg09