Skip to Local Navigation
Skip to Content
California State University, Long Beach
Web Comm, California State University, Long Beach
Print this pageAdd this page to your favoritesSelect a font sizeSelect a small fontSelect a medium fontSelect a large font
 

Web Accessibility: Tables

§1194.22 (g) Row and column headers shall be identified for data tables.

Introduction to Accessible Tables

There are two ways in which tables are commonly used on web sites, tables used to present data and tables used for layout. These must be treated differently for accessibility purposes. In order for screen readers to make sense of a data table it must use th, or "header" attributes. These supply table navigation cues to the screen reader so the user can keep track of what cell of the table they are currently reading. Tables used for layout must not use table headers or any other superfluous attributes such as captions or summaries.

  • Identify row and column headers by placing them in first row and first column.
  • Use the table header element, th, for all heaser cells that do not contain data. Use td together with scope or headers attributes for cells containing data together with heading information. You must use the scope on only heading cell if the purpose of the col is ambiguous. For example, a th in the top-left corner could be either a row or column header, and the scope attribute is needed to resove the ambiguity.
  • Use ids on the header cells the header attribute on the data cells to explicitly associate header information with data cells. This is essential if the table is irregular, meaning there are data cells whose header information id not the same in the row and the same colunm as that cell.
  • Do not use any of accessible data table markup (th, scope, headers, or summary) on a table used for layout. In particular, avoid gratuitous announcements resulting from summary="This table used for layout".

Next Section: Simple Data Tables