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:

Demo inaccessible New York 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:

 

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: 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...

HTML

<p id="bestLocation"> <strong>The results are in, and the study space you voted as the "Best Location to Get Things Done on Campus" is...</strong> </p>

 

CSS

p#bestLocation {
font-size: 1.2em;
color: black;
height: 200px;
width: 500px;
background: transparent url(images/massry.jpg) no-repeat top center;
}

View Error #5

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="https://www.albany.edu/accessible-web/images/2015_Indian%20Pond_MG_7727.jpg" alt="image" style="width: 150px; float: left;">

View Error #6

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="https://www.albany.edu/news/70016.php"> <img src="images/imageLink.jpg" style="width: 300px; margin-left: 110px"/> </a>