Are you still doing that?!?!                         Common Accessibility Errors                                    Ted Dr...
Contrast                         Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAcces...
Red                                                                        Green                                          ...
Lady Gaga stuns the GrammysMonday, March 28, 2011Image from Getty Images
Lady Gaga stuns the                                 Lady Gaga performs “Born                          Grammys             ...
http://ts2.mm.bing.net/                     Lady Gaga stuns the                                   images/thumbnail.aspx?  ...
Lady Gaga stuns the                          Grammys                                           Lady Gaga stuns the        ...
Lady Gaga stuns the                          Grammys                         Yahoo! Accessibility Lab Accessibility.Yahoo....
Images Disabled                         Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/Yah...
<html dir=”rtl”>                                                     The mother of all scroll bars                        ...
Use Clip               .visually-hidden {                   position: absolute !important;                   clip:     rec...
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...
<bu$on>Sign	  In</bu$on>	                 <a>Cancel</a>	                           Yahoo! Accessibility Lab Accessibility....
Command +                                     Is not testing for text size flexibility                         Yahoo! Acces...
<label for=”p”>Search Yahoo! Foo</label>    <input id=”p” name=”p” type=”text”>                              Buckle it up ...
Visit our code library              Accessibility.Yahoo.Com/library/                         Yahoo! Accessibility Lab Acce...
Upcoming SlideShare
Loading in...5
×

Common Accessibility Mistakes

3,626

Published on

This presentation covers accessibility mistakes that are still commonly made. It was created for an internal Yahoo event for front-end engineers to share best practices.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,626
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
31
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Common Accessibility Mistakes

  1. 1. Are you still doing that?!?! Common Accessibility Errors Ted Drake Yahoo! Accessibility LabMonday, March 28, 2011
  2. 2. 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
  3. 3. 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.
  4. 4. Lady Gaga stuns the GrammysMonday, March 28, 2011Image from Getty Images
  5. 5. 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
  6. 6. 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
  7. 7. 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=””
  8. 8. 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
  9. 9. 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.
  10. 10. <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
  11. 11. 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.
  12. 12. Some rights reserved by Marcin Wichary on FlickrMonday, March 28, 2011Don’t forget keyboard accessibility
  13. 13. :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
  14. 14. <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
  15. 15. Command + Is not testing for text size flexibility Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibilityMonday, March 28, 2011In firefox and safari choose view->zoom text only, then use command +Also test by setting a larger text size in your browser preferences
  16. 16. <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 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 tonot work.
  17. 17. 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 find best practices for accessibility.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×