E-mail List Archives
Thread: JavaScript
Number of posts in this thread: 7 (In chronological order)
From: Stanzel, Susan - FSA, Kansas City, MO
Date: Tue, Jun 25 2013 2:35PM
Subject: JavaScript
No previous message | Next message →
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.
From: Paul J. Adam
Date: Tue, Jun 25 2013 3:21PM
Subject: Re: JavaScript
← Previous message | Next message →
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 ADDRESS 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.
> > >
From: Stanzel, Susan - FSA, Kansas City, MO
Date: Tue, Jun 25 2013 3:33PM
Subject: Re: JavaScript
← Previous message | Next message →
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
From: Paul J. Adam
Date: Tue, Jun 25 2013 3:37PM
Subject: Re: JavaScript
← Previous message | Next message →
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 ADDRESS 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
>
>
From: Stanzel, Susan - FSA, Kansas City, MO
Date: Tue, Jun 25 2013 8:17PM
Subject: Re: JavaScript
← Previous message | Next message →
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
From: Jim Allan
Date: Wed, Jun 26 2013 7:14AM
Subject: Re: JavaScript
← Previous message | Next message →
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 ADDRESS 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
>
>
From: Stanzel, Susan - FSA, Kansas City, MO
Date: Wed, Jun 26 2013 12:46PM
Subject: Re: continuing JavaScript issue
← Previous message | No next message
I have fixed the label problems. However, the problem still exists. It appears that after I make a state selection from the list of states that JAWS gets confused when I am doing a selection of the county. It appears JavaScript is making changes to the page and JAWS thinks it has the same page and reads the county selection label for each subsequent form field.
:
1. <tr>
2.
3. <td><label for="stateSelection"><font color = "red">*</font>State</label>:</td>
4.
5. <td><select name="stateFsaCode" onchange="resetCountyList();" id="stateSelection"><option value="">-- Select State --</option>
6.
7.
8.
9. <option value="01">Alabama</option>
10.
11. <option value="04">Arizona</option>
12.
13. <option value="05">Arkansas</option>
14.
15. <option value="06">California</option>
16.
17. <option value="12">Florida</option>
18.
19. <option value="13">Georgia</option>
20.
21. <option value="20">Kansas</option>
22.
23. <option value="22">Louisiana</option>
24.
25. <option value="28">Mississippi</option>
26.
27. <option value="29">Missouri</option>
28.
29. <option value="31">Nebraska</option>
30.
31. <option value="35" selected="selected">New Mexico</option>
32.
33. <option value="37">North Carolina</option>
34.
35. <option value="40">Oklahoma</option>
36.
37. <option value="45">South Carolina</option>
38.
39. <option value="47">Tennessee</option>
40.
41. <option value="48">Texas</option>
42.
43. <option value="51">Virginia</option></select></td>
44.
45.
46.
47. <td><label for="countySelection"><font color = "red">*</font>County</label>:</td>
48.
49. <td><select name="countyFsaCode" onfocus="fillCountyList();" id="countySelection"><option value="">-- Select County --</option>
50.
51.
52.
53. <option value="001">Bernalillo</option>
54.
55. <option value="003">Catron</option>
56.
57. <option value="005">Chaves</option>
58.
59. <option value="006">Cibola</option>
60.
61. <option value="007">Colfax</option>
62.
63. <option value="009">Curry</option>
64.
65. <option value="011">De Baca</option>
66.
67. <option value="013">Dona Ana</option>
68.
69. <option value="015">Eddy</option>
70.
71. <option value="017">Grant</option>
72.
73. <option value="019">Guadalupe</option>
74.
75. <option value="021">Harding</option>
76.
77. <option value="023">Hidalgo</option>
78.
79. <option value="025">Lea</option>
80.
81. <option value="027">Lincoln</option>
82.
83. <option value="028">Los Alamos</option>
84.
85. <option value="029">Luna</option>
86.
87. <option value="031">McKinley</option>
88.
89. <option value="033">Mora</option>
90.
91. <option value="035">Otero</option>
92.
93. <option value="037">Quay</option>
94.
95. <option value="039">Rio Arriba</option>
96.
97. <option value="041">Roosevelt</option>
98.
99. <option value="045">San Juan</option>
100.
101. <option value="047">San Miguel</option>
102.
103. <option value="043">Sandoval</option>
104.
105. <option value="049">Santa Fe</option>
106.
107. <option value="051">Sierra</option>
108.
109. <option value="053">Socorro</option>
110.
111. <option value="055">Taos</option>
112.
113. <option value="057">Torrance</option>
114.
115. <option value="059">Union</option>
116.
117. <option value="061">Valencia</option></select></td>
118.
119. </tr>
120.
This is the rendered html from the jsp
This is the JavaScript:
<script type="text/javascript">
var prevStateIndex = document.forms[0].elements['stateFsaCode'].selectedIndex;
function resetCountyList()
{
var selectObj = document.forms[0].elements['countyFsaCode'];
selectObj.selectedIndex = 0;
}
function fillCountyList()
{
if(document.forms[0].elements['stateFsaCode'].selectedIndex == prevStateIndex)
{
return;
}
var selectObj = document.forms[0].elements['countyFsaCode'];
selectObj.options.length = 0;
selectObj.options[0] = new Option(' Loading... ', '');
selectObj.selectedIndex = 0;
document.forms[0].submit();
}
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.