Help Center
Skip to main content
Mobile Menu
Learning Paths » Accessibility » Accessible Tables

Accessible Tables

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:
 
Date Opponent Location
October 28, 2016 Smithville Home game: Edlio Stadium
November 4, 2016 Merriltown Merriltown Stadium
November 11, 2016 East Central Home game: Edlio Stadium
 

1. 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

2. 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

Layout Tables

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