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 cell| 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.
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.