WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: combo box coding

for

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

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Fri, Nov 14 2014 12:15PM
Subject: combo box coding
No previous message | Next message →

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.

From: Don Mauck
Date: Fri, Nov 14 2014 12:30PM
Subject: Re: combo box coding
← Previous message | Next message →

Just curious, do both have the same name for the combo boxes?

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Fri, Nov 14 2014 12:57PM
Subject: Re: combo box coding
← Previous message | Next message →

The author is writing a JSP which gives rendered code. I don't believe from just looking through all these lines that either has a name. I am not an html expert. If each had a name= field would that give me a difference?

Susie

From: Don Mauck
Date: Fri, Nov 14 2014 1:01PM
Subject: Re: combo box coding
← Previous message | Next message →

I think so, I'm not the biggest HTML expert, however, they do need to have labels.

From: Don Mauck
Date: Fri, Nov 14 2014 1:30PM
Subject: Re: combo box coding
← Previous message | Next message →

For some reason my WCAG2.0 page keeps crashing but there are of course standards in 2.4.6 if my memory is working, (grin).

From: Sean Curtis
Date: Fri, Nov 14 2014 1:57PM
Subject: Re: combo box coding
← Previous message | Next message →

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

From: Bourne, Sarah (ITD)
Date: Fri, Nov 14 2014 2:00PM
Subject: Re: combo box coding
← Previous message | Next message →

WebAIM (as always!) has great information on how a combo box should be coded. They call it a "select menu" and their guidance is here:
http://webaim.org/techniques/forms/controls#select

The text inside the LABEL tags is what identifies what the combo box is, and it should be different than any other combo boxes on the page. If there is no visible text, because the designer assumes (sighted) people will be able to figure it out in some other way, the developer can use CSS to hide that text from visual users. Here are some techniques for doing that:
http://webaim.org/techniques/css/invisiblecontent/

If you have the WebAIM WAVE toolbar (http://wave.webaim.org/toolbar) or Chrome extension (http://wave.webaim.org/extension) installed, it will tell you if the label is missing - just in case it's been hidden already. (Although I doubt it - it should show up in your list, depending on what tool you are using to create that list.)

sb
Sarah E. Bourne
Director of IT Accessibility
Massachusetts Office of Information Technology
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/itd

From: Birkir R. Gunnarsson
Date: Fri, Nov 14 2014 2:29PM
Subject: Re: combo box coding
← Previous message | No next message

If the label is present but not tied to the select it would be a 1.3.1
issue (A) or 2.4.6 (AA).
If there is no label whatsoever, it would fall under 3.2.2
It is always hard to say 100% unless we see the page


On 11/14/14, Bourne, Sarah (ITD) < = EMAIL ADDRESS REMOVED = > wrote:
> WebAIM (as always!) has great information on how a combo box should be
> coded. They call it a "select menu" and their guidance is here:
> http://webaim.org/techniques/forms/controls#select
>
> The text inside the LABEL tags is what identifies what the combo box is, and
> it should be different than any other combo boxes on the page. If there is
> no visible text, because the designer assumes (sighted) people will be able
> to figure it out in some other way, the developer can use CSS to hide that
> text from visual users. Here are some techniques for doing that:
> http://webaim.org/techniques/css/invisiblecontent/
>
> If you have the WebAIM WAVE toolbar (http://wave.webaim.org/toolbar) or
> Chrome extension (http://wave.webaim.org/extension) installed, it will tell
> you if the label is missing - just in case it's been hidden already.
> (Although I doubt it - it should show up in your list, depending on what
> tool you are using to create that list.)
>
> sb
> Sarah E. Bourne
> Director of IT Accessibility
> Massachusetts Office of Information Technology
> Commonwealth of Massachusetts
> 1 Ashburton Pl. rm 1601 Boston MA 02108
> 617-626-4502
> = EMAIL ADDRESS REMOVED =
> http://www.mass.gov/itd
> > > >


--
Work hard. Have fun. Make history.