E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: form labels vs label in first option tag?

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

From: Angela French
Date: Wed, Oct 31 2012 12:47PM
Subject: form labels vs label in first option tag?
No previous message | Next message →

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 ADDRESS REMOVED =
http://www.checkoutacollege.com/

From: Paul J. Adam
Date: Wed, Oct 31 2012 2:36PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

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 ADDRESS REMOVED =
www.PaulJAdam.com
@pauljadam on Twitter

On Oct 31, 2012, at 1:47 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> http://www.checkoutacollege.com/
>
> > >

From: Angela French
Date: Wed, Oct 31 2012 2:42PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

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 ADDRESS REMOVED =
>www.PaulJAdam.com
>@pauljadam on Twitter
>
>On Oct 31, 2012, at 1:47 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> http://www.checkoutacollege.com/
>>
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>
>>>messages to = EMAIL ADDRESS REMOVED =

From: Bryan Garaventa
Date: Wed, Oct 31 2012 2:58PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

If the form field doesn't have an explicit label, the screen reader may try
to use the nearest text instead, which isn't reliable because it may not be
the intended label for the field, such as if the select is within a data
table. This is why all form fields should have explicit labels as a general
practice.

Instead, either of the following will work reliably:

<select title="Label Text">

<label for="sel"> Label Text </label>
<select id="sel">

Or aria-label or aria-labelledby can be used to simulate the same behavior.

----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, October 31, 2012 1:42 PM
Subject: Re: [WebAIM] form labels vs label in first option tag?

> 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 ADDRESS REMOVED =
>>www.PaulJAdam.com
>>@pauljadam on Twitter
>>
>>On Oct 31, 2012, at 1:47 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>> http://www.checkoutacollege.com/
>>>
>>> >>> >>> list messages to = EMAIL ADDRESS REMOVED =
>>
>>>>>>messages to = EMAIL ADDRESS REMOVED =
> > >

From: Angela French
Date: Wed, Oct 31 2012 3:04PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

If aria-label is used for AT devices and <option value="car choice">Car Choice</option> is used for sighted users (instead of an explicit label), does the <option value="car choice">Car Choice</option> create any frustration or slow down for the AT user? I'm assuming they hear "car choice" twice.

I am asking these questions in the context of using the Bootstrap responsive design framework. This use of <option value="car choice">Car Choice</option> seems to be a popular way of designing forms these days.

Angela French

>Subject: Re: [WebAIM] form labels vs label in first option tag?
>
>If the form field doesn't have an explicit label, the screen reader may try to
>use the nearest text instead, which isn't reliable because it may not be the
>intended label for the field, such as if the select is within a data table. This is
>why all form fields should have explicit labels as a general practice.
>
>Instead, either of the following will work reliably:
>
><select title="Label Text">
>
><label for="sel"> Label Text </label>
><select id="sel">
>
>Or aria-label or aria-labelledby can be used to simulate the same behavior.
>
>
>
>----- Original Message -----
>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>Sent: Wednesday, October 31, 2012 1:42 PM
>Subject: Re: [WebAIM] form labels vs label in first option tag?
>
>
>> 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 ADDRESS REMOVED =
>>>www.PaulJAdam.com
>>>@pauljadam on Twitter
>>>
>>>On Oct 31, 2012, at 1:47 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>> http://www.checkoutacollege.com/
>>>>
>>>> >>>> >>>> list messages to = EMAIL ADDRESS REMOVED =
>>>
>>>>>>>>>messages to = EMAIL ADDRESS REMOVED =
>> >> >> >
>>>

From: Ryan E. Benson
Date: Wed, Oct 31 2012 3:13PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

Are you saying?
<select aria-label="Car Choice">
<option value="car choice">Car Choice</option>
</select>
?
This will announce car choice twice.

--
Ryan E. Benson

On Wed, Oct 31, 2012 at 5:04 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> If aria-label is used for AT devices and <option value="car choice">Car Choice</option> is used for sighted users (instead of an explicit label), does the <option value="car choice">Car Choice</option> create any frustration or slow down for the AT user? I'm assuming they hear "car choice" twice.
>
> I am asking these questions in the context of using the Bootstrap responsive design framework. This use of <option value="car choice">Car Choice</option> seems to be a popular way of designing forms these days.
>
> Angela French
>
>
>
>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>
>>If the form field doesn't have an explicit label, the screen reader may try to
>>use the nearest text instead, which isn't reliable because it may not be the
>>intended label for the field, such as if the select is within a data table. This is
>>why all form fields should have explicit labels as a general practice.
>>
>>Instead, either of the following will work reliably:
>>
>><select title="Label Text">
>>
>><label for="sel"> Label Text </label>
>><select id="sel">
>>
>>Or aria-label or aria-labelledby can be used to simulate the same behavior.
>>
>>
>>
>>----- Original Message -----
>>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>>To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>>Sent: Wednesday, October 31, 2012 1:42 PM
>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>
>>
>>> 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 ADDRESS REMOVED =
>>>>www.PaulJAdam.com
>>>>@pauljadam on Twitter
>>>>
>>>>On Oct 31, 2012, at 1:47 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>>> http://www.checkoutacollege.com/
>>>>>
>>>>> >>>>> >>>>> list messages to = EMAIL ADDRESS REMOVED =
>>>>
>>>>>>>>>>>>messages to = EMAIL ADDRESS REMOVED =
>>> >>> >>> >>
>>>>>>> > >

From: Bryan Garaventa
Date: Wed, Oct 31 2012 3:17PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

I'd recommend "Choose" instead, since this will be combined with the first
option.

About it being popular to not label form fields properly these days, that
brings up a whole new topic I think.

----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, October 31, 2012 2:04 PM
Subject: Re: [WebAIM] form labels vs label in first option tag?

> If aria-label is used for AT devices and <option value="car choice">Car
> Choice</option> is used for sighted users (instead of an explicit label),
> does the <option value="car choice">Car Choice</option> create any
> frustration or slow down for the AT user? I'm assuming they hear "car
> choice" twice.
>
> I am asking these questions in the context of using the Bootstrap
> responsive design framework. This use of <option value="car choice">Car
> Choice</option> seems to be a popular way of designing forms these
> days.
>
> Angela French
>
>
>
>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>
>>If the form field doesn't have an explicit label, the screen reader may
>>try to
>>use the nearest text instead, which isn't reliable because it may not be
>>the
>>intended label for the field, such as if the select is within a data
>>table. This is
>>why all form fields should have explicit labels as a general practice.
>>
>>Instead, either of the following will work reliably:
>>
>><select title="Label Text">
>>
>><label for="sel"> Label Text </label>
>><select id="sel">
>>
>>Or aria-label or aria-labelledby can be used to simulate the same
>>behavior.
>>
>>
>>
>>----- Original Message -----
>>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>>To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>>Sent: Wednesday, October 31, 2012 1:42 PM
>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>
>>
>>> 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 ADDRESS REMOVED =
>>>>www.PaulJAdam.com
>>>>@pauljadam on Twitter
>>>>
>>>>On Oct 31, 2012, at 1:47 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>>> http://www.checkoutacollege.com/
>>>>>
>>>>> >>>>> >>>>> list messages to = EMAIL ADDRESS REMOVED =
>>>>
>>>>>>>>>>>>messages to = EMAIL ADDRESS REMOVED =
>>> >>> >>> >>
>>>>>>> > >

From: Ryan E. Benson
Date: Wed, Oct 31 2012 3:21PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

> About it being popular to not label form fields properly these days, that
> brings up a whole new topic I think.
I concur. What happens on popular sites does not always mean it is a
good practice.

--
Ryan E. Benson

On Wed, Oct 31, 2012 at 5:17 PM, Bryan Garaventa
< = EMAIL ADDRESS REMOVED = > wrote:
> I'd recommend "Choose" instead, since this will be combined with the first
> option.
>
> About it being popular to not label form fields properly these days, that
> brings up a whole new topic I think.
>
> ----- Original Message -----
> From: "Angela French" < = EMAIL ADDRESS REMOVED = >
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
> Sent: Wednesday, October 31, 2012 2:04 PM
> Subject: Re: [WebAIM] form labels vs label in first option tag?
>
>
>> If aria-label is used for AT devices and <option value="car choice">Car
>> Choice</option> is used for sighted users (instead of an explicit label),
>> does the <option value="car choice">Car Choice</option> create any
>> frustration or slow down for the AT user? I'm assuming they hear "car
>> choice" twice.
>>
>> I am asking these questions in the context of using the Bootstrap
>> responsive design framework. This use of <option value="car choice">Car
>> Choice</option> seems to be a popular way of designing forms these
>> days.
>>
>> Angela French
>>
>>
>>
>>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>>
>>>If the form field doesn't have an explicit label, the screen reader may
>>>try to
>>>use the nearest text instead, which isn't reliable because it may not be
>>>the
>>>intended label for the field, such as if the select is within a data
>>>table. This is
>>>why all form fields should have explicit labels as a general practice.
>>>
>>>Instead, either of the following will work reliably:
>>>
>>><select title="Label Text">
>>>
>>><label for="sel"> Label Text </label>
>>><select id="sel">
>>>
>>>Or aria-label or aria-labelledby can be used to simulate the same
>>>behavior.
>>>
>>>
>>>
>>>----- Original Message -----
>>>From: "Angela French" < = EMAIL ADDRESS REMOVED = >
>>>To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
>>>Sent: Wednesday, October 31, 2012 1:42 PM
>>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>>
>>>
>>>> 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 ADDRESS REMOVED =
>>>>>www.PaulJAdam.com
>>>>>@pauljadam on Twitter
>>>>>
>>>>>On Oct 31, 2012, at 1:47 PM, Angela French < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>>>>>> http://www.checkoutacollege.com/
>>>>>>
>>>>>> >>>>>> >>>>>> list messages to = EMAIL ADDRESS REMOVED =
>>>>>
>>>>>>>>>>>>>>>messages to = EMAIL ADDRESS REMOVED =
>>>> >>>> >>>> >>>
>>>>>>>>>>> >> >> >
> > >

From: Angela French
Date: Wed, Oct 31 2012 3:32PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

"Choose" without a label doesn't allow the sighted user to know the nature of what they are choosing.
Here is a similar example on amazon.com, though with a text field search box: http://www.amazon.com/New-Used-Textbooks-Books/b/ref=sv_b_6?ie=UTF8&;nodeF5600 . How does a screen reader user know what is supposed to be entered into the text field before entering the field?

Angela French

>

From: Bryan Garaventa
Date: Wed, Oct 31 2012 3:56PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

I was referring to aria-label="Choose", which is invisible to sighted users.

This gets combined with the first Option element in the Select
automatically.

----- Original Message -----
From: "Angela French" < = EMAIL ADDRESS REMOVED = >
To: "'WebAIM Discussion List'" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, October 31, 2012 2:32 PM
Subject: Re: [WebAIM] form labels vs label in first option tag?

> "Choose" without a label doesn't allow the sighted user to know the nature
> of what they are choosing.
> Here is a similar example on amazon.com, though with a text field search
> box:
> http://www.amazon.com/New-Used-Textbooks-Books/b/ref=sv_b_6?ie=UTF8&;nodeF5600 .
> How does a screen reader user know what is supposed to be entered into the
> text field before entering the field?
>
> Angela French
>
>
>
>>

From: Ryan E. Benson
Date: Wed, Oct 31 2012 3:57PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

Since they put a predefined value in the textbox, it will be announced
as if the person typed that into the field. If the field cleared as
you tabbed into it, like it does when you click into it, it would not
be read. However - I think JAWS emulates a click as you tab in, or it
does at times.
--
Ryan E. Benson

On Wed, Oct 31, 2012 at 5:32 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> "Choose" without a label doesn't allow the sighted user to know the nature of what they are choosing.
> Here is a similar example on amazon.com, though with a text field search box: http://www.amazon.com/New-Used-Textbooks-Books/b/ref=sv_b_6?ie=UTF8&;nodeF5600 . How does a screen reader user know what is supposed to be entered into the text field before entering the field?
>
> Angela French
>
>
>
>>

From: Bryan Garaventa
Date: Wed, Oct 31 2012 4:13PM
Subject: Re: form labels vs label in first option tag?
← Previous message | Next message →

It's not reliable to depend on the value of a text field to act as it's
label, especially when 'focus' is used to clear the field in preparation for
typing.

NVDA for example automatically triggers the 'focus' handler for any element
it comes across when arrowing down the page.

----- Original Message -----
From: "Ryan E. Benson" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Wednesday, October 31, 2012 2:57 PM
Subject: Re: [WebAIM] form labels vs label in first option tag?

> Since they put a predefined value in the textbox, it will be announced
> as if the person typed that into the field. If the field cleared as
> you tabbed into it, like it does when you click into it, it would not
> be read. However - I think JAWS emulates a click as you tab in, or it
> does at times.
> --
> Ryan E. Benson
>
>
> On Wed, Oct 31, 2012 at 5:32 PM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
>> "Choose" without a label doesn't allow the sighted user to know the
>> nature of what they are choosing.
>> Here is a similar example on amazon.com, though with a text field search
>> box:
>> http://www.amazon.com/New-Used-Textbooks-Books/b/ref=sv_b_6?ie=UTF8&;nodeF5600 .
>> How does a screen reader user know what is supposed to be entered into
>> the text field before entering the field?
>>
>> Angela French
>>
>>
>>
>>>

From: Angela French
Date: Wed, Oct 31 2012 4:18PM
Subject: Re: form labels vs label in first option tag?
← Previous message | No next message

The text field example I found was a poor one. I need to find a select list.

>