Creating a Table for Graphical Representation

View the library of solutions.

The Problem

How to tie the <thead> contents to the tbody cells when the <thead> is hidden and <thead> content has been moved to <tfoot>.

What didn't work

• Hiding the <thead> with .screen-reader-text
• Using <tfoot> contents by themselves. <tfoot> content doesn't map to cells it relates to.
• Giving <thead> a display: table-footer-group
• Using position: absolute and moving <thead> the bottom (if it stays at the top it's OK)
• Giving <tfoot> a display: table-header-group
• Assigning <thead> position: relative and top. Works for FF, doesn't reposition in Safari.

What does work: K.I.S.S.

• Don't try to hide the <thead> with .screen-reader-text.
• Write special style for <thead> th with height: 1px, etc.
• Don't use <tfoot> at all.
• Create a div to hold a copy of the <thead> content at the bottom of the table.

How screen readers handle <thead>

When focus is given to the <th> cells in the <thead>:

• IE/JAWS: identifies cell content correctly with no superfluous identification. (correct)
• FF/NVDA: identifies cell content correctly with no superfluous identification. (correct)
• Safari/VO: content in cells 2+ are identified using cell 1 content (incorrect)

How screen readers handle <tfoot>

<tfoot> is not supported as a table heading set in any screen reader. It is simply treated as a final row of data. (See <tbody> below.)

How screen readers handle <tbody>

Row <th> tags:

• IE/JAWS: identifies cell content correctly with no superfluous identification. (correct)
• FF/NVDA: identifies cell content correctly with no superfluous identification. (correct)
• Safari: identifies the cell with all <th> content above it the when reviewing via row cells. (incorrect)

<td> tags:

Depending on whether you enter a <td> from the top/bottom or from the left/right it will be identified either by the th[scope="row"] or th[scope="col"] content.

No screen readers yet correctly identify a <td> with both corresponding <th>s at the same time.

Table Examples

Normal table with <thead>, left <th> cells, and <tfoot>.

Table cell with "hidden" <thead> and fake <tfoot> for use in a graphical data chart.

Ths is a fake link.