By using data tables, your website can present detailed information in a straightforward way. However, without structural markup, tables can create serious accessibility issues.
The Web Content Accessibility Guidelines (WCAG) requires proper markup for tables under Success Criterion 1.3.1, “Info and Relationships.” That guideline reads:
“Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.”
When tables rely on visual appearance alone, they cause problems for users. For example, some people with vision disabilities use screen readers to browse the web. If the screen reader can’t easily identify the header rows of a table, the user might hear an apparently random list of words and numbers, which can be disorienting and frustrating.
Tables may also create barriers for people who use other types of assistive technologies. Some people may use custom stylesheets to enlarge important text and change font colors. If your tables have appropriate HTML markup, these custom stylesheets will be able to display your page accurately; if the markup is missing, the user experience suffers.
Fortunately, writing the correct markup is fairly simple. Below, we’ll explain some basic concepts to keep in mind when building tables for accessibility.
Using HTML to identify tables for accessibility
For tables with one or two headers, adding some simple HTML will identify the structure:
- Mark header cells with the <th> tag.
- Mark data cells with the <td> tag.
You’ll also need to use the “scope” attribute to identify the structure and define the direction of the headers. This is important because assistive technologies need to be able to interpret the logical relationships of the data. Some screen readers can accurately determine the structure of simple tables without the “scope" attribute — but by defining whether a header applies to a row or column, you can ensure that assistive tools can present the data in a clear, coherent way.
- Use scope=col to define columns.
- Use scope=row to define rows.
- For irregular headers, use the scope=colgroup and scope=rowgroup values to set the range of the headers.
Wherever possible, try to keep tables simple — avoid irregular headers that span multiple rows or columns unless they’re strictly necessary for the data set. While many screen readers can present data using the colgroup and rowgroup values, some cannot.
All <th> and <td> tags should have an unique value that explains the content. Here’s a HTML example of accessible table markup for a simple grid:
<table>
<caption>People in St. Louis</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Date of Birth</th>
<th scope="col">Weight</th>
</tr>
<tr>
<th scope="row">Thomas Sims</th>
<td>July 25, 1986</td>
<td>160 pounds</td>
</tr>
</table>
Remember to add relevant captions and summaries for every table
When a person accesses your website with assistive technologies, they may not be able to perceive tables visually. The caption attribute can help them understand the data in the presentation. Never use the same caption twice for two tables on the same webpage — even if the data sets are extremely similar, this can cause confusion.
Reading tables with a screen reader can be time consuming, and some users may not wish to read the entire table to find relevant information. Provide a summary before the table with key takeaways. Typically, you’re including a table to make a point; make sure that readers can understand the purpose of your content without reading the data in its entirety.
Make sure tables are necessary before adding them to your website
Data tables can provide your users with an intuitive way to access important information. However, they’re not always the best tool for the job: If you’re adding tables to get a certain layout aesthetic, consider whether you could achieve the same effect with CSS and other web design tools. If you’re including a table to show a specific statistic or trend, consider other presentation methods that might make the point more effectively.
With that said, don’t avoid tables entirely if they can improve your content — tables are useful resources, particularly when webmasters provide detailed summaries of the information. Pay attention to markup, don’t rely on visual cues alone, and provide users with alternative ways to access the data. Planning for accessibility won’t take much extra time, and your audience will appreciate thoughtful web design.
