Skip To Main Content

Accessible Tables

Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.

Why is this important?

Tables without structural markup to differentiate and properly link between header and data cells, create accessibility barriers. Relying on visual cues alone is not sufficient to create an accessible table. With structural markup, headers and data cells can be programmatically determined by software, which means that:

  • People using screen readers can have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells, so the reader doesn’t lose context.
  • Some people use alternative ways to render the data, for example by using custom stylesheets to display header cells more prominently. Techniques like this enable them to change text size and colors and display the information as lists rather than grids. The table code needs to be properly structured to allow alternative renderings.

This page is based on a tutorial from the Web Accessibility Initiative (WAI): Tables Tutorial. Eric Eggert and Shadi Abou-Zahra, ed. Copyright © 2024 W3C® (MIT, ERCIM, Keio). Status: Updated 16 February 2023. https://www.w3.org/WAI/tutorials/tables/