universal-design-center

  • tables banner

Web Accessibility Criteria: Tables

  Description

When including tables into a webpage, it is important to understand the type of table that should be used. There are two types of tables: data tables and layout tables.

Data Tables

Data tables are used to present data in a grid or tabular format. Data tables must be marked up using HTML table elements. All data tables must have proper rows and columns. Header cells should also be used to relate to the data cells. All data tables must have the following markup:

    • < Table>: Table
    • <Tr>: Table row
    • <Th>: Table header cell
    • <Td>: Table data cell

A data table with just one header row and/or header column is called a simple data table.

A data table with two or more header rows or header columns is called a complex data table. For complex data table to be accessible, additional markup is required:

    • In complex data tables when header cells span multiple rows, id attributes are the recommended method to associate the header to the proper data cell. 
      • All header attributes must contain an id attribute that associates the header cell with the data cell.
      • All ids must be unique.
    • The scope attribute is an alternative for complex data table markup. However, this is an older method and not commonly used today. This attribute identifies if a header cell belongs to a column, row, or multiple rows or columns.
      • Row: scope of a row
      • Col: scope of a column
      • Rowgroup: scope of a group of rows
      • Colgroup: scope of a group of columns 

Layout tables

Layout tables are used for organization and presentation purposes. They do not have headers or data cells. It is not recommended to use a layout table because they can result in unorganized reading order for individuals using assistive technologies. It is recommended to use a CSS based layout (i.e. Divs), which provide more control over the visual display without compromising the structure. If layout tables are used, the following actions must be considered:

    1. Layout tables must linearize properly. This means the reading order and logic of the content remain understandable when taken out of the table structure.
    2. Layout tables should not be used if the information in the table presents data
    3. Review the layout table and determine if a CSS based layout can be used instead of layout tables if the table is used to organize content.  It is not advisable to use a layout table because they can result in an unorganized reading order of content for individuals using assistive technologies. We recommend using a CSS based layout (i.e. Divs), which provide more control over the visual display without compromising the structure.
    back to top
    >

      Why are tables important?

    It is important that tables are properly marked up so that users who rely on assistive technologies, such as, users with visual impairments, can receive accurate information about the table. While sighted users can quickly associate the table cells with the corresponding headers, users with visual impairments will not be able to visually see the connection between the cells. Assistive technologies will provide users with all the information of the data cell within that column or row and will associate this information with the corresponding header. Ultimately, proper table markup will provide assistive technology users the information needed to fully understand the significance of the table. 

    back to top

Section 508/WCAG 2.0 Summary of Requirement

Tables should have appropriate HTML markup, <table>, <th>, <tr>, and <td>

Best Practices

The following best practices are important for accessible tables:  

  • All data tables should have appropriate HTML mark up
  • Avoid using layout tables for visual purposes.
  • If layout tables are used they must linearize
  • It is recommended to provide a descriptive caption for a data table that briefly explains the purpose of the table

Examples

Simple Data Table

The example below is a data table about animals. The table purposely displays the HTML table markups.

Geographic Location of Animals

<th>Sea Animals</th><th>Land Animals</th><th>Flying Animals</th>
<td>Whales</td> <td>Dogs</td> <td>Hummingbirds</td>
<td>Turtles</td> <td>Wolves</td> <td>Eagles</td>
<td>Sharks</td>        <td>Bears</td> <td>Bats</td>


Complex Data Table Example

This example conveys a complex data table with multiple header rows spanning data table columns. Visually seeing this table it may be easy to associate cells.

 

Boys and Girls in Elementary School Classes, by Teacher

ClassTeacher# of Boys# of Girls

10th Grade

Mr. Simpson 14 17
Mrs. Smith 13 15

11th Grade

Mrs. Brown 25 10
Mr. Watson 17 12

Layout Table Example

This example of a layout table shows that the order of the content is presented is not the order it is read. Visual users will see that the table reads "Push the button to activate." Correctly structuring the table will give assistive technology users the same benefit. If the table was not linearized properly the table would be announced as "Push activate the to button." This can confuse the user and they will not be able to understand what information the table is conveying. 

Push     Activate
The red button To  
  Button    

back to top

How to Test

Manual Testing

Data Table

    1. Review the source code and manually verify for proper markup for data cells.
    2. Look for the following attributes:
      • < Table>: Table
      • <Tr>: Table row
      • <Th>: Table header cell
      • <Td>: Table data cell
      • <Header> and id (complex data table only) and/or
      • <col> and <row> attribute (complex data table only)

Layout table

Visually inspect the layout table and identify if the table is better suited as a data table or if it can be developed using CSS based layout (Divs).

back to top

Automated Testing Tools

Web Developer Toolbar

Data Table: The toolbar allows users to view the table headers and data cell tags. Visually review that the headers and data cells are correctly associated. 

Layout Table: The tool bar allows users to linearize the webpage and determine if the layout table remains organized when linearized.

      1. Go to Miscellaneous tab and select linearize page
      2. Analyze the organization and logic of the layout table when it is linearized.

    WAVE Toolbar

    Data Table: Enable the WAVE toolbar, navigate to the Styles page. In the Details section navigate to Structural Elements section and view if there are any data tables or table captions in the page. 

    Compliance Sheriff

    To test for image maps in Compliance Sheriff, the following checkpoint groups are used: Section G for simple data tables and layout tables and Section H for complex data tables For more information regarding the checkpoints visit the CSU ATI Accessibility Requirements page.  

    back to top

    Assistive Technology Testing

    The accessibility of a layout and data table can be verified using assistive technology. Navigate the screen reader towards the beginning of the table. Verify if the assistive technology announce that, a table is present.

    • For a data table, use the table commands to navigate through the cells for a data table.
    • For a layout table, review the reading order and logic of the information when it is read by assistive technologies   
    back to top

    Resources