WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Best screen reader suported solution for javascript-less table with radio inputs

for

From: Steve Green
Date: May 10, 2022 11:05AM

I get the same as you. I have no idea why the cell contents don't get read out, but there is an easy fix. You just need to put the text in a <span> element inside the <label> element.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Detlev Fischer
Sent: 10 May 2022 15:29
To: <EMAIL REMOVED>
Subject: [WebAIM] Best screen reader suported solution for javascript-less table with radio inputs

Hi,
I am looking for the best solution for tabular entries (of travel
bookings) to be selected in a radio input pattern (i.e. only one of many table rows gets selected). Note that the site is not allowed to use JavaScript.

The radio inputs are in the first column, and labelled by the entries (travel id, name, destination, date of travel, etc) of the same row, which ensures that any click on label text in that row selects the respective input at the beginning of the row. You cannot know which of the parts of the travel data in that row may be relevant for users'
selection, therefore *all* label elements in the row are exposed, using multiple native label elements for the same input.

It would be ideal to have a solution that allows table navigation also - i.e. screen reader users can decide to run just through column "Date" to find an entry with a particular date. This works alright when leaving forms mode in NVDA/Chrome: cell content is read, and column headers are also read. In JAWS/Chrome however, it seems that putting table cell content inside a label element prevents it from being exposed in table navigation mode: I can navigate the table with Ctrl + Alt + arrow keys, but I only get the column headers, the cell content is announced as empty.

Since without JS there seems to be no way of making the labels in the table row clickable unless they are label elements for the respective input linked with the for attribute, solutions using aria-labelledby on th einputs referring to multiple ids seems out of the question - because then, users would be forced to click the tiny radio input to select it, not its labels.

Is there something clever - and not too much of a hack - that would lead to a javascript-less table that supports selection of properly labelled radio inputs in forms mode, and still allows free SR navigation of the table in JAWS Browse mode / Virtual PC cursor mode?

Any ideas?

Many thanks in advance for any ideas!
Detlev

--
Detlev Fischer
DIAS GmbH
(Testkreis is now part of DIAS GmbH)

Mobil +49 (0)157 57 57 57 45

http://www.dias.de
Beratung, Tests und Schulungen für barrierefreie Websites