Common Accessibility Mistakes

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

Contrast Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011Make sure web sites have enough contrasthttp://snook.ca/technical/colour_contrast/colour.html

Red Green click on the red button Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011Don’t use color as the only delimiter.Finance uses color + arrows.Yahoo! sites are pretty good at doing this correctlyred and green are the same color for those that are color blind.

Lady Gaga stuns the GrammysMonday, March 28, 2011Image from Getty Images

Lady Gaga stuns the Lady Gaga performs “Born Grammys This Way” while emerging from a large egg-shaped pod Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011This is appropriate alt text

http://ts2.mm.bing.net/ Lady Gaga stuns the images/thumbnail.aspx? Grammys q=590377916357&id=99b 50262230077d041a48c43 e717cf39 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011don’t forget to add the alt attribute to every image

Lady Gaga stuns the Grammys Lady Gaga stuns the Grammys Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011It 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 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011alt=”” is ignored by screen reader.Good for decorative imagesGood for images within a link that has descriptive textNot good for content images by themselvesrole=”presentation” will tell screenreaders to ignore the image

Images Disabled Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011add a background color to your background CSS when the link text is the same color as thecontainer background color.This can cause problems with transparent images using rounded corners.

<html dir=”rtl”> The mother of all scroll bars Off-screen Text Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011using position:absolute; left:-999em to create off-screen text generates huge scroll barswhen 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 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011This rule tells us to position the element absolutelythen only show the top left pixel.http://yaccessibilityblog.com/library/css-clip-hidden-content.htmlbackground images disapear in high contrast or MS optimization mode. Inline images can besafer.

Some rights reserved by Marcin Wichary on FlickrMonday, March 28, 2011Don’t forget keyboard accessibility

:hover, :focus, :activeMonday, March 28, 2011Don’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> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011Don’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 Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011In ﬁ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”>Monday, March 28, 2011implicit 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 tonot work.

Visit our code library Accessibility.Yahoo.Com/library/ Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011Visit the Yahoo! Accessibility Lab’s code library to ﬁnd best practices for accessibility.

http://yaccessibilityblog.com	1060
http://blog.communited.nl	226
http://translate.googleusercontent.com	1
http://www.yaccessibilityblog.com	1
http://webcache.googleusercontent.com	1

Common Accessibility Mistakes

by Ted Drake

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 1,289

Statistics

Common Accessibility Mistakes Presentation Transcript