Common Accessibility Mistakes
•
6 j'aime•1,501 vues
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.
Recommandé
Recommandé
Contenu connexe
Plus de Ted Drake
Plus de Ted Drake (20)
Dernier
Dernier (20)
Common Accessibility Mistakes
- 1. Are you still doing that?!?! Common Accessibility Errors Ted Drake Yahoo! Accessibility Lab Monday, March 28, 2011
- 2. Contrast Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 Make sure web sites have enough contrast http://snook.ca/technical/colour_contrast/colour.html
- 3. Red Green click on the red button Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 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.
- 4. Lady Gaga stuns the Grammys Monday, March 28, 2011 Image from Getty Images
- 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/YahooAccessibility Monday, March 28, 2011 This is appropriate alt text
- 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/YahooAccessibility Monday, March 28, 2011 don’t forget to add the alt attribute to every image
- 7. Lady Gaga stuns the Grammys Lady Gaga stuns the Grammys Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 It doesn’t help to duplicate the headline in the image. Try placing them in the same link and use alt=””
- 8. Lady Gaga stuns the Grammys Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 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
- 9. Images Disabled Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 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.
- 10. <html dir=”rtl”> The mother of all scroll bars Off-screen Text Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 using position:absolute; left:-999em to create off-screen text generates huge scroll bars when switched to rtl text direction
- 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/YahooAccessibility Monday, March 28, 2011 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.
- 12. Some rights reserved by Marcin Wichary on Flickr Monday, March 28, 2011 Don’t forget keyboard accessibility
- 13. :hover, :focus, :active Monday, March 28, 2011 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
- 14. <bu$on>Sign In</bu$on> <a>Cancel</a> Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 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
- 15. Command + Is not testing for text size flexibility Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 In firefox and safari choose view->zoom text only, then use command + Also test by setting a larger text size in your browser preferences
- 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, 2011 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.
- 17. Visit our code library Accessibility.Yahoo.Com/library/ Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility Monday, March 28, 2011 Visit the Yahoo! Accessibility Lab’s code library to find best practices for accessibility.