Re: Radio buttons inside HTML table accessibility issue

I retested and agree with Johnathan it is a NVDA thing. NVDA seems very
buggy.

Tested using

   - JAWS 2023 on Chrome 131.0.6778.140
   - JAWS 2023 on Firefox 133.0.3
   - NVDA 2024.4.1 on Chrome 131.0.6778.140
   - NVDA 2024.4.1 on Firefox 133.0.3
   - VoiceOver on iOS Safari 18.1.1

I had a play with naming variations for the radios.

https://codepen.io/Deafinitive/live/ogvzOoy/aa5e7bb89248e03089573245ef5a575c

Cheers
Laurence Lewis
Accessibility Senior Specialist - Telstra

On Fri, 13 Dec 2024 at 11:48, Jonathan Cohn <jonathan.c.cohn@icloud.com>
wrote:

> I believe this is a chrome issue, and not a screen reader issue. Try the
> same table in Firefox and see if it behaves as you expect.
> Sent from my iPhone
>
> On Dec 12, 2024, at 12:04 PM, Ivan Rodrigues <
> ivan.joel.rodrigues@gmail.com> wrote:
>
> 
> Hi Mohammed,
>
> First of all, thanks for your answer!
>
> I already tried applying the radiogroup role in the tr and indeed it
> creates a context of radio grouping, but we loose the table context then...
>
> That's exactly what I am trying to achieve: have both the radio group
> context and table row/column context, but I can't find a way to do so.
>
> Applying multiple roles (radiogroup row) also doesn't work because the
> following roles act like fallbacks (only one role can be set for an
> element), unfortunately.
>
> Therefore my question remains open. I think this is currently a missing
> feature in the web accessibility domain. Any idea who I could contact to
> bring this question/feature request more attention?
>
> Kind regards,
>
> Ivan Rodrigues
>
>
> Le jeu. 12 déc. 2024, 16:20, ashraf aleem <ashraf.aleem@gmail.com> a
> écrit :
>
>> Hi,
>>          As you suggested
>>
>>> *technical constraints prevent us from drastically changing the existing
>>> HTML structure.*
>>
>>
>>
>> https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role
>> Please look into role = "radiogroup" on the <tr>, check how it reads with
>> screen readers.
>>
>> I have seen examples of using it with <ul>,
>> https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio/
>>
>> Thanks,
>> Ashraf Mohammad
>>
>> On Thu, Dec 12, 2024 at 8:33 AM Ivan Rodrigues <
>> ivan.joel.rodrigues@gmail.com> wrote:
>>
>>> 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:
>>> <image.png>
>>>
>>>
>>> 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:
>>> <image.png>
>>> "*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
>>>
>>>