WAVE extension not detecting label + aria-labelledby

Issue

I have an input field with a two part label, specified by aria-labelledby:

<p id="label2">Part 2</p>
<label id="label1">Part 1</label>
<input type="text" aria-labelledby="label1 label2">

When I run the WAVE extension (version 1.0.9) in Chrome, the <label> is flagged as orphaned, but the input itself is seen as properly labeled/described.

Am I wrong to be using a <label> there since there won't be a for attribute, or is the tool just having trouble connecting the IDs in the aria-labelledby to the label?

Solution

While there is no conformance issue with your code, the control has a visible label and its accessible name is a concatenation of the 2 visible labels, there is an accessibility/usability improvement that could be made by making proper use of the label element. If you associate label element with the input using for/id the label becomes clickable and focus is moved to the input when the label is clicked, thus increasing the clickable area to focus the control. A side effect being that WAVE should no longer complain.

<p id="label2a">Part 2</p> 
<label id="label1a" for="t1">Part 1</label>   
<input type="text" aria-labelledby="label1a label2a" id="t1">

test case

Answered By - Steve Faulkner