Re: Radio buttons inside HTML table accessibility issue

Hi Ivan,

I note your restriction about the amount you can change your HTML.

Ignoring that temporarily, I suspect one issue may be that the user-agent—NVDA—is expecting tabular data to be found in an HTML table since it is essentially the only valid use of TABLE while TABLE does not have the presentation role (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role) assuming it does not yet have that role.

Different user-agents differ somewhat sometimes in the extent to which they forgive / try to work with unexpected patterns, so this may be a case where NVDA is either stricter or less able to see past the somewhat invalid use of TABLE.

One route may be to add role="presentation" to the TABLE, and ensure the contents of the table are properly labeled via another mechanism (if some of that is lost from removing the current associations provided by THs).

I hope this helps, even if it is not the whole answer.

Regards,

Alan

Alan Bristow ( he / him / il )
Web Developer / Développeur Web
Elections Canada / Élections Canada
alan.bristow@elections.ca<mailto:alan.bristow@elections.ca>
________________________________
From: Ivan Rodrigues <ivan.joel.rodrigues@gmail.com>
Sent: 11 December 2024 07:41
To: w3c-wai-ig@w3.org <w3c-wai-ig@w3.org>; wai@w3.org <wai@w3.org>
Subject: Radio buttons inside HTML table accessibility issue

Ce message a été envoyé par un expéditeur externe. Veuillez faire preuve de prudence et ne pas cliquer sur les liens ou ouvrir les pièces jointes à moins de reconnaître l'expéditeur et de savoir que le contenu est sûr.

This message was sent from an external sender. Please exercise caution and do not click links or open attachments unless you recognize the sender and know the content is safe.


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