accessibilityscreen-readers

Have screenreader not read the entire HTML table column header when browsing data rows


In web pages we're developing, we have tables where the column headers (marked up as ths with scope="col") include a sort button, which, when browsing through the row of headers, is read out by a screenreader (I'm using NVDA and Chrome on Windows, for what it's worth) as something like "sort", "sorted ascending", "sorted descending". (These are aria-labels on the respective sortable, sorted ascending, and sorted descending icons we're displaying.) So, for example, the screenreader might read "row 1 column 1 header ID button sorted ascending column 2 header name button sort".

However, when browsing the data rows under the header row, it would be nice to hear just "row 2 column 1 ID '472' column 2 name 'Kasey Snodgrass' ...", without repeating the overhead about the buttons and the sorting. Is there a way to achieve this?


Solution

  • I worked it out. What I'd been doing, without having said so, was adding a span with class="visually-hidden" (this is with Bootstrap) on it with the details. I moved it into the button's aria-description and that worked fine. The sorting details were spoken in the course of browsing the header row but not included in the column identification while browsing through the data rows.