Skip to main content Skip to navigation
Web Communication Accessibility

Tables

When tables are used to show data, the header cells that relate to the data cells need to be programatically linked. This makes table navigation for screen readers less painful.

Simple tables can have two levels of headers. Each header cell should have scope='col' or scope='row'.

Complex tables are tables with more than two levels of headers. Each header should be given a unique id and each data cell should have a headers attribute with each related header cells id listed.

If a table has text associated with it, ensure the text is programatically linked to the table. This is ususally with a <caption> element. This element should be the first element under the <table> element. While a caption is not required, it can be very helpful to screen reader users navigating the page. A captionelement is strongly encouraged on data tables as it gives context to the data.

Testing

  1. Identify ‘data’ tables (layout tables are exempt).
  2. View the table source code.
  3. Identify the table headers.
    • Check for scope on simple tables.
    • Check for id and headers on complex tables.

Examples

PASSES

Simple Table

User’s Height and Weight
Name Height Age
Walter 6’4 34
Steve 5’4 30
<table>
  <caption>User's Height and Weight</caption>
  <tr>
    <th scope='col'>
      Name
    </th>
    <th scope='col'>
      Height
    </th>
    <th scope='col'>
      Age
    </th>
  </tr>
  <tr>
    <th scope='row'>
      Walter
    </th>
    <td>6'4</td>
    <td>34</td>
  </tr>
  <tr>
    <th scope='row'>
      Steve
    </th>
    <td>5'4</td>
    <td>30</td>
  </tr>
</table>

Looking at this table, the column headers all relate to the cells below. This is done programatically with scope='col'. Each height and age value is related to the person and this is done programatically with scope="row".

Complex table

User’s Height and Weight
Name Height Age
Feet Inches
Walter 6 4 34
Steve 5 4 30
<table>
  <caption>User's Height and Weight</caption>
  <tr>
    <th rowspan='2' id='name'>
      Name
    </th>
    <th colspan='2' id='height'>
      Height
    </th>
    <th rowspan='2' id='age'>
      Age
    </th>
  </tr>
  <tr>
    <th id='feet' headers='height'>
      Feet
    </th>
    <th id='inches' headers='height'>
      Inches
    </th>
  <tr>
    <th headers='name' id='walter'>
      Walter
    </th>
    <td headers='height feet walter'>6</td>
    <td headers='height inches walter'>4</td>
    <td headers='age walter'>34</td>
  </tr>
  <tr>
    <th headers='name' id='steve'>
      Steve
    </th>
    <td headers='height feet steve'>5</td>
    <td headers='height inches steve'>4</td>
    <td headers='age steve'>30</td>
  </tr>
</table>

This is an example of a complex table, all the cells are associated to their respective headers with the headers attribute. Most tables don’t require this level of complexity.

The original text for this document was created by the 18F and made available in the public domain under the CC0 1.0 Universal license.

Washington State University has made modifications to the original document. These changes are also licensed as CC0 1.0. Please feel free to reuse this content.