WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form field with Select options

for

From: Shane Anderson
Date: Nov 6, 2017 12:43PM

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