Preview Modes: Background Images

  • Updated

Why Use this Preview Mode?

Background images are generally ignored by screen readers, and may not be visible to other assistive technology users. It is important to evaluate pages without background images to determine whether meaning is lost from the page when background images are not visible. For cases where background images are conveying information, it is important to ensure that there is a non-textual equivalent for the image. Using this preview mode allows the tester to hide all background images and evaluate the page to to ensure meaning is not lost when background images are not visible.

How does the Preview Mode work?

This Preview Mode allows the tester to disable and enable all background images on any page. When selecting the Toggle Background Images button, all styles will be disabled on the page, and when reselecting the button the styles will be re-enabled. 

How do I use this Preview Mode?

For every page being tested, evaluate the contents of the page with background images completely disabled. 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 "Background Images" link on the subsequent page.
  5. To disable background images on the page, select the Toggle Background Images

    Toggle Background Images Page

  6. Evaluate the page and determine whether the page maintains its meaning without background images. If not, close the Preview Modes window and add an instance:
    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 CSS background images that convey meaning have textual and visible equivalents" 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.


Was this article helpful?

0 out of 0 found this helpful