Preview modes: tables

On this page:

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

Why use table preview mode?

Tables provide no explicit context to users who are unable to see them without proper markup. Tables should be specified as data or layout tables, and data tables should be created with appropriate attributes and headings to allow assistive technology users to understand the information conveyed by the table. This preview mode allows testers to easily evaluate tables on a page for accessibility.

How does table preview mode work?

This preview mode allows testers to evaluate tables at two levels:

1. Table: When viewing the table, the entire table element and its children are displayed in a list for review in the Access Assistant window. Select a table in the list to view the table detail.
2. Table Detail: When viewing the table detail, the table headings and table cells in the table are listed in the Access Assistant window, and the table and its headings and cells are highlighted on the page being tested. Testers can view each individual heading and cell or all at once to evaluate them for accessibility.

The following elements are identified as tables by this preview mode:

• All table elements which seemingly form data-tables, without an aria-assigned role, not intentionally hidden in the DOM and available to assistive technologies.
• All elements with an aria-assigned “grid” role which seemingly form data-tables, not intentionally hidden in the DOM and available to assistive technologies.
• All elements with an aria-assigned “table” role which seemingly form data-tables, not intentionally hidden in the DOM and available to assistive technologies.

Users can view each table individually or highlight all tables on the page using the Highlight All Tables button. When viewing an individual table's details all elements in the table will be highlighted by default. Users can select an individual table cell or heading to highlight only that element.

How do I use table preview mode?

For every page being tested, evaluate the contents of the page with tables highlighted. Testers should verify that tables are properly identified as data or layout depending on the purpose of the table and correctly marked up with with table elements, like table, tr, td, th, and the scope attribute. 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 "Tables" link on the subsequent page.
5. To highlight all tables, select the Highlight All Tables button or view each table individually by selecting each table in the list in Access Assistant.

   

   Any tables that are highlighted but are actually layout tables are not correctly marked up, and an instance should be added for these (see below).
6. Selecting a table opens its detail view. Evaluate the table highlighted on the page and the table heading and table data cells to determine whether they are correctly formatted. 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, Data Tables.
   3. Select the appropriate Best Practice from the following list:

• Ensure data tables are formatted using table elements
• Ensure table data/headers in separate columns is rendered in separate table cells
• Avoid using nested data tables

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.