Back to CanAdapt home

How well do the HTML 5 replacements for table summary attribute work with current Screen Readers and Browsers?

In Section 4.10.1.1 of HTML 5 various alternatives to the dropped table summary attribute are described. Here are testing results for the examples and for the previous table summary with and without a caption.

  FF27.0.1/JAWS15 IE11/JAWS15 FF27.0.1/NVDA2014.1 IE11/NVDA2014.1 CHROME/JAWS15 CHROME/NVDA2014.1
Example 1: In Prose surrounding table with aria-describedby Describedby text doesn't read when focus is on the table Describedby text doesn't read when focus is on the table Works. Reads Describedby 1st then caption Describedby text doesn't read when focus is on the table Did not read Works: Describedby text
Example 2: Inside the caption element Works, but it is a long caption. No distinction between the summary and the caption Works, but it is a long caption. No distinction between the summary and the caption Works, but it is a long caption. No distinction between the summary and the caption Works, but it is a long caption Did not read Works, but it is a long caption
Example 3: In Caption wrapped in details Reads OK but details doesn't visually hide, it is a long caption. No distinction between the summary and the caption Reads OK but details doesn't visually hide, it is a long caption. No distinction between the summary and the caption Reads OK but details doesn't visually hide, it is a long caption. No distinction between the summary and the caption Reads OK but details doesn't visually hide, it is a long caption. No distinction between the summary and the caption Did not read Reads OK ...BUT ...details is properly hidden, but the collapsed summary doesn't announce that it is collapsed or that there is more content available in the details, nor is it keyboard accessible
Example 4: Next to Caption in the figure Element It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no JAWS command to go to a figure element. It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no JAWS command to go to a figure element. It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no NVDA command to go to a figure element. It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no NVDA command to go to a figure element. Did not read It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no JAWS command to go to a figure element.
Example 5 Next to the table, in the same figure Same as 4 above, not supported Same as 4 above, not supported Same as 4 above, not supported Same as 4 above, not supported   It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no JAWS command to go to a figure element.
Table Summary attribute that has been dropped from HTML5 Works Works Works Works   Works
Table Summary attribute with a caption Works Works Works Summary reads, Caption is not read when table gets focus, but both read using arrow keys   Summary not read when table gets focus but read using arrow keys

Example 1: In prose surrounding table with 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.

Characteristics with positive and negative sides
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Example 2: Inside the caption element

Characteristics with positive and negative sides.

Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Example 3: In Caption wrapped in Details/Summary

Characteristics with positive and negative sides.
Help

Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Example 4: Next to Caption in the figure Element

Characteristics with positive and negative sides

Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Example 5: Next to the table, in the same figure

Characteristics with positive and negative sides

Characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.

Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Example 6 (Not in HTML5 SPEC): Using the Table Summary attribute which is dropped from HTML5

Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Example 7 (Not in HTML5 SPEC): Using the Table Summary attribute along with a Caption

Characteristics with positive and negative sides.
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

Example 8: In Details and prose surrounding table with aria-describedby

Help

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.

Characteristics with positive and negative sides
Negative Characteristic Positive
Sad Mood Happy
Failing Grade Passing

 

 

 

Legacy tests

  IE9/JAWS14 IE9/NVDA12 FF21/JAWS14 FF21/NVDA12 CHROME/JAWS CHROME/NVDA12 MACOS VO/Firefox

MACOS
VO/Safari

Example 1: In Prose surrounding table with aria-describedby Describedby text doesn't read when focus is on the table Describedby text doesn't read when focus is on the table Describedby text doesn't read when focus is on the table Describedby text doesn't read when focus is on the table Describedby text doesn't read when focus is on the table Describedby text doesn't read when focus is on the table Describedby reads but caption does not Describedby reads but caption does not
Example 2: Inside the caption element Works, but it is a long caption Works, but it is a long caption Works, but it is a long caption Works, but it is a long caption Doesn't read, caption content is not exposed Works, but it is a long caption Partial, it does not show the table and its caption as one entity OK
Example 3: In Caption wrapped in details Reads OK but details doesn't visually hide, it is a long caption. No distinction between the summary and the caption Reads OK but details doesn't visually hide, it is a long caption. No distinction between the summary and the caption Reads OK but details doesn't visually hide, it is a long caption. No distinction between the summary and the caption Reads OK but details doesn't visually hide, it is a long caption. No distinction between the summary and the caption Doesn't read, caption content is not exposed. details is properly hidden, but the collapsed summary doesn't announce that it is collapsed or that there is more content available in the details Reads OK ...BUT ...details is properly hidden, but the collapsed summary doesn't announce that it is collapsed or that there is more content available in the details Reads OK but details doesn't visually hide, it is a long caption Reads OK but details doesn't visually hide, it is a long caption
Example 4: Next to Caption in the figure Element It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no JAWS command to go to a figure element. It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no NVDA command to go to a figure element. Announces "group start" for the figure, but it doesn't read if the table is given focus It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no NVDA command to go to a figure element. It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no JAWS command to go to a figure element. It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no JAWS command to go to a figure element. Partial, it does not show the table and its caption as one entity It reads if the user navigates to the figure element but if the user focuses on table it doesn't
Example 5 Next to the table, in the same figure Same as 4 above, not supported Same as 4 above, not supported Same as 4 above, not supported Same as 4 above, not supported Same as 4, not supported It reads if the user navigates to the figure element but if the user hits "t" to go to the table it doesn't so it is not programmatically associated with the table. There is no JAWS command to go to a figure element. Partial, it does not show the table and its caption as one entity Same as 4
Table Summary attribute that has been dropped from HTML5 Works Works Works Works Works Works Summary does not read, the table and its caption not shown as one entity Summary does not read
Table Summary attribute with a caption Works Works Works Summary reads, Caption is not read when table gets focus, but both read using arrow keys Works Summary not read when table gets focus but read using arrow keys Summary reads, Caption does not. Caption Reads Summary does not read