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.
Exam | Point Value | Due Date |
---|---|---|
Exam #1 | 100 | September 30 |
Exam #2 | 100 | October 30 |
Final Exam | 200 | November 30 |
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.
Exam | Point Value | Due Date | Notes |
---|---|---|---|
Exam #1 | 100 -50 multiple choice -50 short answer | September 30 | |
Exam #2 | 100 -100 multiple choice | October 30 | this exam will be taken virtually |
Final Exam | 200 -150 multiple choice -25 true or false -20 fill in the blank -5 short answer | November 30 Grades will be posted on December 1 | |
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:
Term | Date |
---|---|
Fall Term | September 30 October 30 |
Winter Term | January 30 February 28 |
Spring Term | April 30 May 30 |
The form should look something like this instead:
Fall Term | Winter Term | Spring Term |
---|---|---|
September 30 | January 30 | April 30 |
October 30 | February 28 | May 30 |
- 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.