Various attempts at getting a table header to annouce anything more than its visible text.
Goal: Get screen readers to announce more context in header cells for non-visual users — and do so in a repeatable, consistent way across browser/screen reader combinations.
All headers use scope (which overall we have found to do nothing at all in almost all circumstances):
titleattribute in the
aria-labelattribute in the
abbrattribute in the
titleattribute wrapping text in the
aria-labelwrapping text in the
spanmarked as visually hidden but screen reader accessible in the
|Header One Using Title||Header Two Using ARIA-Label||Header Three Using Abbr||Header Four Using Abbr Tag with Title||Header Five Using Abbr Tag with ARIA-Label||Header Six Using Visually Hidden Text extra text for column six|
|row two, column one||row two, column two||row two, column three||row two, column four||row two, column five||row two, column six|
|row three, column one||row three, column two||row three, column three||row three, column four||row three, column five||row three, column six|
Spoiler alert: Basically nothing you would think works actually works in a consistent way across browsers/AT.
thcells, only the visible text is announced. In body cells, column three, with the
abbrattribute in the header cell becomes the header text for the body cell.
thcells, only the visible text is announced. In body cells,
aria-labelheaders are announced, along with the
abbrattribute technique of column three.
abbrtechnique has an affect.
aria-labeltext is announced along with the visual text, and column five's structure oddly reports as a “group.” When in the body cells, only the non-visual text is read, except in column six, where we hear both visual and non-visual text header.
titleattribute all override visual text. In body cells,
aria-labelheaders announce the label; however, the column header with the
titleattribute is silent and you hear only the visible text.
thcells, only visible text is read. In body cells, only visible text is read (including for column 6).
Conclusion with latest tech, as of February 2018: Only relatively safe approach is the kludge of off-screen accessible text (and even it doesn't work fully with VO in iOS). For the future, an
aria-label-based approach seems the most likely to gain traction, unless wider support for the
abbr attribute in header cells becomes available.