WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form field with Select options

for

From: Birkir R. Gunnarsson
Date: Nov 9, 2017 7:49PM

According to the Accessible name calculation description in ARIA 1.1
the following should work:

<label for="addr">Find all decent chicken wings within <select
aria-label="Radius to locate good wings">...</select> of your
address</label>

Basically, if the label contains a dropdown, use aria-label to give it
its own accessible name. The location should be enough to make its
purpose clear to those who can see it.
The label announcement for the addr input field should include the
value of the currently selected option within the dropdown.




On 11/6/17, Shane Anderson < <EMAIL REMOVED> > wrote:
> A possible solution might look something like this:
>
> <div role="group" aria-labelledby="label">
> <label id="label" for="select">Name</label>: <select id="select"> <input
> aria-labelledby="label">
> </div>
>
> However, this is clunky (as is the design pattern). What you really need
> usability review. There may be a better solution.
>
> Regards
> Shane Anderson
>
>
> On Mon, Nov 6, 2017 at 1:03 PM, Joseph Sherman < <EMAIL REMOVED> >
> wrote:
>
>> What is the best and simplest way to code a form field like the following:
>>
>> <label>Name<label>: <select box> <Input Name>
>>
>> Where the select box has options of "Begins with, contains, equals". We
>> use the <for/id> method to link the label Name with the Name input, but
>> the
>> select box has no label.
>>
>> Can you associate a Label with two Form Fields? Adding an
>> Aria-Label="Name" on the select box seems to work and is simple, but I'm
>> not sure if it's the best way.
>>
>> Thanks.
>>
>>
>> Joseph
>>
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.