WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Detlev Fischer
Date: May 10, 2022 8:28AM

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