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
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto:
> <EMAIL REMOVED> ] On Behalf Of Paul J. Adam
> Sent: Tuesday, June 25, 2013 4:37 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] JavaScript
>
> Yes, we'd need to at least see the rendered code that's present in the
> DOM. Also if the code changes state based on user input we'd need to see
> code for all states. If you don't have a live example then we'd have to see
> the DOM output for all states likely.
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>
> On Jun 25, 2013, at 4:33 PM, "Stanzel, Susan - FSA, Kansas City, MO" <
> <EMAIL REMOVED> > wrote:
>
> > I don't exactly know what to send. It is a Java Surver Page. Would you
> want me to send the rendered code when viewing the source? It is a JSP with
> JavaScript at the bottom.
> >
> > Susie
> >
> > -----Original Message-----
> > From: <EMAIL REMOVED>
> > [mailto: <EMAIL REMOVED> ] On Behalf Of Paul J.
> > Adam
> > Sent: Tuesday, June 25, 2013 4:21 PM
> > To: WebAIM Discussion List
> > Subject: Re: [WebAIM] JavaScript
> >
> > Do you have a live demo or some sample code for us to examine? This
> sounds like it could be a custom "faux" select UI element and not a native
> select input. These custom selects are usually a problem.
> >
> > Paul J. Adam
> > Accessibility Evangelist
> > www.deque.com
> >
> > On Jun 25, 2013, at 3:35 PM, "Stanzel, Susan - FSA, Kansas City, MO" <
> <EMAIL REMOVED> > wrote:
> >
> >> I work at U.S.D.A. I am testing a page with JavaScript which is not
> working. It is a combo box. The other boxes on the page seem to work. The
> author did reading and this is what he found:
> >>
> >> From the reading that I did on this issue, it appears that the way that
> JAWS, and other screen readers, work is that they create a virtual page.
> When JavaScript is used to change the visual page, it may not change the
> virtual page; JAWS doesn't know anything changed or has an incomplete
> understanding of what changed.
> >>
> >> This what happens:
> >>
> >> I get a combo box of states. I then pick the state and tab to the
> county selection list which is populated with the specific counties for
> that state. I pick a county and JAWS continues to say county even though I
> have gone on. Until I sat with a sighted person I didn't even know I had
> progressed in the form. Today I have discovered if I hit refresh with
> insert plus escape the page is refreshed and reading and filling out the
> form can be accomplished. I am sure there is some JavaScript to force JAWS
> to understand what is going on.
> >>
> >>
> >>
> >>
> >>
> >>
> >>
> >> 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.
> >> > >> > >> list messages to <EMAIL REMOVED>
> >
> > > > > > list messages to <EMAIL REMOVED>
> >
> >
> > > > > > list messages to <EMAIL REMOVED>
>
> > > messages to <EMAIL REMOVED>
>
>
> > > >



--
Jim Allan, Accessibility Coordinator & Webmaster
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964