Skip to main content

Accessible Tables

Updated over 12 months ago

Tables on websites are used for one of two reasons: to display data or for layout.

Data Tables

Tables that display data rely on people making visual associations between columns, rows and the data itself. Unfortunately, these relationships can be hard to convey through audio only.

There are two main things you can do to help people using screen readers to understand your table better:

  • Identify column titles and row titles as headers.

  • Properly associate data cells in the table with the headers

For demonstration purposes, here's a table displaying data about some upcoming games:

accesible table example

Properly identify and associate column headers

The columns in this table are labeled Date, Opponent and Location.

To set these properly, you'll need to set the cell properties for each one. You may do this one at a time or select all three at once.

Go to Table --> Cell --> Cell Properties:

  • Set Cell type to Header cell to identify this cell as a header

  • Set Scope to Column to associate this cell as the header of a column

table cell option

cell properties menu

Properly identify and associate row headers

The rows in this table are labeled October 28, 2016, November 4, 2016 and November 11, 2016.

To set these properly, you'll need to set the cell properties for each one. You may do this one at a time or select all three at once.

Go to Table --> Cell --> Cell Properties:

  • Set Cell type to Header cell to identify this cell as a header

  • Set Scope to Row to associate this cell as the header of a row

cell properties menu with scope highlighted

Layout Tables

If a table is used for layout purposes only then do not mark any cells as header columns or header rows.

Did this answer your question?