Common Accessibility Mistakes

accessibility-205x85Even the best-intentioned web developers can make simple accessibility mistakes. This presentation was put together for an internal Yahoo! conference for front-end engineers. It reminds web developers that there are still some basic problems on the web, let's fix these today and avoid them in the future. The presentation was written by Thierry Koblentz and Ted Drake.

Slide Transcript

  1. Are you still doing that?!?!

    Common Accessibility Errors
    by Ted Drake, Yahoo! Accessibility Lab

  2. Contrast

    [The text on this slide is in a dark gray against a black background. It is very difficult to read]

    Make sure web sites have enough contrast
    Online contrast checker

  3. Click on the red button

    Red
    Green
    [the "red" and "green" text is in the same off-yellow color]

    Don’t use color as the only delimiter.
    Finance uses color + arrows.
    Yahoo! sites are pretty good at doing this correctly

  4. Lady Gaga stuns the Grammys

    [image of lady gaga emerging from an egg-shaped pod during the Grammys]

    Image from Getty

  5. Lady Gaga Stuns the Grammys

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

    This is appropriate alt text

  6. Lady Gaga stuns the Grammys

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

    Don’t forget to add the alt attribute to every image
    Images without alt attributes will cause screen readers to announce the image's file name.

  7. Lady Gaga stuns the Grammys

    [ Lady Gaga stuns the Grammys ]

    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

    [ empty box ]

    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 also tell screen readers to ignore the image

  9. Images Disabled

    [ image of sharing toolbar with images disabled. One of the buttons has no text ]

    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. The mother of all scroll bars

    [ screenshot of a page with very long scrollbar when text is set to read right to left ]

    Off-screen Text 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

    This rule tells us to position the element absolutely and then only show the top left pixel.
    background images disappear in high contrast or MS optimization mode. Inline images can be safer.

  12. Don’t forget keyboard accessibility

    [ photograph of cat sitting on a keyboard ]

    Photo: some rights reserved by Marcin Wichary on Flickr

  13. :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

  14. Use the correct tag


    <button>Sign iIn</button>
    <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

  15. Command + Is not testing for text size ?exibility

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

  16. Buckle it up


    <label for="”p”">Search the web</label>
    <input id="”p”" name="”p”">

    Implicit binding, wrapping the input within a label, 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 screen reader. Using an image with alt within the label was found to not work.

  17. Visit our code library

    Accessibility.Yahoo.Com/library/

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