Accessibility

Tables are appropriate for presenting data in two dimensions. To make the table accessible header cells must be marked up with th, and data cells with td elements.


General

  • Use the th element to define the header cells in the table.
  • Data cells in a table with two headers should be associated with their corresponding header cells. Column headers should include scope='col', and row headers should include scope='row'.
  • Tables with multi-level headers should use id and headers attributes to associate header and data cells.
  • Tables must have an accessible caption or name (e.g. via aria-label or aria-labelledby).
  • Table with group headers should be associated with their corresponding data cell groups, via scope='rowgroup' or scope='colgroup'.

EOS Accessibility checklist

We have developed an extensive checklist based on the Web Content Accessibility Guidelines (WCAG). Please have a look at the EOS Accessibility checklist.