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">
Answered By - Steve Faulkner
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.