label rule does not properly detect multiple labels

[kensgists]

This issue may be related to issue #855

This code:

<label for="c1">label one</label>
<label for="c1">label two</label>
<input type="checkbox" id="c1">

is appropriately flagged as a violation.

There are multiple labels, and it is ambiguous whether both labels should be associated with the checkbox, or only one should be associated, and, if only one is associated, which one, or, if both are associated, in what order they should be associated.

On the other hand, this version is unambiguous, since it has only one programmatically associated label, yet it still flags as a violation:

<label for="c1" id="l1">label one</label>
<label for="c1">label two</label>
<input type="checkbox" id="c1" aria-labelledby="l1">

(Note: Both code snippets parse as valid HTML 5.)

[WilcoFiers]

Good point. Out of curiosity, is this a false positive you saw on a live site some place, or is this more of a theoretical issue?

[kensgists]

It is a false positive, detected while testing a front end framework.

The implementation was using the second "label" as a shim for the image of a "toggle switch" that visually obscures a checkbox and, apparently, it was easier to simply get the "clickability" by using the label tag than to attach a listener.

[jeeyyy]

@kensgists

In the second scenario/ example below:

<label for="c1" id="l1">label one</label>
<label for="c1">label two</label>
<input type="checkbox" id="c1" aria-labelledby="l1">

the violation summary suggests "Fix all of the following: Form element has multiple <label> elements" with a target html of "<input type="checkbox" id="c1" aria-labelledby="l1">"

Are you suggesting that the target html should have been the other label element?

Looking through the label rule and the multiple-label, the intention is to catch the multiple labels for a given form element, which it does.

@WilcoFiers - thoughts?

[kensgists]

@JKODU

From my understanding of the ARIA spec, if you set aria-labelledby, it overrides other labeling strategies.

This is described here: https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_te

So, this input does not have two labels. It has only the one in the IDREF from the aria-labelledby.

You can verify this working in a browser by taking the checkbox snippet above and inspecting it in the Chrome Accessibility tree panel, in the computed properties panel: the accessible name of the input is "label one," not "label one label two."

[jeeyyy]

@WilcoFiers

Should the checks be altered to cater for overriding by various aria-* attributes based on above comment?

[WilcoFiers]

@kensgists We're looking to make the multiple-label check into its own best practice rule. I do think multiple labels is a poor practice, as it gets confusing, it doesn't get any better from adding aria-labelledby to it. Would you agree that example should be a failure of a best practice?

[jeeyyy]

PR Merged. Closing issue.