【发布时间】：2016-05-16 23:38:00
【问题描述】：
我有一个使用 ZK 框架编写的 Web 应用程序。我目前正在测试这个应用程序是否符合美国残疾人法案。我正在使用 JAWS 版本 17 在 Firefox、Chrome、Safari 和 Internet Explorer 中进行屏幕阅读器测试。
当使用 Internet Explorer 11 的用户导航到应用程序的最后（第 4 个）页面时，JAWS 先读取一行（红色圆圈），然后跳回页面顶部并从从上到下。
应用程序的其余部分从上到下、从左到右读取，这是所需的效果。
如果我删除带圆圈的行，JAWS 首先读取第 3 行，然后移回页面顶部。我尝试在第二个标签周围的源代码中添加一些额外的换行符，但没有效果。
您知道此页面出了什么问题并导致这种情况发生吗？或者有什么方法可以强制 JAWS 从上到下阅读页面？
这是有问题的 .zul 文件：
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/contents/theme/layout/template.zul"?>
<?page id="ConfirmRequest" title="Leave Application" contentType="text/html;charset=UTF-8"?>
<?root-attributes lang="en"?>
<?link href="contents/theme/css/main.css" rel="stylesheet" type="text/css"?>
<?script src="contents/scripts/utility.js" ?>
<?component name="caption" extends="caption" sclass="scaption"?>
<?component name="label" extends="label" sclass="slabel"?>
<?component name="elabel" extends="label" sclass="slabel elabel"?>
<?component name="textbox" extends="textbox" sclass="stextbox"?>
<zk xmlns:n="native" xmlns:ca="client/attribute"
xmlns:w="http://www.zkoss.org/2005/zk/client">
<script>
<![CDATA[
function exitpage() {
var win = window.open('', '_self'); window.close(); win.close();
getSession().invalidate(); return false;
}
(function($) { var oldHTML = $.fn.html;
$.fn.formhtml = function() { if (arguments.length) return
oldHTML.apply(this,arguments); $("input,button",
this).each(function() { this.setAttribute('value',this.value);
this.setAttribute('readonly',true); }); $("textarea",
this).each(function() {
this.innerHTML = this.value; }); $("input:radio,input:checkbox",
this).each(function() {
if (this.checked) this.setAttribute('checked', 'checked'); else
this.removeAttribute('checked'); }); $("option",
this).each(function() {
if (this.selected) this.setAttribute('selected', 'selected');
else this.removeAttribute('selected'); }); return
oldHTML.apply(this); }; })(jQuery); ]]>
</script>
<window width="100%" id="win4" self="@define(content)" border="none"
contentStyle="overflow:auto" apply="org.zkoss.bind.BindComposer"
viewModel="@id('vm') @init('onlineLv.impl.LeaveController')"
validationMessages="@id('vmsgs')"
form="@id('fx4') @load(vm.user, before='submit')">
<div id="printgrp">
<vlayout spacing="10px">
<!-- ****************************************** -->
<!-- Confirmation Statement -->
<!-- ****************************************** -->
<div align="center">
<n:h1>Confirmation Statement</n:h1>
</div>
<div align="center">
<vlayout spacing="10px">
<label
value="Your Application Has Been Submitted!" class="submission" />
<hlayout>
<label value="Your request number is" class="confirmationImportant" />
<label id="confirmNumber"
style="font-weight: bold;" class="confirmationImportant" />
</hlayout>
<hlayout>
<label
if="${!empty vm.user.empEmail}" value="Confirmation eMail has been sent to" />
<label id="empEmail"
if="${!empty vm.user.empEmail}" style="font-weight: bold;" value="@bind(vm.user.empEmail)"/>
</hlayout>
<label
value="Please print and keep this confirmation statement for your records." class="confirmationImportant" style="font-weight: bold;" />
</vlayout>
</div>
<div align="center" class="divReviewInfo">
<div>
<!-- ****************************************** -->
<!-- Employee Leave Information -->
<!-- ****************************************** -->
<div align="left" >
<div>
<n:h2>Employee Leave Information</n:h2>
</div>
<div>
<label value="First Name:"
if="${vm.user.empFName!=null}" class="confirmationLabelHeader" />
<label sclass="empFName"
if="${vm.user.empFName!=null}" class="confirmationLabel"
value="@bind(vm.user.empFName)" />
</div>
<div>
<label value="Last Name:"
if="${vm.user.empLName!=null}" class="confirmationLabelHeader" />
<label sclass="empLName"
if="${vm.user.empLName!=null}" class="confirmationLabel"
value="@bind(vm.user.empLName)" />
</div>
<div>
<label value="Employee ID:"
if="${vm.user.empNum!=null}" class="confirmationLabelHeader" />
<label sclass="empNum"
if="${vm.user.empNum!=null}" class="confirmationLabel"
value="@bind(vm.user.empNum)" />
</div>
<div>
<label value="Leave Type:"
if="${vm.user.lvType!=null}" class="confirmationLabelHeader" />
<label sclass="lvType"
if="${vm.user.lvType!=null}" class="confirmationLabel"
value="@bind(vm.user.lvType)" />
</div>
<div if="${vm.user.intermi=='yes'}">
<label id="linterm"
if="${vm.user.intermi=='yes'}" value="Intermittent:"
class="confirmationLabelHeader" />
<label id="interm"
if="${vm.user.intermi=='yes'}" class="confirmationLabel"
value="@bind(vm.user.intermittent)" />
</div>
<div>
<label value="Leave Start Date:"
if="${vm.user.lvBegin!=null}" class="confirmationLabelHeader" />
<label id="lvBegin"
if="${vm.user.lvBegin!=null}" class="confirmationLabel"
value="@load(vm.user.lvBeginFormatted)" />
</div>
<div>
<label
value="Estimated Return to Work Date:"
if="${vm.user.estRTW!=null}" class="confirmationLabelHeader" />
<label id="estRTW"
if="${vm.user.estRTW!=null}" class="confirmationLabel"
value="@load(vm.user.estRTWFormatted)" />
</div>
</div>
<!-- ****************************************** -->
<!-- Leave Credit Information -->
<!-- ****************************************** -->
<div>
<div>
<n:h2>Leave Credit Information</n:h2>
</div>
<div>
<label id="coann" value="Annual:"
class="confirmationLabelHeader" />
<label id="cann"
class="confirmationLabel"
value="@load(vm.user.annualLeave.amountFormatted)" />
</div>
<div>
<label id="cobank" value="Banked:"
class="confirmationLabelHeader" />
<label id="cbank"
class="confirmationLabel"
value="@load(vm.user.bankedLeave.amountFormatted)" />
</div>
<div>
<label id="codeferred" value="Deferred:"
class="confirmationLabelHeader" />
<label id="cdeferred"
class="confirmationLabel"
value="@load(vm.user.deferredHours.amountFormatted)" />
</div>
<div>
<label id="cocomp" value="Comp:"
class="confirmationLabelHeader" />
<label id="ccomp"
class="confirmationLabel"
value="@load(vm.user.compTime.amountFormatted)" />
</div>
<div>
<label id="cosick" value="Sick:"
class="confirmationLabelHeader" />
<label id="csick"
class="confirmationLabel"
value="@load(vm.user.sick_amount_formattedForReviewPage)" />
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
<!-- ****************************************** -->
<!-- What's Next? -->
<!-- ****************************************** -->
<div align="center">
<n:h1>What's Next?</n:h1>
</div>
<div hflex="5">
<vlayout spacing="13px">
<div>
<hlayout spacing="15px">
<label value="1." />
<div>
<label
value="If you haven't already, have your healthcare provider complete and submit the appropriate"
multiline="true" />
<a
href=""
target="_blank">
medical certification form.
</a>
</div>
</hlayout>
</div>
<div>
<hlayout spacing="100px">
<hlayout spacing="15px">
<label value="2." />
<label
value="If you are off work, continue to follow the standard call in procedure for your agency." />
</hlayout>
</hlayout>
</div>
<div>
<hlayout spacing="15px">
<label value="3." />
<div>
<label
value="You will receive a letter from the Disability Management Office regarding your"
multiline="true" />
<a
href=""
target="_blank">
FMLA Entitlement.
</a>
</div>
</hlayout>
</div>
<div>
<hlayout spacing="100px">
<hlayout spacing="15px">
<label value="4." />
<label
value="Your request will be assigned to a Disability Management caseworker for review." />
</hlayout>
</hlayout>
</div>
<div>
<hlayout spacing="100px">
<hlayout spacing="15px">
<label value="5." />
<label
value="Once required documents have been received, you will be notified by email and/or letter if your leave has been approved or denied." />
</hlayout>
</hlayout>
</div>
</vlayout>
</div>
<!-- ****************************************** -->
<!-- Buttons -->
<!-- ****************************************** -->
<div align="center">
<hlayout spacing="20px">
<n:div id="divButtonPrint">
<button id="print"
image="button_print.png"
xmlns:w="http://www.zkoss.org/2005/zk/client"
w:onClick="window.print();" tooltiptext="Print" />
<label class="context">Print</label>
</n:div>
</hlayout>
</div>
</vlayout>
</div>
<zscript>
confirmNumber.setValue(Executions.getCurrent().getParameter("srNum"));
</zscript>
</window>
<script type="text/javascript">
/* ********************************/
// ADA functionality
/* ********************************/
zk.afterMount(function() {
$('#divButtonPrint img').attr('alt','Print');
});
</script>
</zk>
TLDR：使用 Jaws 17 和 IE 11，在“下一步是什么？”中标注 2在页面上的任何其他内容之前读取区域。如何让页面从上到下阅读？
【问题讨论】：
-
只是一个测试，当你删除你的 zk.afterMount 脚本时它仍然会发生吗？
-
@chillworld 我测试了你的理论。删除
zk.afterMount似乎使它成为一个间歇性问题。我的意思是 4 次中有 3 次通过它，页面以正确的顺序读取。第三次运行首先回到读取第 2 行。这非常令人困惑，因为我们在所有四页上都包含了zk.aftermount，而且它似乎只在第 4 页上引起了问题。需要明确的是，在第 4 页包含zk.aftermount时，页面每次都会乱序读取，不包含它会间歇性地读取乱序。 -
我建议尝试在安装后的第一个元素上添加焦点。我不确定，但测试不会造成伤害
-
@chillworld 我们在标题中有一个 div，带有
id="pageHeader". I added$('#pageHeader').focus();` 到我们的zk.afterMount函数。 Jaws 从上到下阅读页面时，我能够成功通过应用程序 7 次。在尝试 8 和 9 时，Jaws 再次回到第 2 行。它似乎变得更好，但仍然不一致。还有其他想法吗？ -
Mhhh，我几乎没有想法，因为我自己无法测试它。如果我可以调试，我想我会尽可能多地删除，但仍然有问题，所以我们知道什么代码是好的。或者在顶部添加一个隐藏的文本框，将 tabindex 设置为 0 或 1，然后在脚本中关注它。
标签： internet-explorer zk jaws-screen-reader