Clearing Up Summary

The summary attribute is a “classic” method to describe data tables to screen readers users. It’s mentioned in Section 508 and even in WCAG 2.0 technique H73. But this technique is outdated and I haven’t recommended its use for a while now.

Reasons not to use the summary attribute

Why don’t I recommended its use? Here are some reasons:

• Many web editors don’t support it.
• Because it’s not visual, the content can be easily be forgotten and therefore outdated/irrelevant.
• Screen readers can automatically tell the user how many rows and columns a data table has so summary isn’t needed for this.
• It’s deprecated in HTML5.
• There is an ARIA alternative.

Misinformation

In the past, two web professionals, supposedly knowledgeable in accessibility, thought that the HTML5 Summary element (together with the Details element) can be used in place of the summary attribute. This is wrong. The Details/Summary elements are not related to the summary attribute and data tables.

And if you’re wondering, the Details/Summary elements are HTML5’s solution to toggle functionality. Browser support for Details/Summary is not quite there yet.

The ARIA Alternative

A description of a data table isn’t needed (and therefore a summary attribute) if the table is simple and clear (one header level, succinct header text, caption provided, etc.). If a description is needed, the text should be placed in the main content itself. This text can then also be associated to the table with ARIA.

In the HTML 5.1 Nightly, you’ll see the ARIA technique, 4.9.1.1 Techniques for describing tables. (Also in HTML5 technique 4.9.1.1) This is the proper way to use ARIA in place of the summary attribute to describe a data table.

Addendum: Thanks to @DBoudreau for pointing out the the tabindex=0 is required at this time for this to work properly for all screen readers.

<p id="tblDesc">The following table displays student population data of Foobar High School between 2003 and 2011 as computed by the XYZ Corporation.</p>
<table aria-describedby="tblDesc" tabindex="0">
 <caption>Student Population of Foobar</caption>
 <thead>
  <tr>
   <th>Year</th>
   <th>Population</th>
   <th>Change</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>2003</td>
   <td>846</td>
   <td>-3</td>
  <tr>
   <td>2004</td>
   <td>855</td>
   <td>+9</td>
  </tr>
 </tbody>
</table>