2
私はZKフレームワークを使って書かれたWebアプリケーションを持っています。私は現在、アメリカ人障害者法対応のためのこのアプリケーションをテストしています。私は、Firefox、Chrome、Safari、Internet ExplorerでスクリーンリーダーのテストにJAWSバージョン17を使用しています。Internet ExplorerでJAWSが読んだ最初の行を制御する方法
Internet Explorer 11を使用しているユーザーがアプリケーションの最後の（4番目の）ページに移動すると、JAWSは最初に1行（赤丸）を読み込み、ページの先頭にジャンプしてページ全体を読み込みます上から下まで。
アプリケーションの残りの部分は、所望の効果であり、左から右へ、上から下へ読み出します。
円で囲んだ行を削除すると、JAWSは3行目を読み込み、ページの先頭に移動します。私は2番目のラベルの周りのソースに余分な改行を入れてみましたが効果はありません。
このページで何が間違っているのか知っていますか？あるいは、JAWSにページを上から下へと読ませるような方法がありますか？
<?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： "？次は何" にジョーズ17とIE 11、ラベル2を使用してここで
は問題.zulファイルですページの他のコンテンツの前に領域が読み込まれます。ページを上から下に読むにはどうすればいいですか？
ただ、テスト、それはまだ起こるのでしょうか？ – chillworld
@chillworld私はあなたの理論をテストしました。 'zk.afterMount'を削除すると、間欠的な問題になるようです。私が意味することは、4回のうち3回が実行されていることです。ページは適切な順序で読み込まれます。 3回目の走行は最初に2行目に戻りました。 4つのページすべてに 'zk.aftermount'を含めてしまったので、これはかなり難解です.4ページ目に問題が生じているようです。明確にするために、第4ページに 'zk.aftermount'を含めると、ページは毎回順不同で読み込まれ、断続的に読み飛ばされることはありません。 – rogerdeuce
アフターマウントの最初の要素にフォーカスを追加してみることをお勧めします。私はそれについてはわかりませんが、テストは害を及ぼすことはありません – chillworld