Simplify tables and include a header row and/or column and a summary, either in a caption or alt text.
Introduction
When sighted users focus on a table cell, they are able to visually determine which row and column the cell is in by scanning up and down or left and right. This adds context to what the value in a particular cell means.
On the other hand, a screen reader can only read aloud each cell one by one from left to right and top to bottom.
If the table is not formatted correctly, there is no easy way to determine what label a particular value in a cell might have.
If you are not a screen reader user, pretend that you are and you want to find the location of a biology 205 class. You find a webpage with an incorrectly formatted table and you hear the following text read out loud. Do you know where the class will be held?
Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid. (WebAIM, Creating Accessible Tables)
Best Practices
Use tables to display data
Tables traditionally show the relationship between two or more items in rows and columns. But in the early days of the internet, Web designers and developers commonly used tables to control the layout of webpage content as well because they couldn't easily do so with HTML.
Content creators sometimes use tables in word processing documents to similarly control where content is placed rather than to indicate data relationships. This is not recommended.
But screen reader software may not read cells in such tables in the proper order, and page layout can now be better controlled with CSS on webpages and with other tools in document creation software.
Use tables to present information in a grid, or matrix, with columns or rows that show the meaning of the information.
Data table example
| Campus | Undergraduates | Graduate and Professional Students |
|---|---|---|
| Crookston | 1,835 | N/A |
| Duluth | 8,834 | 979 |
| Morris | 1,499 | N/A |
| Rochester | 534 | 102 |
| Twin Cities | 31,367 | 16,940 |
Designate row and/or column headers
Designate at least one row and/or column header using the table formatting tools in your web content management system or document creation software.
Use the <th> element to mark up table headers in HTML.
Don't just change the visual formatting of the text, such as the font size or color, to visually indicate table header rows and/or columns. Screen readers will not be able to associate the headers with the correct cells.
Table headers should never be empty. This is particularly of concern for the top-left cell of some tables.
Example table with row and column headers
| Campus | Address | Contact Information |
|---|---|---|
| Crookston | 247 Sargeant Student Center 2900 University Ave. Crookston, MN 56716 |
|
| Duluth | 258 Kirby Student Center 1120 Kirby Drive Duluth, MN 55812 |
|
| Morris | 240 Briggs Library 600 East 4th Street Morris, MN 56267 |
|
| Rochester | 258 Kirby Student Center 1120 Kirby Drive Duluth, MN 55812 |
|
| Twin Cities | 180 McNamara Alumni Ctr 200 Oak Street SE Minneapolis, MN 55455 |
|
Avoid or simplify complex tables
Simple tables are easier for users of assistive technologies to understand and navigate, because screen readers essentially ignore that the content is inside a table. HTML code maintenance may be easier for simple tables as well.
- Include a maximum of one header row and one header column.
- Spell out abbreviations or acronyms, or use the <abbr> or <acronym> tags in HTML to ensure accessibility.
- If your table has multiple header rows, merged cells, or another table embedded in it, split it into two or more simple tables.
- If you do create a complex data table on a webpage, use the <scope> tag to programmatically associate the data cells with the appropriate headers.
- Don’t merge cells or include a table within another table.
Example simplification of a complex table
| Course | Exam 1 | Exam 2 | Final Exam |
|---|---|---|---|
| Chemistry | 20% | 20% | 60% |
| Biology | 25% | 25% | 50% |
| Course | Project 1 | Project 2 | Final Project |
|---|---|---|---|
| Chemistry | 10% | 10% | 80% |
| Biology | 30% | 30% | 40% |
Provide contextual information
Data tables often have contextual information around them that helps users understand the content of the table.
- Associate descriptive text about a table with its respective table by including a <caption> element in HTML or alt text in Microsoft Word.
- Captions are not necessary for each table, but can be helpful for screen reader users.
- The caption can be visually formatted and positioned above or below the table as needed, but on webpages, the <caption> element must be the first one after the opening <table> tag.
- You may use <thead>, <tfoot>, and <tbody> tags in HTML tables so that the head and/or foot rows repeat at the top or bottom of the table when it is printed, but these do not provide any additional accessibility benefits.
- Don't repeat the same text in the caption that appears in a heading preceding the table.
- You may provide a summary of the structure of the data table (not of the content) using the <summary> attribute, but screen reader support for it varies, and it is not part of the HTML5 specification, so WebAIM does not recommend it.
Include content in all cells
When people encounter empty cells within tables, both visual and screen reader users may wonder if data was omitted by mistake. In addition, screen reader software may skip reading empty data cells, causing mismatches between header rows and their corresponding data cells.
Include text such as "not applicable" or "none," to indicate that there is no data in empty cells.