WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form labels vs label in first option tag?

for

From: Angela French
Date: Oct 31, 2012 2:42PM

Paul,
So what happens when coded as below? Does this method cause any confusion or slow a screen reader user down?

<select>
<option value="car choice">Car choice</li>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Angela French

>Subject: Re: [WebAIM] form labels vs label in first option tag?
>
>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/
>>
>> >> >> list messages to <EMAIL REMOVED>
>
>>>messages to <EMAIL REMOVED>