Best Practices for Image Use

Best Practices - General

Best Practices - HTML

Common Image Use Errors

Error #1: Image element lacking appropriate alt text

In this example, the print icon is missing the necessary alt text and would be read as "image" by most assistive technology:

Error #1 Code:

<img src="images/print1.png" style="width: 40px; margin-left: 100px;">

Error #2: Image using color as sole means to convey meaning or content

In this example, the only feature distinguishing the different regions of New York is their hue:

Demo inaccessible New York map

Error #3: Image map lacking alt text within each area tag

In this example, the different menu items of the image map lack the necessary alt text to inform assistive technology of the link's purpose:

Error #4: Important information is contained in an image presented by CSS

In this example, part of the content is contained in an image that is presented by CSS alone:

The results are in, and the study space you voted as the "Best Location to Get Things Done on Campus" is...

Error #5: Providing a text alternative that is not null for images that should be ignored by assistive technology

In this example, an image included solely for design purposes has an alt tag that reads "image," rather than a null text alternative (alt=""):

image

Learn More About Summer Programs

Example 5 Code:
<img src="http://www.albany.edu/accessible-web/images/2015_Indian%20Pond_MG_7727.jpg" alt="image" style="width: 150px; float: left;">

Error #6: Not providing an accessible name for an image which is the only content in a link

In this example, part of the content is contained in an image that is presented by CSS alone:

Error #6 Code:
<a href="http://www.albany.edu/news/70016.php"> <img src="images/imageLink.jpg" style="width: 300px; margin-left: 110px"/> </a>