I'm working on taking an existing webapp and making it WCAG AA compliant.

Part of the app involves displaying a "choice matrix": a series of questions presented in a tabular format. Here's a simplified example.

<table>
  <thead>
    <tr>
      <th>Question</th>
      <th>True</th>
      <th>False</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>google.com is hosted on the internet</td>
      <td><input name="q1" type="radio" aria-label="google.com is hosted on the internet: True"></td>
      <td><input name="q1" type="radio" aria-label="google.com is hosted on the internet: False"></td>
    </tr>
    <tr>
      <td>January is the third day of the week</td>
      <td><input name="q2" type="radio" aria-label="January is the third day of the week: True"></td>
      <td><input name="q2" type="radio" aria-label="January is the third day of the week: False"></td>
    </tr>
  </tbody>
</table>

Now -- if we run aXe Chrome Extension against this snippet, it complains:

Radio inputs with the same name attribute value must be part of a group

So it seems that we need to group the radiobuttons together in order to satisfy WCAG 1.3.1. This makes sense and seems worthwhile.

aXe suggests two ways to do that:

1) All elements with the name "q1" do not reference the same element with aria-labelledby 2) Element does not have a containing fieldset or ARIA group

But neither of those solutions seems to solve my issue.

The first solution seems nonsensical -- why would I give multiple radiobuttons the same aria-label? How would the screen reader user choose between them, if they're all the same?

So I'm looking into how to apply role="group" or role="radiogroup" to my radiobuttons.

There's a good example of using role="radiogroup" on the aXe site.

But... when I add role="radiogroup" to a element, jsx-a11y gives a warning:

Interactive elements should not be assigned non-interactive roles

It seems that by giving the a role, we're likely to cause problems because has implicit roles that are now being overwritten.

I'm not clear what havoc this may cause, but it gives me pause.

I also can't use this:

<table><div role="radiogroup"><tr>

without breaking the rules of html.

So it appears that I either need to break the rules of ARIA, HTML5, or usability if I want to resolve these warning messages.

Or, change this from a to a group of s. But it seems to me that is semantically appropriate in this use-case, right?

Is there a solution here that will work well across different screen readers? Currently the winner is to just put role="group" on the and ignore the warnings, but I haven't tested it sufficiently across screen readers yet.