axe-core: False Positive: Form element has multiple elements

IMO this rule should be retired completely. Multiple labels for a form field are allowed by spec and work in most useragents. I believe it is only IE where they do not. This would be the simplest way to resolve.

However, even if it were to be kept the following should certainly not throw an error https://codepen.io/anon/pen/MrLgKm

<input type="checkbox" id="A" aria-labelledby="B">
<label class="indicator" aria-hidden="true" for="A">X</label>
<label for="A" id="B" class="ps-label">Yes/No Value</label>

Here there are 2 labels for the checkbox (the first is actually a CSS image in the real thing - but here I have added X for simplicity). They are both labels in order to increase the hit area for the checkbox. The first is hidden from screen readers with aria-hidden as it is not meaningful.

Even the addition of aria-labelledby on the checkbox which should override the labels does not seem to remove the aXe error.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 24 (18 by maintainers)

Most upvoted comments

I am re-opening this because the aria-labelledby is overriding the other labels. This is a case we need to support.

We need to decide how to handle this case:

        <input type="checkbox" id="C">
        <label class="indicator" aria-hidden="true" for="C">X</label>
        <label for="C" class="ps-label">Thingy</label>

I have tested on VO and it works correctly but we need more evidence that this is intended and fully implemented behavior

dylanb on Mar 22, 2019

After talking with @AutoSponge and @WilcoFiers, and running extensive tests (https://codepen.io/straker/full/PvqONy), this is what we’ve come up with:

Multiple visible labels on an input is not consistently supported across all screen reader/AT combinations. VoiceOver just reads the first label, JAWS just reads the last label, and NVDA and Talkback read all labels.
Hiding all but the first label is consistently supported.
Hiding the first label is not quite consistently supported. Talkback reads all labels (even the hidden ones).
Adding aria-labelledby that points to hidden labels is consistently supported.
Adding aria-labelledby that points to multiple visible labels is not quite supported. VoiceOver on iOS fails to read all labels.
Hiding the first element if it does not have any text content is not supported. VoiceOver on iOS, NVDA, and Talkback announce as just “checkbox” (no label text announced)

Taking that all into account, I propose we update the rule to:

fail if there are multiple visible labels (even if aria-labelledby is present due to iOS Safari)
fail if there are multiple labels and any are hidden by aria-hidden (if aria-labelledby is not present due to Talkback)
pass if there is only one visible label and the rest are hidden via CSS
pass if there is only one visible label and aria-labelledby is present (doesn’t matter if hidden via aria-hidden or CSS)

straker on May 7, 2019