WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: combo box coding

for

From: Sean Curtis
Date: Nov 14, 2014 1:57PM

Hi Susan,

Building it so that the HTML is right will make this "just work" for screen readers. You can have two <select> components with the same name on a page as long as they are in different <form> elements. You can differentiate them by adding an ID attribute to each one, and then adding a <label> for each that had the "for" attribute set to the ID of the field.

Simplified example so you get the gist:

<form>
<label for="shirt-color">Shirt color</label>
<select name="color" id="shirt-color">
<!-- options here -->
</select>
</form>

<form>
<label for="shoe-color">Shoe color</label>
<select name="color" id="shoe-color">
<!-- options here -->
</select>
</form>

The URL each form posts to would handle the data differently, but both would receive "color=red" or something. The data posted doesn't mention shirts or shoes, the location the post is sent to would be specific to one or the other though.

Hope I've understood the problem correctly.

Cheers,

Sean

> On 15 Nov 2014, at 6:15 am, Stanzel, Susan - FSA, Kansas City, MO < <EMAIL REMOVED> > wrote:
>
> Hi Everyone,
>
> I know this is a simple question. I am testing an application with two identicle combo boxes on it. When I do a list of them they look the same to me. They are supposed to look the same on the page, but I think they should have some mark up so I can tell the difference. It is not written in html5.
>
> Susie Stanzel
>
>
>
>
> This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email immediately.
> > >