Data tables

The examples on this page show the required markup for accessible data tables. The key points are:

• The table must include column and/or row headers (<th>) to be a true data table. Some screen readers that encounter a table without headers will treat it as a ‘layout table’ and communicate it quite differently.
• Use the scope attribute to differentiate between column and row headers.
• Where there are both column and row headers, do not leave the first header cell empty as this can produce unexpected behaviour.
• Use the table <caption> to directly associate a data table with its heading.
• The grid structure of data tables must remain intact, no matter the available space. For tables with a lot of columns this may result in horizontal scrolling.
  • To control this behaviour, each table is wrapped in a div with the class .table-wrap.
  • <tabindex="0"> is added to the wrapper to make it focusable and make it scrollable for keyboard users. For the benefit of screen reader users, we give the wrapper the <group> role and use aria-labelledby to associate it with the table caption for labelling.
  • A JavaScript enhancement checks whether there is any overflow and - if there is none - updates the tabindex to remove focus.
  • The CSS applies an indicative shadow/fade to whichever side the overflow is occurring at, providing additional visual affordance that a table is scrollable.
  • The JavaScript enhancement also applies <position: sticky;> to column headers if there is no horizontal overflow, which is useful for tables with many rows of data.

Simple table (column headers only)

Table with column headers and row headers