Tables may be used for both layout and data but must be constructed properly to meet accessibility guidelines and to work well in responsive mode. This guide starts with how to create a layout or data table. That's the easy part. The hard part is using tables appropriately, which constitutes the bulk of this guide.
When using tables for layout (controlling the placement of content on the page) there are three guidelines:
- Screen readers read the content of cells row-by-row moving from left-to-right so organize the content in the cells of your table with this in mind.
- Do not use a header row or column.
- Do not enter a title/caption.
Follow these guidelines to create accessible data tables:
- Use row and column headers (the options with the dark rows and columns in the image above).
- Include a title/caption (a brief description of the table).
Layout Table Linearization
As mentioned above, screen readers move through a table from left to right and from top to bottom, so the content of your layout table has to make sense in that order. Take this table for example:
|Gold Coast Middle School||Ms. Chen, Principal|
|123 Beach Street||Mr. Brown, Vice Principal|
|Any Town, Ca 99999||Home of the Dolphins|
With the layout above, the name of the school and its address are going to be interrupted by the names of the administrators. Here's an improved version that makes sense for screen reader users:
|Gold Coast Middle School
123 Beach Street
Any Town, Ca 99999
|Ms. Chen, Principal
Mr. Brown, Vice Principal
Home of the Dolphins
Proper Use of Headers
Headers provide additional information about the content of the cells. For example:
A sighted user can easily tell that Nashville is the capital of Tennessee, but a blind user can't quickly scan the table to read the row and column labels. Screen readers announce the name of the row and column headers along with the cell content. Without the headers, data tables, large ones in particular, are quite inaccessible.
If you find yourself creating large, complex tables with merged cells and tables within tables (the horror), you should step back and reconsider how to present your information. Perhaps several separate tables would be better than one complex table, and maybe you don't need tables at all. Penn State has a nice example of a simple vs. complex table.
Too many columns can be a problem as well. Consider combining information to use fewer cells. For example, this table has a lot of information spread out across 6 columns:
|Student Tutor||Subjects||Rate||Days||Will Tutor|
|Sarah is a senior with a 4.0 GPA. She is on the Women's soccer team and is President of the Key Club||Biology, English 1 -2, US History||$13/hr||Monday, Tuesday, Wednesday, Thursday, Friday||9th, 10th, 11th, 12th, Male, Female|
|Caleb is a senior with a 4.0 GPA. He is a part of the Math Club and a member of the Men's Baseball team.||US History, Any Math Class||Negotiable||Tuesdays, Thursdays, Fridays||9th, 10th, 11th, 12th, Male, Female|
Consider this alternate layout with just 2 columns. Note the application of a header row to make the table even more accessible.
|Student Tutor||Will Tutor|
|Sarah is a senior with a 4.0 GPA. She is on the Women's soccer team and is President of the Key Club.||Subjects: Biology, English 1 -2, US History
Days: Monday thru Friday
Tutees: 9 - 12, Male, Female
|Caleb is a senior with a 4.0 GPA. He is a part of the Math Club and a member of the Men's Baseball team.||Subjects: US History, Any Math Class
Days: Tuesday, Thursday, Friday
Tutees: 9 - 12, Male, Female