Welcome to WebmasterWorld Guest from

Forum Moderators: ergophobe

Message Too Old, No Replies

Should I use aria-labelledby in forms?

4:00 pm on Feb 18, 2012 (gmt 0)

I am reading the WAI-ARIA spec and trying to make a test project with it.
There are some examples in the spec talking about form-type elements like checkboxes, but the spec uses this term to indicate any element that can function as a checkbox. In other words, it talks about checkboxes in general and not specifically about the element input[type=checkbox]
Which leads to my question, which of the following is better:

<label for='myCheck'>Just a checkbox</label>
<input id='myCheck' type='checkbox'>


<label id='lblCheck' for='myCheck'>Just a checkbox</label>
<input id='myCheck' type='checkbox' aria-labelledby='lblCheck'>
9:13 pm on Feb 24, 2012 (gmt 0)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month


I'm sorry, I'm more focussed on the usability end and not up on a lot of the WAI.
9:51 pm on Feb 24, 2012 (gmt 0)

Thanks for the 'bump', I wanted to reply to my own question but hadn't had the time yet.
I managed to find a (I think rather obscure) note in the aria practices document (http://www.w3.org/TR/wai-aria-practices/#relations_labeling) which states:

It should be noted that (X)HTML provides a <label for> element which you can use to label form controls. For all visual objects, including (X)HTML form elements, you should use the WAI-ARIA aria-labelledby property for labeling.

So if I understand this correctly, aria-labelledby should be used for all INPUT-elements?
What this does not say however is if this makes the for-attribute redundant? WCAG places some heavy emphasis on the for-attribute so I guess we need to use both? Unless I completely misunderstand this note.
11:39 pm on Feb 25, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

No need to use aria-labelledby here. The <label for=> relation labels the input effectively for everyone so adding aria-labelledby would just be accessibility theatre.

See this blog by a Mozilla accessibility QA engineer for an example of where aria-labelledby could be used [marcozehe.de...]

As a rough rule of thumb do not use ARIA at all unless you 1. need to because normal HTML semantics do not cover the usage scenario 2. are an expert and 3. are going to test in AT.

Despite WAI-ARIA 1.0 currently being a W3C candidate Recommendation, even the W3C Working Groups involved can't agree on how some parts of it work/should work. Expect a rapid release of WAI-ARIA 1.1 :)
12:04 am on Feb 26, 2012 (gmt 0)

[...]so adding aria-labelledby would just be accessibility theatre.

That is what I thought, but I cannot find anything definitive on that. In fact, the only 'authoritative' text I was able to find was the above mentioned quote from the w3c site itself which seems to suggest that both <label for> and <input aria-labelledby> need to be used. But like you say, it seems idiotic to do so.

I am not asking because of a production project but because I am trying to catch up on accessibility. So it is a study project.
So far it seems to me a lot of aria stuff is not directly related to 'normal' webpages (more towards apps). Some of it seems reasonable though, like aria-describedby. But other stuff seems superfluous like aria-labelledby, aria-checked, etc. since there are other constructs for that.
I think you are right and we better wait for 1.1, lol.
10:13 pm on Feb 27, 2012 (gmt 0)

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Great - thanks for the updates and discussion guys!

Featured Threads

Hot Threads This Week

Hot Threads This Month