Question

我有一个使用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。在页面上的任何其他内容之前读取区域。如何让页面从上到下阅读？

Answer 1

为了克服这个问题，我们决定将 What's Next？部分中的内容延迟半秒。为了延迟渲染，我们在div中使用了Renderdefer属性，如下所示：

            <!-- ****************************************** -->
            <!-- What's Next? -->
            <!-- ****************************************** -->
            <div align="center">
                <n:h1>What's Next?</n:h1>
            </div>
            <div hflex="5" Renderdefer="500">
                <vlayout spacing="13px">
                    <div>
                        <hlayout spacing="15px">
                            <label value="1." />
                            <div>
                                <label......

这还需要将几个咏叹调标签添加到包含该页面的div中：

<div id="printgrp" ca:aria-live="Assertive" ca:aria-atomic="True">

这些标签让屏幕阅读器知道可以更新内容，并阅读更改。

来源：

如何控制JAWS在Internet Explorer中读取的第一行

1 个答案: