Creating Accessible HTML Tables

What makes a table accessible?

Tables are an excellent way to present data — but only if they are built with accessibility in mind. Accessible tables have three key features: alt text/caption, designated headers, and simple structure.

Example: 5K contestants

Alt text for tables

When someone using a screen reader reaches a table, the software announces:

• the table’s alternative text (often the same as the table title, such as “5K contestants”), and
• the table’s size (e.g., “three columns, four rows”).

This information helps the user decide whether they want to read the full data set. Alt text becomes even more important if a page contains multiple tables — it helps distinguish one from another.

Note: Currently the TinyMCE html editor in T4 does not allow for creating alt text on their tables. Instead, ensure the table has a caption that describes the purpose of the table and its data.  For other programs such as Microsoft word, Adobe Acrobat, Powerpoint, etc., check the documentation on whether or not the ability to create alt text for tables is possible.

Designated headers

A screen reader user can hear a table’s contents in one of two ways:  

1. Regular mode: Reads left-to-right across each row, from top to bottom.
2. Navigation mode: which allows users to move cell-by-cell while hearing the column or row header announced with each value.

Without designated headers, navigation mode doesn’t work. In the example table, Name, Age, and Hometown serve as column headers. In the example table, Name, Age and Hometown serve as column headers. Headers can be included in T4

Simple structure

Keep table design straightforward:

• Use only one header row (and/or one header column).
• Avoid merging cells or nesting tables.
• If data is complex, split it into multiple smaller tables.

This nested table is not accessible: 

5K Contestants

A more accessible option would be to create two tables:

Teen 5K contestants

Adult 5K contestants

Why keep tables simple?

A clean structure benefits everyone — screen reader users in navigation mode and neurodiverse users (people who think and process information differently, such as those with ADHD, autism, or dyslexia).

When are tables not an appropriate choice?

• Never use an image of a table to present data. A screen reader treats it like an image, not structured information.
• Don’t use tables for layout. They disrupt the reading order of a page, which screen readers depend on to present content sequentially.

More info

• The T4 platform has an easy way to create tables. Follow these instructions to ensure you create them with accessibility in mind.
• Read about common accessibility barriers many web users face. It's likely you know someone who falls into one of these categories that will benefit from digital accessibility compliance.