False Positive: Multiple <label>s marked as errors

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.

[jeeyyy]

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

[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)