Preview modes: Lists

On this page:

• Why use list preview mode?
• How does list preview mode work?
• How do I use list preview mode?

Why use list preview mode?

List markups can affect the way assistive technology reads page content to a user. It is important that all list items are related, option elements in large lists are grouped and sub-lists are marked up properly. This preview mode makes it easier to evaluate characteristics of lists at a glance, to more easily determine their compliance with accessibility best practices.

How does list preview mode work?

This Preview Mode evaluates the page for lists and details all of the lists and their characteristics in the Access Assistant toolbar. When a list is selected for viewing, the list is highlighted on the page and its salient details, such as the list-style-type will be displayed with the highlighting box. Users may also select the "Highlight all lists" option to highlight all lists on the page. Note that when this option is selected, if you want to turn list highlighting off you must select a single element from the list in Access Assistant or exit the preview mode.

All of the following types of content are considered to be a list by this preview mode:

• All “<ul>” elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies.
• All “<ol>” elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies.
• All “<dl>” elements, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies.

How do I use list preview mode?

For every page being tested, evaluate the contents of the page with lists highlighted. 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 Lists link on the subsequent page.
5. To highlight all lists, select the Highlight All Lists button. Select an element from the list to view its details, including the list style type.

   

6. Evaluate the page and determine whether the list complies with accessibility best practices. 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, Lists.
   3. Select the appropriate Best Practice. Possible Best Practices include:

1. Ensure sub-lists are marked up properly
2. Ensure lists for indentation are not used
3. Ensure list items are found in a list container
4. Ensure utilizing tables to provide lists of information is avoided
5. Ensure implicit list markup is avoided

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.