How to test for WCAG 1.1.1 Text Alternatives

Test Steps

Not Applicable if no images.

For every graphic:

1. Determine if the graphic needs a text alternative. Criteria for needing an alternative text:
   • The graphic is not described in text elsewhere on the page.
   • The graphic is not for pure decoration (think borders, dividers, the graphic is used for background patterns).
   • The graphic is the only content of an interactive element.
   • The graphic is not the only content of an interactive element but without a description of the graphic, the interactive element is not clearly labeled.
   • The graphic is used to illustrate the content.
2. If an image needs a text alternative:
   • <img> elements:
     • Each must have an alt attribute.
     • The alt attribute describes all important information in the image in text.
   • <svg> elements:
     • Each must have a role attribute set to the value img (role="img").
     • Each must have an aria-label or aria-labelledby attribute where:
       • aria-label describes all important information in the image in text.
       • aria-labelledby contains one or multiple comma separated IDs that combined contain the important information seen in the image in text.
3. If an image is pure decoration
   • <img> elements:
     • Each must have an alt attribute.
     • The alt attribute must be empty (alt="").
   • <svg> elements:
     • Each must have the aria-hidden attribute set to the value true (aria-hidden="true").

Polypane

1. Load sample URL.
2. In the Sidebar, select the Info tab and then the Outline tab.
3. Choose Images outline.
4. Check Show Issues
   • If the alt attribute is missing (), it’s a fail.
   • If the alternative text does not match what can be seen on the image, it’s a fail.