Re: Radio and check boxes inside the table

I actually had the same question - why are there radio buttons or check boxes within a table?  The purpose of a table is to display related data in some organized manner but not for user input or to position items visually.  There are better ways to create visual layout that do not conflict with aria assignments.  If a table is no longer used for visual layout, does your original query pretty much goes away?

Some may appreciate this - I just visited a site that used a single cell table for visual layout and then (mis-)used an h3 in the table caption to "highlight" a notation that it was not a table!

Skye

-------- Original Message --------
From: Cohn, Jonathan<mailto:jcohn@air.org>
Date: Thursday, September 05, 2019 12:48 PM CDT
Subject: RE: Radio and check boxes inside the table
To: Matt King<mailto:a11ythinker@gmail.com>, 'Jan Hellbusch'<mailto:jan@hellbusch.de>, 'Sirisha Gubba'<mailto:nsfsiri2014@gmail.com>, 'W3c Wai Ig'<mailto:w3c-wai-ig@w3.org>

Are these tables really to be considered "data" tables? Personally I get annoyed especially when on a Macintosh and folks use tables like this for essentially layout purposes. What would happen if the TH is changed to a TD.


-----Original Message-----
From: Matt King <a11ythinker@gmail.com><mailto:a11ythinker@gmail.com>
Sent: Thursday, September 05, 2019 11:53 AM
To: 'Jan Hellbusch' <jan@hellbusch.de><mailto:jan@hellbusch.de>; 'sirisha gubba' <nsfsiri2014@gmail.com><mailto:nsfsiri2014@gmail.com>; 'W3C WAI ig' <w3c-wai-ig@w3.org><mailto:w3c-wai-ig@w3.org>
Subject: RE: Radio and check boxes inside the table

You're probably getting double speak because you are using aria-label. The screen reader is reading the name of the radio from aria-label, then reading the column header for the current cell.

Use aria-labelledby on the radio and point to the th. That at least gives screen readers an opportunity to figure out how to avoid double speak. Then, you could give feedback to the screen readers asking them to avoid double speak.

-----Original Message-----
From: Jan Hellbusch <jan@hellbusch.de><mailto:jan@hellbusch.de>
Sent: Wednesday, September 4, 2019 6:34 AM
To: 'sirisha gubba' <nsfsiri2014@gmail.com><mailto:nsfsiri2014@gmail.com>; 'W3C WAI ig' <w3c-wai-ig@w3.org><mailto:w3c-wai-ig@w3.org>
Subject: RE: Radio and check boxes inside the table

Hi,


If a radio button or check boxe is used inside  a <td> cell, why does
it need aria-label or aria-labelled by attribute added to it?

The radio buttons are inside the table,  so the relationship has been
established between the table headers and radio button in <td> cell.


That will be visual, but not in all cases with a screen reader.

 Adding aria-label makes the screen readers to narrate the radio
button's label twice.


In some cases, yes. Depending on navigation methods it will be read out only once, though. Try these navigation methods: * table navigation (e.g. in JAWS with Ctrl+Alt+arrow keys) * tab key and * jump to next checkbox by pressing X (in JAWS) The results will differ.

If I remove aria-label from the radio button (which is in a <td>
cell), automated tools are flagging it as error.


Which is correct. All active elements must have an accessible name.

Jan