WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: JavaScript

for

From: Jim Allan
Date: Jun 26, 2013 7:14AM

Hi Susie
The problem is in 'for' attribute of the label element and the missing id
on the select elements. Only one word is allowed as the value of the 'for'
attribute. Each label has 2 words "select state" and "select country". The
browser defaults to the first word - "select", and JAWS defaults to reading
the label for the first form control that matches the first word in the
'for" attribute. The result with JAWS is what you hear...the label for the
state select box is being read as the label for the country select box.
Very confusing.

if you can get to the developer, tell him to replace the space between
"select state" and "select country" in the LABEL with an underscore or
remove it all together.

"select_state" and "select_country" or "selectState" and "selectCountry"
That should fix the problem

Also, tell the developer to add an 'id' attribute the SELECT element with
the same value as the 'for' attribute in the LABEL. The LABEL must have a
'for' attribute and the SELECT must have an 'id' attribute. They must have
the same value for the proper LABEL to be associated with the proper SELECT
(or any form control).

Jim


On Tue, Jun 25, 2013 at 9:17 PM, Stanzel, Susan - FSA, Kansas City, MO <
<EMAIL REMOVED> > wrote:

> Well, I have selected the code and I will paste it below in plain text.
> When the state code is selected then I tab to the county codes which are
> for the specific state. I have also selected the JavaScript for filling the
> county list which I will paste below the HTML code.
> <td><font color > "red">*</font>State:</td>
> <td>
> <LABEL for="select
> state"><select name="stateFsaCode" onchange="resetCountyList();"><option
> value="">-- Select State --</option>
>
> <option
> value="01">Alabama</option>
> <option value="04">Arizona</option>
> <option value="05">Arkansas</option>
> <option value="06">California</option>
> <option value="12">Florida</option>
> <option value="13">Georgia</option>
> <option value="20">Kansas</option>
> <option value="22">Louisiana</option>
> <option value="28">Mississippi</option>
> <option value="29">Missouri</option>
> <option value="31">Nebraska</option>
> <option value="35">New Mexico</option>
> <option value="37">North Carolina</option>
> <option value="40">Oklahoma</option>
> <option value="45">South Carolina</option>
> <option value="47">Tennessee</option>
> <option value="48">Texas</option>
> <option value="51">Virginia</option></select></LABEL>
> </td>
> </tr>
>
> <tr>
> <td><font color > "red">*</font>Buying Point Number:</td>
> <td><LABEL for="buying point
> identification"><input type="text" name="buyingPointIdentification"
> maxlength="5" size="5" value="" alt="buying point ID"></LABEL></td>
> <td><font color > "red">*</font>County:</td>
> <td>
> <LABEL for="select
> county"><select name="countyFsaCode" onfocus="fillCountyList();"><option
> value="">-- Select County --</option></select></LABEL>
> </td>
> </tr>
>
> Here is the JavaScript.
> function fillCountyList()
> {
>
> if(document.forms[0].elements['stateFsaCode'].selectedIndex => prevStateIndex)
> {
> return;
> }
>
> var selectObj > document.forms[0].elements['countyFsaCode'];
>
> selectObj.options.length = 0;
> selectObj.selectedIndex = -1;
>
> selectObj.options[0] = new Option(' Loading... ',
> '');
>
> selectObj.disabled = true;
>
> document.forms[0].submit();
> }
>
> Please let me know what else you might need.
>
> Susie Stanzel
>
>