E-mail List Archives

Search E-mail List Archives for

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

From: Joseph Sherman
Date: Mon, Nov 06 2017 11:03AM
Subject: Form field with Select options
No previous message | Next message →

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

From: Shane Anderson
Date: Mon, Nov 06 2017 12:43PM
Subject: Re: Form field with Select options
← Previous message | Next message →

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 ADDRESS 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
>
> > > > >

From: Birkir R. Gunnarsson
Date: Thu, Nov 09 2017 7:49PM
Subject: Re: Form field with Select options
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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.