Preview modes: Images

On this page:

• Why use the image preview mode?
• How does the image preview mode work?
• How do I use the image preview mode?

Why use the image preview mode?

Screen reader users and other assistive technology users cannot determine the meaning of an image without the specification of an accessible name. To make image content readable by an assistive technology, it is important to ensure not only that the accessible name exists, but that it is meaningful to the user. This preview mode allows testers to evaluate images on the page and determine whether they are correctly marked up for accessibility.

Images that have a null value (i.e., empty quotes) specified for their accessible name are ignored by screen readers. Therefore, any images that do not convey meaning should be null value if the image does not convey a meaning (so the image can be ignored). Testing pages to ensure images are given appropriate accessible name values is an important part of the accessibility process. This preview mode makes it easier for the tester to evaluate images for accessibility at a glance.

How does the image preview mode work?

This preview mode identifies and lists all elements of the following types:

• All “<img>” elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies with an accessible name value.
• All elements with an aria-assigned “<img>” role, not intentionally hidden in the DOM and available to assistive technologies with an accessible name value.
• All input type=”image” elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies with an accessible name value.
• All “<svg>” elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies with an accessible name value.

Testers can select a single image in the list in Access Assistant to view the image details and highlight the image on the page being tested. Testers also have the option to highlight all images by selecting the Highlight All Images button. To remove highlighting from all images, select a single image to highlight only that image or exit the preview mode.

How do I use the image preview mode?

For every page being tested, evaluate all images on the page for a useful accessible name. This can be done with this Preview Mode as follows:

1. Launch Access Assistant from the site that is being tested and navigate to a page.
2. In Access Assistant, navigate to the project and report where violation instances will be reported and find the module for the page being tested OR create the module if the page has not yet been tested at all.
3. In Access Assistant, select the Preview Modes button in the toolbar header bar.
4. Select the "Images" link on the subsequent page.
5. To highlight all images, select the Highlight All Images button, or select an individual image to view it and its details. For all images being viewed, the alternative text will be displayed.

   

6. Evaluate the images on the page and determine whether the corresponding accessible name value is sufficient to convey its meaning to the reader. Images that are decorative only should have a null alt attribute specified. Add an instance for any images that are in violation of accessibility best practices:
   1. Select the Manual Test button in the module toolbar.
   2. Filter the Best Practices to those of Media Type, Images.
   3. Select the "Ensure images provide informative alternative text" Best Practice.
   4. On the subsequent screen, select the Add Instance button and complete the form to create a violation instance for the page or elements on the page that are in violation.