Common Accessibility Mistakes

Are you still doing that?!?!
Common Accessibility Errors
Ted Drake
Yahoo! Accessibility Lab
Monday, March 28, 2011

Contrast

Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

Make sure web sites have enough contrast
http://snook.ca/technical/colour_contrast/colour.html

Red Green
click on the red button


Don’t use color as the only delimiter.
Finance uses color + arrows.
Yahoo! sites are pretty good at doing this correctly
red and green are the same color for those that are color blind.

Lady Gaga stuns the Grammys


Image from Getty Images

Lady Gaga stuns the Lady Gaga performs “Born
Grammys This Way” while emerging
from a large egg-shaped
pod


This is appropriate alt text

http://ts2.mm.bing.net/
Lady Gaga stuns the images/thumbnail.aspx?
Grammys q=590377916357&id=99b
50262230077d041a48c43
e717cf39


don’t forget to add the alt attribute to every image

Lady Gaga stuns the
Grammys Lady Gaga stuns the
Grammys


It doesn’t help to duplicate the headline in the image.
Try placing them in the same link and use alt=””

Lady Gaga stuns the
Grammys


alt=”” is ignored by screen reader.
Good for decorative images
Good for images within a link that has descriptive text
Not good for content images by themselves
role=”presentation” will tell screenreaders to ignore the image

Images Disabled


add a background color to your background CSS when the link text is the same color as the
container background color.
This can cause problems with transparent images using rounded corners.

<html dir=”rtl”>

The mother of all scroll bars

Off-screen Text

using position:absolute; left:-999em to create off-screen text generates huge scroll bars
when switched to rtl text direction

Use Clip
.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, 7 */
clip: rect(1px, 1px, 1px, 1px);
}

Yahoo! Accessibility Library
Clip your hidden content for better accessibility


This rule tells us to position the element absolutely
then only show the top left pixel.
http://yaccessibilityblog.com/library/css-clip-hidden-content.html
background images disapear in high contrast or MS optimization mode. Inline images can be
safer.

Some rights reserved by Marcin Wichary on Flickr

Don’t forget keyboard accessibility

:hover, :focus, :active


Don’t remove focus and active styles without providing an alternative.
onclick is the only event that is supported by keyboard as well as mouse users

<bu$on>Sign
In</bu$on>

<a>Cancel</a>


Don’t use a link for a button.
at least add role=”button”
you can style a button to look like a link for UED

Command +
Is not testing for text size ﬂexibility


In ﬁrefox and safari choose view->zoom text only, then use command +
Also test by setting a larger text size in your browser preferences

<label for=”p”>Search Yahoo! Foo</label>
<input id=”p” name=”p” type=”text”>

Buckle it up
<label for=”p”>Search the web</label>
<input id=”p” name=”p” type=”text”>


implicit binding of label and input does not work in IE6.
Buckle + Belt is ﬁne.
Make sure you don’t duplicate input id’s on the same page.
Test your forms with a screenreader. Using an image with alt within the label was found to
not work.

Visit our code library
Accessibility.Yahoo.Com/library/


Visit the Yahoo! Accessibility Lab’s code library to ﬁnd best practices for accessibility.

Common Accessibility Mistakes

Recommended

Recommended

More Related Content

More from Ted Drake

More from Ted Drake (20)

Recently uploaded

Recently uploaded (20)

Common Accessibility Mistakes