Magma/Metal Compatibility Study: Compatibility off Metals ...
Accessibility & Compatibility
-
Upload
jared-smith -
Category
Technology
-
view
1.882 -
download
2
description
Transcript of Accessibility & Compatibility
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