Question: Radio inputs with the same name attribute value must be part of a group (false positive?)

https://dequeuniversity.com/rules/axe/1.1/radiogroup

We have some markup with nested radio buttons that are generating the above error using the Chrome extension. The only way we have found to resolve it is to add an identical aria-labelledby attribute to each radio button in the group referencing a common label. However, our belief is that this does not give a good experience as we would like to include more contextual information for each radio button by using an aria-label or unique aria-labelledby attribute for each radio.

The example that demonstrates our issue is a slightly modified version of this WCAG role=“radiogroup” example, which has been modified to include additional input type=“text” fields in each sub group which matches our requirements.

https://www.w3.org/WAI/WCAG20/Techniques/working-examples/ARIA17/grouping-roles-example.html

The first version shown is the WCAG example with input type=“text” fields added. It is using span’s with role=“radio” and interestingly this passes the aXe validation.

<div role="radiogroup" aria-labelledby="alert2">
    <p id="alert2">Send an alert when a charge exceeds $ 250</p>
    <div>
      <input type="text" name="text1" aria-label="text1">
      <span role="radio" aria-labelledby="a2r1" name="a2radio" tabindex="0" aria-checked="false"></span>
      <span id="a2r1">Yes</span>
    </div>

    <div>
      <input type="text" name="text2" aria-label="text2">
      <span role="radio" aria-labelledby="a2r2" name="a2radio" tabindex="-1" aria-checked="false"></span>
      <span id="a2r2">No</span>
    </div>
</div>

However, if you change the example to use actual radio buttons which more closely matches our desired markup, it fails with the error listed in the title. If you remove the additional input type="text fields, then it successfully passes aXe validation.

<div role="radiogroup" aria-labelledby="alert2">
    <p id="alert2">Send an alert when a charge exceeds $ 250</p>
    <div>
      <input type="text" name="text1" aria-label="text1">
      <input type="radio" aria-labelledby="a2r1" name="a2radio" tabindex="0" aria-checked="false"></input>
      <span id="a2r1">Yes</span>
    </div>

    <div>
      <input type="text" name="text2" aria-label="text2">
      <input type="radio" aria-labelledby="a2r2" name="a2radio" tabindex="-1" aria-checked="false"></input>
      <span id="a2r2">No</span>
    </div>
</div>

I understand that this markup might be questionable, given the nesting and different types of inputs in the role=“radiogroup” grouping element. I’ve seen other scenarios where aXe flags an error in situations like that due to unassociated inputs or something. However, NVDA recognises the radio button grouping still in the second example. Also it seems inconsistent at least that aXe does not treat the above two scenarios the same?

[mdgbayly]

OK - I’m sure you guys are right as you’re way more clued into this than I am, but I’m still interested to understand why these are not valid from an accessibility/semantic HTML point of view.

I see that aXe also flags the following with the same error. It gives the following error summary:

Summary:

Fix any of the following:

All elements with the name "a2radio" do not reference the same element with aria-labelledby
Fieldset contains unrelated inputs

https://jsfiddle.net/3okf871L/2/

<div>
    <p id="alert2">Send an alert when a charge exceeds $ 250</p>
    <fieldset>
      <legend>
        Mixed inputs
      </legend>
      <div>
        <input type="text" name="text1" aria-label="text1">
        <input type="radio" aria-labelledby="a2r1" name="a2radio" tabindex="0" aria-checked="false"></input>
        <span id="a2r1">Yes</span>
      </div>

      <div>
        <input type="text" name="text2" aria-label="text2">
        <input type="radio" aria-labelledby="a2r2" name="a2radio" tabindex="-1" aria-checked="false"></input>
        <span id="a2r2">No</span>
      </div>
    </fieldset>
</div>

Yet it seems valid to have ‘unrelated inputs’ in a fieldset according to the HTML5 spec:

https://dev.w3.org/html5/spec-preview/the-fieldset-element.html

<fieldset>
 <legend>Display</legend>
 <p><label><input type=radio name=c value=0 checked> Black on White</label>
 <p><label><input type=radio name=c value=1> White on Black</label>
 <p><label><input type=checkbox name=g> Use grayscale</label>
 <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
 <datalist id=contrast>
  <option label=Normal value=0>
  <option label=Maximum value=100>
 </datalist>
</fieldset>

Can you point me to something in WCAG or similar that you are using as the basis for your

Fieldset contains unrelated inputs

I’m sure you’re right - just trying to educate myself. Thanks

[jeankaplansky]

Rule deprecated in 3.4. Rule help unpublished for 3.4