Creating Accessible Tables

Tables are useful for displaying data and organizing information neatly. However, table headers have a semantic purpose: they should define the scope of a group of related cells. Using table headers solely for visual formatting should instead be treated as a label, not a true header.

The first decision to creating tables is to decide whether data points will be related to one another or not.

• If the data in the table is interdependent, defined headers are needed to group data
• If the data in the table is not related, defined headers are not needed

Layout Tables

Layout tables are for visual formatting. The content is formatted like a table to outline each paragraph in a specified structure, but there is no meaningful relationship in between the rows and columns.

Labels and fields appear like headings in a table but they are not defined. Content in a layout table are tagged independently as a list or paragraph.

An example would be a Bus Schedule in a table layout below:

Data Tables

Data tables have implied meaning that are structured semantically to tell assistive technologies about defined headers and columns. Each data point displays structured information where the relationships between rows and columns are meaningful.

If a header can describe multiple cells across its defined scope (row, column) then it is a true header, otherwise it is a label and is formatted as a layout table.

Ask yourself, If the headers are removed, do the data cells look ambiguous?

An example of organic vs non-organic produce in Canada (link)