Skip to main content

Preview modes: Toggle CSS

  • Updated

On this page:

Why use toggle CSS preview mode?

Users are able to define their own custom style sheets that enforce styles to accommodate their disability. For instance, a small number of users with low vision may create their own style sheet so regardless of which web pages they visit, text appears in certain size and type of font with white characters on a black background. When web pages are developed to override user-defined style sheets, users with disabilities may not have access to some or all of the contents and functionality of the page. Testing pages to ensure they are still readable and usable without any CSS is an important part of the accessibility testing process. This preview mode makes this test easier to evaluate at a glance.

How does toggle CSS preview mode work?

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

How do I use toggle CSS preview mode?

For every page being tested, evaluate the contents of the page with CSS 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 "Toggle CSS" link on the subsequent page.

    Toggle CSS preview mode, shows the Toggle CSS button.

  5. To disable style sheets on the page, select the Toggle CSS button.
  6. Evaluate the page and determine whether the page is still usable with no CSS styles applied.  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, CSS.
    3. Select the "Ensure documents are readable without style sheets" 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.

Related articles