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):
title
attribute in the th
tagaria-label
attribute in the th
tagabbr
attribute in the th
tagabbr
tag with title
attribute wrapping text in the th
cellabbr
tag with aria-label
wrapping text in the th
cellspan
marked as visually hidden but screen reader accessible in the th
cellHeader 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.
th
cells, only the visible text is announced. In body cells, column three, with the abbr
attribute in the header cell becomes the header text for the body cell.th
cells, only the visible text is announced. In body cells, aria-label
headers are announced, along with the abbr
attribute technique of column three.aria-label
or abbr
technique has an affect.th
cells, title
and aria-label
text 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.th
cells, aria-label
techniques and abbr
tag with title
attribute all override visual text. In body cells, aria-label
headers announce the label; however, the column header with the abbr
tag with title
attribute is silent and you hear only the visible text.th
cells, 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.