Tables

A table is a great way to organize and present data. Visually, the grid format allows users to see results at a glance and it makes it easier to digest the information. Assistive technologies rely on certain structural elements of a table to accurately depict the content in the table and provide context to users.

Include a header

The first row of a table should state what information will be found in the column below. This header row allows screen readers to navigate the table easily. Check out this example of a simple table with a clearly defined header.

By default, Tablepress, the plugin used in our WordPress theme sets the first row of any table to be the header.

Use a simple structure

It’s important to keep the structure of a table relatively simple, otherwise, it will make it extremely difficult, if not impossible, for assistive technologies to relay the information. Take this table for example — while it has a clear header row, the lack of consistent structure across cells makes it difficult to comprehend the information, even for those not using assistive technologies.

Here are some tips for formatting your table:

• Don’t put multiple data points/content in one cell
• If possible, don’t leave cells blank. This could confuse someone using a screen reader as it could present itself as the end of the table.
• Leave cell info left-aligned as you would the start of a new paragraph

Separate data

For those using assistive technology, it’s critical that each data point has its own cell. If not, the content could be read out of order and confuse the user. It also makes for a better-looking table when content is separated out individually! Here is an example of a form that includes multiple lines of information in one cell using line breaks:

The form should look something like this instead:

• Each separate piece of data should have its own cell
• Don’t nest tables within tables. Always start a new table whenever the topic changes
• Never use line breaks (shift + return) in place of an additional table row

Add a description

It can be time-consuming for a screen reader to go through an entire table. By adding a short summary of the table’s contents to the description field, the screen reader user can decide if they want to read the table in its entirety based on the table description that is read first. You can choose if you want to display this description on your webpage along with the table or not.

Things to avoid

• Don’t embed an image/screenshot of a table in place of an actual table
• Never use tabs or spaces to create the look of a table
• Don’t leave cells blank — if there’s no content that exists simply put “none”
• Don’t merge cells

Check out more table accessibility tips and tricks.