Guide to accessible content

Tables

Page contents

Tables make it easier to understand relationships between pieces of data. An accessible table will help ensure that screen reader users can also make sense of the data.

Overview video: Introduction to accessible tables and a screen reader demo

Table headers

Make sure the header cells for columns and/or rows are labelled correctly

  • Use the configuration options in your Content Management System (CMS) to format table headers.
  • Use the scope attribute on each table header, to let screen reader users know whether it applies to a column (col) or a row (row).
  • Don’t rely on using bold type and/or a larger font size; this isn’t sufficient for screen reader users.

For a table with column headers the resulting HTML should look something like this:

<table>
	<caption>Descriptive title of table</caption>
	<tr>
		<th scope="col">Title of column 1</th>
		<th scope="col">Title of column 2</th>
	</tr>
	<tr>
		<td>First data in column 1</td>
		<td>First data in column 2</td>
	</tr>
	<tr>
		<td>Second data in column 1</td>
		<td>Second data in column 2</td>
	</tr>
</table>

For a table with row headers the resulting HTML should look something like this:

<table>
	<caption>Descriptive title of table</caption>
	<tr>
		<th scope="row">Title of row 1</th>
		<td>First data in row 1</td>
		<td>Second data in row 1</td>
	</tr>
	<tr>
		<th scope="row">Title of row 2</th>
		<td>First data in row 2</td>
		<td>Second data in row 1</td>
	</tr>
</table>

The HTML for a table with both column headers and row headers should look something like this:

<table>
	<caption>Descriptive title of table</caption>
	<tr>
		<td></td>
		<th scope="col">Title of column 1</th>
		<th scope="col">Title of column 2</th>
	</tr>
	<tr>
		<th scope="row">Title of row 2</th>
		<td>Data in row 1, column 1</td>
		<td>Data in row 1, column 2</td>
	</tr>
	<tr>
		<th scope="row">Title of row 3</th>
		<td>Data in row 2, column 1</td>
		<td>Data in row 2, column 2</td>
	</tr>
</table>

The Web Accessibility Initiative (WAI) has examples of more complex tables.

By correctly labelling which cells are table headers and the direction of their scope, everybody will be able to interpret the table data.

Captions for tables

If your table is not preceded by a heading, use a caption to give your table a title

Screen readers will announce the caption before reading out the table contents, providing helpful context. All the preceding examples include a caption using the caption element.