False Positive: Multiple <label>s marked as errors

[aardrian]

Expectation: For a field with with multiple <label> elements, Axe flags it as a warning (using should language).

Actual: When Axe encounters a field with with multiple <label> elements, it flags this as an error (using must language).

Motivation: Because it generates false positives.

To Reproduce:

1. Go to https://s.codepen.io/aardrian/debug/WVJvjM
2. Inspect the page with Axe extension.
3. View the Violations found column.

Sample Code:

<form>
  <label for="a">ham</label>
  <input type="text" id="a">
  <label for="a">bone</label>
</form>

Why Axe Does This:
The Deque page explaining this rule confirms this is considered a failure, suggesting this is not a software bug:

• Statement: "Form fields do not have duplicate labels"
• Statement: "Ensure that only one label is assigned to a form field."
• The following compliance data is included on the page:

Requirement(s)

• WCAG 2.1 (A): MUST
• WCAG 2.0 (A): MUST
• Section 508: MUST

WCAG Success Criteria

• 3.3.2 Labels or Instructions

Section 508 Guidelines

• 1194.22 (n) Information required to complete electronic forms online

Why I Think Axe Should Not:

• Section 508 1194.22(n) does not explicitly forbid multiple <label>s.
• Nothing in the <label>techniques for 1.1.1, 1.3.1, 3.3.2, nor 4.1.2 (H44) forbids multiple <label>s.
• Multiple <label>s is valid HTML (tested by pasting the code into the Nu HTML Validator).
• HTML Accessibility API Mappings 1.0 explicitly references how to address multiple <label>s (concatenate by DOM order) suggesting these are valid.
• While https://scottaohara.github.io/tests/html-inputs/double-label.html shows us that some AT combinations choke on this, AT bugs are not WCAG failures — barring those cases where all AT decide not to implement something as specc'd, in which case not actually a bug so still not a failure.

Testing tool comparison:
The three tools I see most in use all flag this as an error.

• Axe: must implies error: "Form field must not have multiple label elements" (as 3.3.2),
• WAVE: Error: "A form control has more than one label associated with it." (as 1.1.1, 1.3.1, 2.4.6, 3.3.2),
• ARC: "Error: multiple form labels used".

Alternate Outcome:
You tell me I am a wrong wrongerson and tell me to bugger off.

[straker]

Thanks for all the information. We've decided to mark the rule as "needs review" instead of failures since if all the needed information is in the first label it should be fine. However, we still think it's a wcag failure.

@jeankaplansky we also agree that the docs should be updated to use SHOULD instead of MUST for the wcag requirements.

[jeankaplansky]

See rule help ID: form-field-multiple-labels

[jeankaplansky]

Nothing to update after all.

[chandana7393]

Tested, working as expected

Tested Environment:.
Axe-coconut - 4.0.0.29404v
Chrome - 77.0.3865.120v
OS - Windows 10 64 bit.

[patrickhulce]

Hi there! Quick question on the documentation around this issue. In #1759 (comment) it was stated that the docs should change from MUST to SHOULD, currently I'm seeing MUST in the Section 508 in the 3.4 docs, but #1759 (comment) stated there was nothing to update. Am I missing something?

Is it the position of axe-core that this is not a failure/could be flaky and is a SHOULD across the board? I ask because we're discussing how to handle this in Lighthouse at the moment now that it will never fail. Our current inclination is to remove it from Lighthouse entirely if it's a "we're not sure" sort of issue, does this line up with your expectations?

[AutoSponge]

@aardrian The original issue #689 had this helpful table in the comments, https://codepen.io/straker/pen/PvqONy. You can have multiple labels but there are only a few techniques that will work consistently across browser/AT combinations. In looking up that table I noticed this thread, so I wanted to cross-ref them for my future self.

[straker]

Sorry @patrickhulce, I must have missed your comment. Reopening the ticket and we'll update the docs to use should (thanks @AutoSponge for commenting so I found this again)

[jeeyyy]

Relevant docs has been updated - https://dequeuniversity.com/rules/axe/3.5/form-field-multiple-labels