Best Practices for Image Use

Click on a link to learn more about the WCAG 2.0 AA Standards for that topic.

 

General Best Practices

 

HTML Best Practices

 

Common Image Use Errors
View Error #1

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;">

View Error #2

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:

NY State Map
View Error #3

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:

UAlbany Science Library

Error #3 Code:

HTML

<img src="images/new_library.gif" border=0 usemap="#map1">
<map name="map1">
<AREA SHAPE="rect" COORDS="300,189,362,214" HREF="https://www.albany.edu/news/">
<AREA SHAPE="rect" COORDS="230,189,292,214" HREF="https://www.albany.edu/searches/index.html">
<AREA SHAPE="rect" COORDS="160,189,222,214" HREF="http://www.ualbanysports.com/">
<AREA SHAPE="rect" COORDS="90,189,152,214" HREF="https://www.albany.edu/">
</map>

 

View Error #4

Error #4: 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=""):

Indian Pond

Learn More About Summer Programs

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

View Error #5

Error #5: 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:

Image Link example

 

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