10 Ways to Improve Your Site's Accessibility

ALT Text

When people consider web accessibility, ALT text is often the first thing that comes to mind.  Here are some tips to help you produce meaningful, effective alternative text for non-text elements:

  • Include an ALT attribute for every IMG or AREA element
  • ALT text should stand in for the image—use ALT text that conveys the meaning of your image
    • <img src="stone.png" alt="Commemorative Stone on the Iowa Campus, inscribed from the Class of 1870" />
  • For images that present complex data, such as charts, consider providing a full text alternative in the body of the page, or allow the user to link to a page containing the description
  • For images of text, such as wordmarks or buttons, use the image text as ALT text
    • <img src="UIWordmark.png" alt="The University of Iowa" />
    • <a href="home.html"><img src="home-button.png" alt="Go To Home Page" /></a>
    • <input type="image" src="submit.png" alt="Submit Search" />
  • For decorative images (images that provide no meaningful information or functionality), use empty ALT text
    • <img src="gradient.png" alt=" " />
  • If you still use spacer images, use empty ALT text with them (Better yet, use CSS)
    • <img src="spacer.gif" alt=" " />
  • Do not use file names or paths as ALT text
    • <img src="DSC2001.jpg" alt="DSC2001.jpg" />
  • Do not use ALT text to repeat descriptive or contextual text that is already adjacent to the image
  • Do not use "Link to…", "Image…", "Button…", "Logo…" or similar constructions in ALT text