• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Common Accessibility Mistakes
 

Common Accessibility Mistakes

on

  • 3,820 views

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.

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.

Statistics

Views

Total Views
3,820
Views on SlideShare
2,531
Embed Views
1,289

Actions

Likes
6
Downloads
30
Comments
0

5 Embeds 1,289

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Common Accessibility Mistakes Common Accessibility Mistakes Presentation Transcript

    • 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 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
    • <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.
    • 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.