home rss

Careful Web

Quick Rules of Accessible Web. Text and text alternatives.

  1. Provide alternative text in images with the alt attribute of the img tag.

  2. Create corresponding label elements for each form input field, or add the title attribute if you can’t provide a label.

    Example #1: <p><label for="first_name">First name</label><input id="first_name" name="firstname" type="text"></p>

    Example #2: <input type="password" name="passwd" title="Enter your password">

  3. CAPTCHAs must have an audio version. Like reCAPTCHA, for example.

  4. Write links carefully. Be informative when you point a user by using relevant link text. Avoid javascript: or other placeholders for the href attribute when you are using JavaScript action on link elements. Links must always point to the content they are referring to.

  5. Avoid elements without content. For example, spacer images or table-based layouts. All uninformative pictures must be used as backgrounds (with CSS).

  6. Otherwise don’t include content images as backgrounds. Use img as specified in #1.

  7. Use text and media alternatives for object embedding elements. You can include as many alternatives as you like, encapsulating them within each other. Here is an example of including a Quicktime movie:

    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="256" data="http://movies.apple.com/movies/independent/blessedisthematch/blessedisthematch_480p.mov">
    <param name="src" value="http://movies.apple.com/movies/independent/blessedisthematch/blessedisthematch_480p.mov">
    <img src="http://images.apple.com/moviesxml/s/independent/posters/blessedisthematch_l200812221525.jpg" alt="Blessed Is the Match movie">
    </object>