WebDev - Web Developers

University of Memphis Photo
Web Accessibility / Usability Tips Related Topics

Web Accessibility / Usability Tips

Listed below are the most common accessibility / usability mistakes when creating Web pages. In addition to each item are accessibility tips that may help you when developing Web pages for ADA Compliancy.

  1. All IMG elements are required to contain either the alt or the longdesc attribute. Check that decorative images do not have alt text, images of words have alt text that includes the same words, and image links have alt text that identifies the link's destination. See W3C's H45: Using alt attributes on img elements and H50: Using longdesc
    HTML Code Examples:
    <img src="john-smith.jpg" width="50" height="80" alt="Photo of John Smith" />
    <img src="graph.jpg" width="526" height="353" alt="Graph of percentage of total U.S. non-insitutionalized population age 16-64 declaring one or more disabilities" longdesc="media/description.htm">
  2. Provide alternative content for EMBED elements. See W3C's H65: Using alt elements on embed elements.
    All EMBED elements should contain alternative content to serve as a fallback if the media or EMBED element itself is not supported by the browser. Provide alternative HTML-based content which duplicates or describes the function of the object for those users who are unable to access it in its original form. Alternative content can be provided with the alt attribute or with the NOEMBED element.
    HTML Code Example:
    <embed src="moviename.swf" width="100" height="80" pluginspage="http://example.com/shockwave/download/" alt="Still from Movie" />
    or
    <embed src="myspeech.au"></embed>
    <noembed><p>The transcript of my speech...</p></noembed>
  3. All FRAME and IFRAME elements are required to contain element content.
    See jimthathcer.com - Side by Side WCAG vs. 508.
    HTML Code Example:
    <iframe src="john-smith.htm" width="40%" height="80" title="link to John Smith page">
    <p>If you can see this text, your browser does not support iframes.
    <a href="john-smith.htm">View the content of this inline frame</a> within your browser.</p>

    </iframe>
  4. Use title attribute to describe the contents of an inline frame.
    See W3C's H643: Using the title attribute of the frame and iframe elements
    HTML Code Example: (see #3 above).
  5. Provide a link to download accessible plug-ins.
    HTML Code Example:
    <a href="LCMS-Tutorial.pdf">LCMS Tutorial</a> (<a href="http://www.adobe.com/products/acrobat/readstep2.html" title"Download the latest version of Adobe Reader."><img height="17" border="0" width="17" alt="Download the latest version of Adobe Reader" src="/shared/shared_rootsite/images/pdficon_small.gif" /></a>)
  6. Make sure users can skip repetitive links. See "Skip Navigation" Links article from WebAIM.
  7. Each form control should have associated text. To improve a web form's accessibility, make good use of the LABEL element. Labels associate form controls with their text descriptions.
    See WebAIM's Creating Accessible Forms.
    HTML Code Example:
    <input type="radio" name="radFriendship" value="Not_Applicable" id="b"/>
    <label for="b">Not_Applicable</label>
  8. The page must contain at least one H1 element and no more than two. Content should be very similar if not equivalent to the page title. See FAE's About FAE: Rules Summary
  9. Subheading elements that follow the last H1 should be properly nested.
  10. Identify headers for the table rows and columns in data tables.
    HTML Code Example:
    <table border="1" align="center" summary="Shelly's Daughters">
    <caption>Shelly's Daughters</caption>

    <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
    <th scope="col">Birthday</th>
    </tr>

    <tr>
    <th scope="row">Jackie</th>
    <td>5</td>
    <td>April 5</td>
    </tr>

    <tr>
    <th scope="row">Beth</th>
    <td>8</td>
    <td>January 14</td>
    </tr>

    </table>
Text Only | Print | Got a Question? Ask TOM | Contact Us | Memphis, TN 38152 | 901/678-2000 | Copyright 2014 University of Memphis | Important Notice | Last Updated: 
Information Technology Services | 100 Administration Bldg. | Phone: 901.678.8888 | Email: UMTech@memphis.edu
Last Updated: 3/23/14