WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form labels vs label in first option tag?

for

From: Paul J. Adam
Date: Oct 31, 2012 2:36PM

I always recommend an explicit label for every single form field. That's pretty easy to remember and it's bulletproof.

VoiceOver will guess the label if you don't specifically set one.

<!DOCTYPE html>
<html>
<body>
blah
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</body>
</html>
Here VO guesses that the label is "blah".

<!DOCTYPE html>
<html>
<body>
blah
<label for=sel>Car Choice</label>
<select id=sel>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</body>
</html>
Here there is no guess. Label is Car Choice.

<!DOCTYPE html>
<html>
<body>
blah
<select aria-label="Car Choice">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</body>
</html>
aria-label also prevents guessing in VO

<!DOCTYPE html>
<html>
<body>
blah
<select title="Car Choice">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

</body>
</html>
Title kind of works but there is a ~7 second "Help Tag" (OS X) or ~3 second "Hint" (iOS) delay before spoken by VO. User can manually speak Help Tag on OS X with VO+SHIFT+H. Problem with this example with the title attribute is that VO still guesses that "blah" is the label.

The guessing behavior is different in JAWS. Thankfully, NVDA never guesses which is why it's the best for accessibility testing!

Paul J. Adam
Accessibility Evangelist
Deque Systems
<EMAIL REMOVED>
www.PaulJAdam.com
@pauljadam on Twitter

On Oct 31, 2012, at 1:47 PM, Angela French < <EMAIL REMOVED> > wrote:

> Hello,
> I would be interested in hearing various opinions regarding the accessibility of using the label tag to identify form elements versus using an identifier as the first option in a select list.
>
> Thank you for your considered opinions.
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> <EMAIL REMOVED>
> http://www.checkoutacollege.com/
>
> > >