Creating Accessible Tables

Tables are a great way to show data, but it is easy to create them in a way that is confusing for the user.  A good rule of thumb is to keep the table simple - avoid spanning or merging cells whenever possible, as this can confused screen readers.

Tips for keeping tables accessible

Fill out every cell.

Never leave a cell blank without an indicating of why you did so.  It is recommended to use a descriptive label (eg. "No fee") if nothing applies to that cell, or at minimum, using "n/a" or "intentionally blank."

Ensure your table has headers.

Simply styling a row or column does not indicate to screen readers that it has headers. Properly defining headers provides context to the content, indicating what data is located in each column and/or row.

Keep the content clean.

Avoid copy and pasting spaces or tables to align text.

Keep the tables short.

Split them into multiple tables if they are very long or complex. Complex tables require extra code to be accessible, and, depending on the application you are using, it is not always easy to add it in.

Do not resize the tables

Applications typically resize the tables on their own, and resizing the tables can cause unintended results.

Do not add styles.

This includes borders, stripes, colors or headings (h2, h3, etc) within your table. Use pre-styled accessible templates instead.

Include a caption and summary.

Captions explain the table's purpose and contents to the user.  While a more detailed summary is not always required, it can be useful for tables that contain many kinds of data or multiple results.