RE: Radio buttons inside HTML table accessibility issue

Hi Ivan,

picking up on Alan's comments, I suspect the grouping character of the td element causes the problem. JAWS 2025 behaves the same way as described for NVDA.

If aria-colspan was permitted in native tables, the problem ("1 of 1") could be solved:

<tr>
        <td>1</td>
        <td>Watch</td>
        <td aria-colspan="2" aria-owns="foo">
          <input
            type="radio"
            value="A"
            aria-label="Choice A"
            id="product-1-A"
            name="product-1"
          />
          <label aria-hidden="true" for="product-1-A"> Label A </label>
        </td>
        <td id="foo" role="none">
          <input
            type="radio"
            value="B"
            aria-label="Choice B"
            id="product-1-B"
            name="product-1"
          /><label aria-hidden="true" for="product-1-B"> Label B </label>
        </td>
      </tr>

The third and fourth td element both receive two supplementary attributes.      

Unfortunately, the solution does not conform. See also 
https://www.w3.org/TR/wai-aria-1.2/#aria-colspan

The two td elements should be merged to one td element.

Jan


--
Hellbusch Accessibility Consulting
Chemnitzer Str. 50, 44139 Dortmund
Tel.: +49 (231) 58054815 Mobil: +49 (163) 3369925
--
Accessibility-Consulting seit 2000 

Leistungen, Bücher, Artikel: https://www.barrierefreies-webdesign.de
Blog: https://www.hellbusch.de



> -----Original Message-----
> From: Ivan Rodrigues <ivan.joel.rodrigues@gmail.com>
> Sent: Wednesday, December 11, 2024 1:42 PM
> To: w3c-wai-ig@w3.org; wai@w3.org
> Subject: Radio buttons inside HTML table accessibility issue
> 
> Dear W3C Team,
> 
> 
> I hope this message finds you well. I am reaching out via these email addresses
> because I am unsure who the most appropriate contact would be for my query.
> I am currently redesigning our web application at work to improve its
> accessibility, and I have encountered an issue related to HTML tables and
> screen reader behavior.
> 
> Our application contains numerous HTML tables. One of them has the following
> (simplified for the example) structure:
> 
> 
> The table is straightforward, with the last column containing a "group" of radio
> buttons.
> Below is its HTML structure:
> <table>
>   <thead>
>     <tr>
>       <th scope="col">Id</th>
>       <th scope="col">Name</th>
>       <th scope="colgroup" colspan="2">Actions</th>
>     </tr>
>   </thead>
>   <tbody>
>     <tr>
>       <td>1</td>
>       <td>Watch</td>
>       <td>
>         <input
>           type="radio"
>           value="A"
>           aria-label="Choice A"
>           id="product-1-A"
>           name="product-1"
>         />
>         <label aria-hidden="true" for="product-1-A"> Label A </label>
>       </td>
>       <td>
>         <input
>           type="radio"
>           value="B"
>           aria-label="Choice B"
>           id="product-1-B"
>           name="product-1"
>         /><label aria-hidden="true" for="product-1-B"> Label B </label>
>       </td>
>     </tr>
>     <tr>
>       <td>2</td>
>       <td>Tablet</td>
>       <td>
>         <input
>           type="radio"
>           value="A"
>           aria-label="Choice A"
>           id="product-2-A"
>           name="product-2"
>         /><label aria-hidden="true" for="product-2-A"> Label A </label>
>       </td>
>       <td>
>         <input
>           type="radio"
>           value="B"
>           aria-label="Choice B"
>           id="product-2-B"
>           name="product-2"
>         /><label aria-hidden="true" for="product-2-B"> Label B </label>
>       </td>
>     </tr>
>   </tbody>
> </table>
> 
> I recreated the example on Stackblitz so you are able to reproduce it and
> experiment with it as well: https://stackblitz.com/edit/accessibility-html-table-
> with-radio-buttons  <https://stackblitz.com/edit/accessibility-html-table-with-
> radio-buttons>
> 
> 
> The issue arises when the table is interpreted by screen readers. For instance,
> when navigating to the second radio button in the second row (Choice B),
> NVDA announces:
> 
> 
> "Choice B row 2 Actions column 4, Choice B radio button not checked one out
> of one."
> 
> The "one out of one" is incorrect; it should announce "two out of two" since it
> is part of a radio group formed using the "name" attribute. The expected
> behavior is for NVDA (or any screen reader) to recognize this and correctly
> announce the grouping based on the "name" attribute.
> 
> I know that this could be resolved by wrapping the radio buttons in a <fieldset>
> tag, but unfortunately, technical constraints prevent us from drastically
> changing the existing HTML structure.
> 
> 
> I would like to submit this issue as a bug or feature request but am unsure
> whom to contact. Should this be directed to the NVDA development team,
> W3C (as it relates to HTML specifications), or another organization?
> 
> I would greatly appreciate your guidance on redirecting this query to the
> appropriate party.
> 
> Thank you for your time and assistance.
> 
> 
> 
> Kind regards,
> 
> Ivan Rodrigues

Received on Saturday, 14 December 2024 10:31:26 UTC