accessibility & compatibility
DESCRIPTION
Slides from 2010 Accessibility Summit. Assistive technologies can make disabilities mostly irrelevant on the web, so long as web pages are designed and developed to be compatible with those technologies. So, let's stop disabling our audience and focus on making our Web sites truly accessible.TRANSCRIPT
Jared Smith@jared_w_smith
webaim.org
Accessibility & Compatibility
compatibility with ...?
people!!!
3/49
user
technology
content & experience4/49
technology bridges the gap between people and content & experience
5/49
assistive technology
6/49
not compatible7/49
not fully compatible8/49
30% of blind users’ online time is wasted
on access issues
9/49
you can’t detect assistive technology
reliably
10/49
you can’t trust assistive technology
it kinda sucks and is constantly changing11/49
focus on standardsthen patch the cracks
12/49
compliance != accessibility
use guidelines as tools to achieve accessibility13/49
your site can be fully compliant, yet totally inaccessible
14/49
your site can be fully compliant and
technically accessible, yet functionally inaccessible
15/49
so, what do we do?
16/49
aria
accessible rich internet applications
17/49
aria paves the cow paths
18/49
19/49
20/49
21/49
22/49
23/49
today’s focus is oncompatibility beyond standards
24/49
... or the complexities of basic accessibility
alternative text for images should present
CONTENT and FUNCTION
very rarely a description
25/49
alt=”smiling lady”???
alt=”we are friendly and personable”??? 26/49
“I don’t want to miss out on any content”vs.
“I’m listening to the page at 300 words per minute in a robotic computer voice - I don’t care about
the mood and feel of the page.”
focus on succinct content and functionality 27/49
images that are the only thing within a link MUST have alt text
image buttons and hot spots too 28/49
<a href=”http://apple.com/iphone”><img src=”iphone.jpg” alt=””><br>
Apple iPhone</a>
avoid redundant text and functionality
alternative text doesn’t have to be in the alt attribute 29/49
form labels
<label for=”firstname”>First Name:</label><input type=”text” id=”firstname”
name=”firstname” />
First Name:
text boxes, text areas, select menus, checkboxes, and radio buttons.
30/49
form labels
<label> is limited to one form control
use aria-labelledby formultiple labels per control
ormultiple controls per label
31/49
form labels
If a visible text label is not available, ensure the form control is visually intuitive without it.
If so, provide the description in the title attribute<input title=”search terms”>
Search
... or an off-screen label 32/49
"eldsets and legends
Use for all groups of radio buttons and checkboxes when a higher level legend is needed... and that’s all.
Overnight
Shipping method
Two dayGround
33/49
use buttons to submit forms, not links
and ensure that buttons and links initiate a context change (use focus() if necessary)
34/49
avoid accesskey and tabindex
...unless you're sure you know what you're doing.
learn the power of tabindex=”0” and tabindex=”-1” 35/49
visually hiding content•display:none and visibility:hidden hide from everyone... and that’s a good thing.
•position off-screen le with CSS for screen readers
•use judiciously
36/49
visually hiding content
.hidden { position:absolute; left:-10000px; top:auto;}
37/49
hover is dead
the title attribute and onmouseover is (mostly) incompatible with touch-screen devices, keyboard,
voice control, and screen readers
38/49
title attribute
• advisory information only• ignored by screen readers, except...
• form elements missing labels
• <frame title=”navigation”>
• <acronym>/<abbr> ...usually.
39/49
“skip to main content” links?
Yes! Until browsers provide better keyboard navigation for sighted users
40/49
you can position them off-screen if you must,but make them clearly visible on :focus
one “skip” link is typically sufficient
“skip to main content” links?
41/49
a#skip { position:absolute; left:-10000px; top:auto;}a#skip:focus{ position:static;}
NOT display:none
42/49
don’t remove focus indicators from links
a { outline:0;}
43/49
enhance focus indicators
a:focus, a:hover { outline:1px; background-color:#ff0; text-decoration:underline;}
non-underlined links should become underlined on hover and focus
44/49
when an element that has focus or is being read is modi#ed or destroyed
avoid screen reader “freakout” mode
45/49
use javascript focus() to manage focus, if necessary
avoid screen reader “freakout” mode
46/49
odds and ends
•Provide accurate, descriptive, succinct page titles.
•Don’t stress over screen reader pronunciation and quirks.
•Ensure full keyboard accessibility.
•Support zoom/text sizes to (at least) 2X.
•Layout tables don’t (typically) affect accessibility. Don’t use <th>, <caption>, or summary on layout tables.
47/49
wave.webaim.org
48/49
questions?
webaim.org@jared_w_smith