What Makes a Table Accessible?
Tables are a great way to organize data. They're also easy for screen readers to read if you follow the guidelines below for making them accessible.
Important: In most cases, you should avoid using tables just to make the layout of a page look a certain way. It's best to only use tables when presenting rows and columns of related information.
1. Include a Header Row
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.
2. Use a Simple Table Structure
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 |
---|
Test 1 | 100 points | February 21 |
Test 2 | 100 points | April 4 |
PROJECTS |
---|
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.
3. Add Alt Text to the Table
It can be time-consuming to
read a table with a screen reader. Use alt text to add a short summary of the information provided in the table so that screen reader users can decide if they want to read the table in its entirety (see tutorial links below for instructions).
4. Avoid Blank Cells if Possible
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.
5. Don't Use Screenshots of Tables
Build a table in your document, website or eCampus textbox 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.
Additional Resources