Web Accessibility Gone Wild
-
Upload
jared-smith -
Category
Technology
-
view
1.540 -
download
1
description
Transcript of Web Accessibility Gone Wild
Web Access ib i l i tyGone Wi ld
Jared Smithhttp://webaim.org
Now even MORE
wi lder !
Gone wild?Mistakes, misconceptions, over-
indulgences, minutia, and generally silly aspects of modern web
accessibility... or “How to FAIL at web accessibility”
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
WebAIM surveys of screen reader user preferences
There is no typical user
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.
Focusing on True Accessibility and Not Merely
Compliance
Knowing That Accessibility is a Continuum
Alt text should present CONTENT and FUNCTION
Very rarely a description
• alt=”bullet”
alt=”image of my cat”
Adding “image of...”, “graphic of...”, etc. to alt text
alt=”Photo of the White House”
alt=”Photo of the White House”
Is “Photo of...” necessary? It doesn’t really matter.
alt=”smiling lady”???
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 ”
alt=”smiling lady”
Images that are the only thing within a link MUST have alt text
Image buttons and hot spots too
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
Overly long alt text...
Using real text instead of images(when it makes sense to)...
Providing a long description for EVERY complex image(focus on CONTENT and FUNCTION)
Avoiding redundant alternative text
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
Putting anything other than a URL in longdesc...
The most accessible site on Earth...
•Home•Products•Support•Sales•Forum•Contact Us
Hey, I’m the content!!!
Can you have too much accessibility?
Accessibility preferences are for sissies
Accessibility implemented part way or incorrectly can be worse than no accessibility at all
Which provides better accessibility?
Don’t make disability relevant
... but understand that the experiences of those with disabilities will be different
Building one version of a web site that is fully accessible
Accesskey and Tabindex
(unless you're sure you know what you're doing)
Learn the power of tabindex=”0” and tabindex=”-1”
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
Visually hiding content
• display:none AND visibility:hidden hides from everyone
• Position off-screen left with CSS for screen readers
• Use judiciously
Skip to content
• One link is typically sufficient
• Are headings “a mechanism”?
• Think beyond screen reader access
• Use ARIA landmark roles
Removing the focus indicators from links
Navigate through CNN.com to see this in action
a {outline:0;}
Enhancing focus indicatorsa:focus, a:hover {outline:1px;background-color:#ff0;text-decoration:underline;}
Non-underlined links must become underlined on hover and focus
Bullet-proof web design...
HeadingsProperly structured, one <h1>, never empty
... and other semantic structure.
Title attribute
• Advisory information only
• Ignored by screen readers, except...
• form elements missing labels
• <frame title=”navigation”>
• <acronym>/<abbr>...usually.
Using title attribute properly...
Cognitive disabilities
(not much happening here)
Cognitive load vs Functionality
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
Questions?
Jared SmithWebAIM.org
twitter: @jared_w_smithAHG hashtag: #ahg09