Skip to main content

Digital Accessibility

Alt text on images

Image guidelines

Web A11y Checklist

Having alternative text (alt text) on images allows users with assistive technology to listen and access those images.

Appropriate use

Alternative text and long descriptions: Whenever a page presents images and other non-text content, it should present text alternatives. These text alternatives provide the same information presented by the image.

The most common form of a text alternative is alt text. Alt text is a brief label contained in the HTML code for the image.


<img src="../image.jpg" alt="Rutgers University Logo">

Long descriptions are lengthier amounts of text provided nearby the image, such as in the next paragraph. Long descriptions are helpful when a brief alt text is not enough to convey information, such as in a complex chart or graph.


<img src="../image.png" alt="Two Pie Charts of Migrant Workers, by Income level of Countries, 2017 and Distrubtion of Migrant workers, by broad subregion, 2017. Alt text provided below image">

<b> Long Description: </b>
<br> Migration workers, by income level of countries, 2017 The data presented in pie chart is given below:
<ol>
  <li>  Low income: 3.4% </li>
  <li>  Lower middle-income: 10.1% </li>
  <li>  Upper middle-income: 18.6%  <li>
    ...

Developers and content editors should avoid using the longdesc HTML attribute altogether. Confusingly, long descriptions never should be provided directly in the longdesc.

An alternative is to use the details tag to provide a collapsible long description.


 <details>
    <summary> Figure 1. Pie Chart of Migrant Workers Long Description </summary>
    <br> Migration workers, by income level of countries, 2017 The data presented in pie chart is given below:
<ol>
  <li>  Low income: 3.4% </li>
  <li>  Lower middle-income: 10.1% </li>
  <li>  Upper middle-income: 18.6%  <li>
    ...
 </details>

Decorative images

Images that do not provide any meaning should be marked as decorative. This tells the screen reader to skip this content.


<img src="image.jpg" alt="">

How to test for compliance

We recommend using the Image Alt Text Viewer plugin for Chrome. When activated, it will create an overlay on top of all of the images, with the alt text provided.

This will let you examine whether or not an image has an alt text and if it is usable.

Additionally, you can use WebAIM’s WAVE Browser extension. This is available for Chrome, Firefox, and Edge browsers. When you click on the plug-in, an overlay will appear with all of your issues. Alt text issues should appear in the “error” category and the “features” category.

Common mistakes

Text as images: You should avoid using an image of text. If there is text within an image, that text should be included in the alt text. For example, an image of the the Nike logo with the text “Just do it” underneath, should have “Just do it” included somewhere in the alt text.

Missing alt text on icons: Sometimes your Facebook, Youtube, or other social media icons are built into the template. Please make sure these have alt text in them. Running the above two checkers will verify this.

Using color in images to convey meaning: A common mistake we see are images that use color alone to convey meaning. This could include bar charts or other graphics. Consider the use of patterns in addition to the use of color.

Color contrast of text in images: If there is text on top of an image, please use WebAim’s Color Contrast Checker to manually check that the color of the text meets standards. In some cases, you may need to check multiple places on the image.

Please note, automated checkers will not pick up this issue. You will need to manually check these items. We recommend you avoid using text on top of images.

Other resources

WCAG standards