WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form labels vs label in first option tag?

for

From: Bryan Garaventa
Date: Oct 31, 2012 3:56PM

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 REMOVED> >
To: "'WebAIM Discussion List'" < <EMAIL 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
>
>
>
>>-----Original Message-----
>>From: <EMAIL REMOVED> [mailto:webaim-forum-
>> <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
>>Sent: Wednesday, October 31, 2012 2:18 PM
>>To: WebAIM Discussion List
>>Subject: Re: [WebAIM] form labels vs label in first option tag?
>>
>>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 REMOVED> >
>>To: "'WebAIM Discussion List'" < <EMAIL 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 REMOVED> >
>>>>To: "'WebAIM Discussion List'" < <EMAIL 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 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>
>>>>>>
>>>>>>>>>>>>>>>>>>list
>>>>>>messages to <EMAIL REMOVED>
>>>>> >>>>> >>>>> >>>>
>>>>>>>>>>>>>>> >>> >>> >>
>>>>>>> > >