Table Lacks Appropriate Row and Column Headers and/or Proper Table Structure

Short Description

Tables are difficult to read because columns and rows do not have appropriate labels and/or structure

Long Description

  • A table is a predominantly visual way of organizing data and information.
  • A screen reader presents tabular information in a linear manner. A user then takes that information and organizes it in a way that makes sense.
  • It is also important to have a properly defined table, because it makes it possible for a screen reader user to use table navigation. Table navigation means a user can move in any direction, versus having to move through every piece of information.
  • Proper semantic mark up of tables makes it easier for a user to make sense of the organization and meaning of information.
  • If a column has the proper header markup, a screen reader will read the cells below it as something like “215, room number.” Without the proper header markup, it would simply say, “215.” It is easier to navigate a table that tells the user the name of the header, instead of requiring a user to either remember the whole layout or go back to the top of the column to remember.
  • Sometimes it is also appropriate to label a row. When both the row and column have proper header markup, it might read something like, “Andrea, Tuesday, 6-8.” If the user knows this is a work schedule, the header markup makes each cell easier to understand.
  • In some cases, it might make sense to provide an alternative text explanation of trends or layout.

Example of Issue

Screen reader user navigating an accessible table and a table with header and table format problems.

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader

Impacted Type of Device

Computer
Mobile

Recommendations

  • If the purpose of a table is layout, then it should not have headers. If the purpose of a table is purely layout, consider using CSS to get the same effect, because a screen reader will still read the content as a table.
  • Use the th element and scope attribute to label headers.
  • Use header and id for very complex tables. However, if a table is so complex as to make this necessary, it will probably wind up being functionally difficult or impossible to read and understand. Consider breaking the data down into less complex tables.
  • The caption element helps a user know the content of a table.
  • There is varying support for the summary element. If a table is complicated enough to make a summary necessary, consider finding ways to simplify the table.
  • An article When to Use Tables and How to Make Them Accessible to Screen Reader Users is available on the Accessibility and Usability site.
  • For more information on using tables in the overall content structure, navigation, and understanding, read Basic Structure on the Accessibility and Usability site.