EPUB 3 Accessibility Guidelines

When tables are not structured accessibly, the data they contain can quickly become a meaningless sea of numbers, facts and figures to someone moving through them a cell at a time. Readers who cannot see the table cannot use visual cheats like checking the alignment and scanning back to the top headings to orient themselves as they go. Equivalent information needs to be encoded into the table to facilitate comprehension.

Headers

One of the primary aids for table navigation is the proper use of headers. Correctly identified and linked headers provide metadata the reader can call up as needed as they navigate the data points.

The simplest kinds of tables contain a single header for each column or row, and are typically handled by assistive technologies (AT) without the need for extra information. The header cells need only be marked using the th element and the AT will be able to replay them when requested:

<table border="1">
   <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
   </tr>
  …
</table>

If a table's header spans more than one row, a thead element should be used to group all the header rows (see Example 1). When more than one header applies to a column, a headers attribute should be attached to each of its cells to clarify for an AT which headers apply. For example:

<table border="1">
   <thead>
      <tr>
         <th id="sales" rowspan="4">Sales</th>
      </tr>
      <tr>
         <th id="ub" rowspan="2">Ultrabooks</th>
         <th id="tab" rowspan="2">Tablets</th>
      </tr>
      <tr>
         <th id="ugross">Gross</th>
         <th id="unet">Net</th>
         <th id="tgross">Gross</th>
         <th id="tnet">Net</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td headers="ugross sales ub">$100,000</td>
         <td headers="unet sales ub">$12,500</td>
         <td headers="tgross sales tab">$45,000</td>
         <td headers="tnet sales tab">$5,250</td>
      </tr>
   </thead>
   …
</table>

The headers attribute identifies the cells that contain the header text by their id attribute value. The order in which the ids are included in the attribute determines how the headings are to be announced or rendered to the reader, so care must be taken to ensure logical playback results.

The ordering of the headers does not have to exactly match the markup if another ordering would make more sense. In the previous example. it will make more sense to the reader to announce "gross sales ultrabooks" than "sales ultrabooks gross".

More generally, whenever there is any ambiguity about which headings apply to a cell, a headers attribute should be attached (e.g., headers at the end of a row, mixed heading rows and columns, etc.). (See Example 3.) Note that HTML5 no longer allows the td element to be used for headings (i.e., a td element cannot be referenced from the headers attribute).

The scope attribute can also be used to clarify relationships between headers and cells. Whenever the headers are not in the first row or column of a table, this attribute should be attached to the th elements to clarify their directionality (to the row or column they belong to). headers attributes are not needed when the scope is clearly defined.

<table border="1">
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <th scope="row">Heading</th>
   </tr>
</table>

Captions and summaries

A caption should always be included to give context to a table. Never rely on the text surrounding explain the presence of a table, especially when the table is offset from the content.

For complex tables, including a summary of the structure for the reader before they enter the content can greatly assist comprehension, as well. HTML5 currently does not provide a mechanism to include this information in a programmatically deterministic way (i.e., so that someone can discover the information without hunting around manually for it).

Secondary content

If a table is not required to be read at the point of insertion (i.e., it is not part of the logical reading order), use a figure tag to enclose it.

Presentational layout

Tables should never be used to lay out documents. See the section on fixed layout positioning with CSS for more information on how to create these documents more accessibly.

Avoid using tables when all that the cells contain are lists of information (e.g., for placing information side-by-side, or where the first column in each row is a new unrelated header and the second a list of relevant to that topic). The extra table formatting is an unnecessary encumbrance to navigation.