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