Making data tables accessible

Only use tables for displaying data and not for layout purposes. Use CSS and other techniques for page presentation. Using tables for layout purposes can make navigation difficult for screen reader users. The following techniques should be considered for your tables:

  • When using tables for data use table headers (a <th> tag) for rows and columns, which helps explain the relationships of cells.
  • Use the Scope attribute to help determine the row and column relationships for cells within your table.
  • The Headers table attribute is very complex in its implementation and should be avoided. If this attribute is required you may want to reconsider the layout of your tables.
  • Use the caption tag in a table to define the title of the table.
  • Use the summary attribute of the table tag to provide a more in-depth description of the table. The summary will not be visible but assistive technologies will pick it up and present it to the user. This is not a part of the HTML 5 specification and its use should be used sparingly. If your table needs a summary then the table should be revised. Summary is only for data tables.

Resources