Creating Accessible Tables
Tables are a helpful way to organize and present data, but they can pose challenges for students who use assistive technologies like screen readers. Poorly structured tables can make it difficult to understand relationships between data or navigate the content efficiently.
Accessible tables ensure all students—regardless of ability—can perceive, understand, and use tabular information. Properly formatted tables provide structure, meaning, and clarity, which benefits everyone.
Accessible Table Structure
The first row of the table should state what kind of information is contained in each column (rows go across and columns go down). This provides context for the data and assists screen readers in navigating the table.
Example of a simple accessible table with a header row:
Assignment Point Value Due Date Project 1 100 points January 31 Test 1 100 points February 21 Project 2 150 points March 14 Test 2 100 points April 4 Group Project (Draft) 50 points April 18 Group Project (Final) 150 points May 2 Note: Like headings, header rows also require a little extra formatting to be meaningful to screen readers. You will need to label the table's header row within the website or software you're using.
Avoid tables nested within other tables. Also, avoid merged or split cells. All of these will make it very difficult, if not impossible, for screen readers to read the information in the table aloud in a way that makes sense.
Example of a table that is not accessible due to merged and split cells:
Assignment Point Value Due Date TESTS PROJECTS Test 1 100 points February 21 Test 2 100 points April 4 Project 1 100 points January 31 Project 2 150 points March 14 Group Project 200 points Draft: April 18 Final: May 2 In the table above, the “Tests” and “Projects” rows are made of 3 merged cells. The “Group Project” information contains a split cell in the “Due Date” column. When a table does not have the same number of rows and columns throughout, it will be difficult for screen readers to read, and the cells may be read out of order
- Add a
<caption>tag that briefly describes the table’s purpose. - If your table is complex, provide a summary above or below the table in plain text.
- Add a
You should never leave the left uppermost cell blank, as it's the first cell a screen reader user will encounter. Blank cells anywhere in the table could also mislead someone using a screen reader into thinking that there's nothing more in the table.
- Build a table in a word document rather than just including a screenshot. A screen reader can't read an image, so a person using a screen reader won't know what data is contained in a screenshot of a table.
- Tip: Not sure if your table is a screenshot or not? Try selecting just the text in one particular cell of the table. If you're not able to select the text, it's just an image of a table and it is not accessible.
How Do I Create Accessible Tables?
The following tutorials demonstrate how to make an accessible table:
Note: Never use tabs or spaces to create the appearance of a table. You need the actual structure of a table as described above in order for the content to be accessible.