How to test
Images

1 Types of images

There are many types of images. The type of image can be determined by the context of the page being tested. These different types of images have different testing steps.

• Informative Images: These are visuals like pictures, photos, and illustrations that convey important information or concepts. To make them accessible, we need to include a brief description in text form that captures the key content of the image.

• Decorative Images: Sometimes, images are used purely for aesthetic purposes and don’t convey meaningful information. In such cases, it’s best to provide an empty text alternative (alt=””) to indicate that the image serves a decorative role and doesn’t require a description.

• Functional Images: Images that serve as links or buttons should have text alternatives that describe their function rather than just their appearance. For example, if you have an image of a printer icon that initiates a printing action, the alt text should convey this functionality, like “Print.”

• Images of Text: Images of text should be avoided whenever possible. In fact, some images of text can violate WCAG 1.4.5 Images of Text. However, if you must use images with text, ensure that the alt text contains the exact same words as the text within the image to maintain consistency.

• Complex Images such as Graphs and Diagrams: When using images to present complex data or detailed information, it’s crucial to provide a comprehensive text description that conveys all the data and details found in the image. This allows individuals who cannot see the image to still access and understand its content.

2 How to test

Automated Testing

Automated scanning tools, such as WAVE, Lighthouse, or Deque’s Axe DevTools are a great starting point for image testing. All of these tools can run page scans that quickly generate reports identifying some image issues. Scans are:

• Good at identifying simple issues like missing alt attributes on images or empty alt attributes on functional images.
• Bad at identifying issues related to alternative text quality or whether or not an image should be marked as decorative and hidden from screen readers.

Manual testing

Automated scanning must be complemented with a manual review of the page. Manual image testing can test for alt text quality, ensuring that decorative images are hidden from assistive technology, all text found in images of text are present in alt text, and that functional images have the appropriate alt text.

Getting started

• Open Chrome DevTools in your browser window (F12)
• Right-click and select “Inspect” on the image in the page you want to test.

3 Informative Images

• Check that the image owns an alt attribute.
• Ensure that the alt attribute is present is not empty.
• Ensure that the alt attribute is present is not empty, such as alt or alt=""
• The alt attribute value / description of the image should be accurate and succinct. The image alternative should not consist of information that duplicates nearby text content.

IMG

<img alt="A rear view of the iPhone 15 Pro in silver, along with a front view of the iPhone 15 Pro Max in silver." src="../iphone.png" ... >

SVG

Some images are implemented using inline SVG. Text alernatives for these images can be defined by use of role="img" and aria-label="I am the alt text". The alt attribute should not be on an element whose role is role="img" this is instead handled by aria-label.

<svg role="img" aria-label="I am the alt text">...</svg>

3 Decorative Images

• Ensure that the alt attribute is present and owns an empty or null value. alt="".
• Note: aria-hidden="true" is not needed if an image has an empty or null alt attribute value alt="".

<img alt="" src="../some-image.png" ...>

3 Functional Images

• Ensure the alt attribute is present and owns a value that includes all of the text found in the image.
• Functional images are typically links or buttons so the alt text should define the purpose of the link instead of describing the image.

• Note: Functional images can have empty or null alt attribute values alt="" if the text alternative is conveyed in the parent control’s label. For example, aria-label="Download on the Apple App Store".

<button aria-label="Download on the Apple App Store">
    <img src="apple.png" alt="">
</button>

4 Images of Text

• Sometimes text can’t be easily created with HTML and CSS and an image must contain text. In this case, ensure the alt attribute is present and owns a value that includes all of the text found in the image.
• Typically, the text is the most important part of the image. There is no need for the image itself to be described unless it adds value to the content of the page.
• Consider logging a defect for WCAG 1.4.5 Images of Text if it seems like there might be a viable workaround to add real text to the page vs. an image of text.

<img src="apple-iphone-15-pro.png" alt="Titanium Apple iPhone 15 Pro">

5 Complex Images

• Data visualizations, charts, and graphs can be very difficult to author alternative text for. Some features like charts and graphs may not be accessible themselves but there can be text alternatives nearby that can act as an accessible alternative.
• For complex images that are img elements, ensure that the image has an alt attribute and that its value communicates the general purpose of the image. This alt text does not need to contain all of the visual information as that may be too long for an appropriate alt text value. If the alt text does not describe all content in the image ensure there is content nearby, or linked to, that does contain all of the visual information in text form.
• For charts and graphs, these features are typically not 100% accessible. Ensure there is content nearby, or linked to, that does contain all of the visual information in text form. For example, an accessible Excel download or HTML Table presenting the key visual information from the content found in the chart.
• Note: It is important that all text alternatives to complex images must be in an accessible format to qualify as an accessible alternative.

  <img
    src="/assets/images/examples/how-to-test-images-complex-data.png"
    alt="Complex chart with nearby HTML table for text alternative">

    <table>
      <caption>NASDAQ: TMUS</caption>
      <tr>
        <th>Date</th>
        <th>Price</th>
        <!-- ... -->
      </tr>
      <tr>
        <td>January 10</td>
        <td>122.20</td>
        <!-- ... -->
      </tr>
    </table>

6 What to test for

✓ Ensure meaningful images have alt text

Note: The passing example has alt text that matches the text found in the image. The failing example uses the filename for the alt attribute value. Screen readers will announce the filename 234@@4-JWKK##KK4442221-11-phone-apple-prod.png which will create a confusing experience.

Pass	Fail

✓ Ensure decorative images are hidden from assistive technology

Note: Passing example image has an empty alt attribute value. The failing example has a very long redundant description of the image. Not only is it too verbose, it has the same text as the nearby text content.

Pass	Fail
Home Internet	Home Internet

✓ Ensure complex images have a text alternative

Note: The passing chart has a general text alternative describing what the image is but also references nearby text data for reference. alt="Fruit chart, data below". The failing example owns an empty alt attribute value which hides the image from screen reader users and does not provide an alternative.

Pass	Fail
Watermelons 20% Grapes 10% Oranges 24% Apples 30% Bananas 16%

Related WCAG

• 1.1.1 Non-text Content
• 1.4.5 Images of Text
• 2.4.4 Link Purpose
• 2.5.3 Label in Name
• 4.1.2 Name, Role, Value

Resources

• W3C Images Tutorial
• WebAIM Alternative Text