Common Accessibility Mistakes

Are you still doing that?!?!Common Accessibility Errors

Ted DrakeYahoo! 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 correctlyred and green are the same color for those that are color blind.

Lady Gaga stuns the Grammys


Image from Getty Images

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

pod




This is appropriate alt text

http://ts2.mm.bing.net/images/thumbnail.aspx?

q=590377916357&id=99b50262230077d041a48c43

e717cf39




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

http://ts2.mm.bing.net/images/thumbnail.aspx?q=590377916357&id=99b50262230077d041a48c43e717cf39














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




alt=”” 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



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.

Off-screen TextYahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

The mother of all scroll bars

<html dir=”rtl”>


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 LibraryClip your hidden content for better accessibility


This 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 be safer.

http://yaccessibilityblog.com/library/css-clip-hidden-content.html

http://yaccessibilityblog.com/library/css-clip-hidden-content.html

Some rights reserved by Marcin Wichary on FlickrMonday, March 28, 2011

Don’t forget keyboard accessibility

http://creativecommons.org/licenses/by/2.0/

http://creativecommons.org/licenses/by/2.0/

http://www.flickr.com/photos/mwichary/

http://www.flickr.com/photos/mwichary/

: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 flexibility



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

Buckle it up

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

<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 fine.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 libraryAccessibility.Yahoo.Com/library/



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

http://yaccessibilityblog.com/library/

http://yaccessibilityblog.com/library/

Common Accessibility Mistakes

Technology

Transcript of Common Accessibility Mistakes