RE: Radio and check boxes inside the table

The pattern of putting a checkbox in a table cell is pretty common.

For example in e-mail web applications like gmail, where each message is a row in the table and the first column is a checkbox to identify the row for some operation like delete or move.

Other ones are database applications where people manage the database through a web interface and people can do operations on lists of items laid out in a table.

So the table markup is relevant to other content in the table, it seems in this case the checkbox should be using the aria-labelledby technique to use content of the other table cells to generate the accessible name.

Jon

From: Starry Sky <Starry_sky@live.com>
Sent: Friday, September 6, 2019 12:34 AM
To: Cohn, Jonathan <jcohn@air.org>; Matt King <a11ythinker@gmail.com>; 'Jan Hellbusch' <jan@hellbusch.de>; 'sirisha gubba' <nsfsiri2014@gmail.com>; 'W3C WAI ig' <w3c-wai-ig@w3.org>
Subject: 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