Table Summary Tests

This page includes four tables. The first of these uses the summary attribute, now obsolete as of HTML5. The second table uses aria-describedby, which is the recommended alternative technique according to HTML 5.1 Nightly. The third table is the same but also adds tabindex="0" to the <table> element as recommended in this WebAxe blog post. The fourth table combines all of these techniques.

Tests were conducted with the following screen reader/browser combinations:

Table 1: summary

Table 1 caption
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Results

When the table receives screen reader focus, all screen readers announce the table with some combination of the number of rows, number of columns, and summary. Some also announce the caption, while others don't announce that until it receives focus. VoiceOver in iOS does not announce the summary, and VoiceOver in Mac OS X announces it as "the help tag" for this item after a lengthy pause.

Table 2: aria-describedby

In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

Table 2 caption
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Results

The only screen reader tested that includes the aria-describedby text when announcing the table is NVDA. VoiceOver in Mac OS X also announces it as "the help tag", just as it did with the summary attribute in Table 1.

Table 3: aria-describedby and tabindex="0"

In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

Table 3 caption
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Results

As far as I could tell, the results of this test are the same as Table 2. The addition of tabindex="0" does not seem to make a difference. Consequently I don't recommend adding this attribute, as having the table in the tab order is awkward and unintuitive for keyboard users with eyesight.

Table 4: summary and aria-describedby

This summary is referenced by aria-describedby

Table 4 caption
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Results

If both techniques are used, JAWS and Window-Eyes read the summary attribute, while NVDA and VoiceOver (on Mac OS X) read the aria-describedby text. I recommend using this approach temporarily until all screen readers support aria-describedby.

Aria-describedby on a natively focusable element

Since aria-describedby doesn't work in JAWS or NVDA on either of the above examples, I thought I'd confirm that it works at all, by using aria-describedby on this link: W3C Techniques for Describing Tables

And on this form field:

This form field also has a description, and this is it.

Results

All of the desktop screen readers tested support aria-describedby on both the link and the input field with the exception of Window-Eyes, which supports it on the input field, but not the link. Also, VoiceOver's support is the same as in the table examples: It renders the aria-describedby technique as "the help tag" after a lengthy pause, so it's only accessible to users who hesitate.