WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Can aria-labelledby refer to a label?

for

Number of posts in this thread: 3 (In chronological order)

From: Birkir R. Gunnarsson
Date: Tue, Jul 02 2013 1:34PM
Subject: Can aria-labelledby refer to a label?
No previous message | Next message →

Greetings gang.

I am looking at a webpage and came across an interesting problem.
Imagine there are two radio buttons.
Each button is properly labeled.
Whichever option you choose, you are required to enter additional text
into an input field.
The label of the radio button also works perfectly as the label for
the input field.
Now, what if we assigned the label for each radio button its own id.
<label id="foo" for "bar">Some text</label>
<input type="radio" id="bar" value="something">
.. and associate the same label to the text input field that has to be
used if user selects this button
<input type="text" value="" size="20" aria-labelledby="foo">

Just curious if anyone has tried or used this approach, or, if for
some reason, it is safer to create a label separately for the input
text field.
(I know aria-labelledby is not yet universally supported across A.T.s
which is a problem. I also have never assigned a unique ID to a label,
but my Googling indicates that is not a problem).

Cheers
-B

Birkir Gunnarsson
Accessibility subject matter expert | Deque Systems

From: Patrick H. Lauke
Date: Tue, Jul 02 2013 1:40PM
Subject: Re: Can aria-labelledby refer to a label?
← Previous message | Next message →

On 02/07/2013 20:34, Birkir R. Gunnarsson wrote:

> Now, what if we assigned the label for each radio button its own id.
> <label id="foo" for "bar">Some text</label>
> <input type="radio" id="bar" value="something">
> .. and associate the same label to the text input field that has to be
> used if user selects this button
> <input type="text" value="" size="20" aria-labelledby="foo">
>
> Just curious if anyone has tried or used this approach, or, if for
> some reason, it is safer to create a label separately for the input
> text field.
> (I know aria-labelledby is not yet universally supported across A.T.s
> which is a problem. I also have never assigned a unique ID to a label,
> but my Googling indicates that is not a problem).

Beyond support in older ATs, there's no reason why this shouldn't be
supported. In fact, I seem to remember testing something very similar a
few weeks ago using VoiceOver/iOS and it worked like a charm.

P
--
Patrick H. Lauke

From: Jared Smith
Date: Tue, Jul 02 2013 2:50PM
Subject: Re: Can aria-labelledby refer to a label?
← Previous message | No next message

This should work just fine. The only 'gotcha' you need to be aware of
is when an element has an associated label element AND an
aria-labelledby attribute. In this case, the ARIA label will be read
and the associated label ignored.

This is usually the case when you have native HTML roles or
accessibility values and ARIA roles/values - ARIA will always override
the native semantics and accessibility. I've seen cases where someone
used a native <label> element for a primary label and also
aria-labelledby (or aria-label) to reference a secondary label or
instructions. This just results in the primary label being overridden
by the secondary label. The solution - keep the <label> as a fall-back
for older technologies, but have aria-labelledby reference both the
primary and secondary labels (or better, use aria-describedby for the
secondary label).

Jared