Web Accessibility Cookbook

Chapter 11. Presenting Tabular Data

Developers have misused tables so much in the past that today, they’re almost afraid of using them in fear of harming accessibility. The truth is that tables have their place and can even improve accessibility. Understanding when and how to use them and when another solution might be better is essential.

11.1 Pick the Right Elements

Problem

Like most semantic elements, tables can be helpful to your users, but only if you use them correctly and if they’re the right tool for the job. If not, they can make the experience worse. They can provide useful information for screen reader users or make it impossible to consume the content.

Solution

Use tables only when you have data with more than one dimension, and a table-like structure is the best way to present it and convey its meaning (see Example 11-1 for an example). Don’t use tables for layout.

Example 11-1. A table listing names and scores of players in a fictional online game

<table>
  <caption>Scores Group A</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Score</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Michael</td>
      <td>27</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Robert</td>
      <td>7</td>
      <td>Croatia</td>
    </tr>
    <!-- … -->
  </tbody>
</table>

Discussion

The <table> element is great; please use it! It can improve the user experience significantly. When you decide which element to use to represent data, ask yourself the following questions:

• Is the data multidimensional?

• Would it be helpful ...