为什么屏幕阅读器无法正确朗读此对话框？

Question

为什么屏幕阅读器无法正确朗读此对话框？

jquery-uiaccessibilityscreen-readersjaws-screen-reader

3

我们正在使用jquery弹出模态对话框，只是为了在用户开始使用应用程序的主要部分之前提醒用户一些信息。没有什么复杂的，但是不知何故，我测试过的所有浏览器/屏幕阅读器组合都无法读取对话框的全部或部分内容。

我已经测试了IE8/JAWS15、Firefox/JAWS15和Chrome/Chromevox。

以下是对话框本身的HTML。

<div id="divBrowserMessagePopup" class="ui-dialog-content ui-widget-content" aria-labelledby="divBrowserMessageTitle" aria-describedby="divBrowserMessage" hidden style="width: auto; min-height: 150px; height: auto; padding: 0px; border: 0px none;">
    <div id="divBrowserMessageUserPopup">
        <div class="modelpopup" style="border:0">
            <div class="modelpopup-top">
                <span class="sprite close" id="browserMessage-popupclose"></span>
                <div id="divBrowserMessageTitle"> <h1>Title of Dialog</h1></div>
            </div>
            <div class="modelpopup-content">
                <div id="divBrowserMessage">this is a very important message we want the user to "see!"</div>
            </div>   
            <div class="model-button">
                <button class="button-lrg-pri float-right" id="btnBrowserMessageOk">OK</button>
            </div>     
        </div>
    </div>
</div>

这是我们使用的jqueryUI脚本，用于将其变为对话框并显示出来。

$('#divBrowserMessagePopup').dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width: '450px',
        open: function (event, ui) {
            $(this).css({ 'padding': '0', 'border': 0 });
        }

    });

$("#showDialog").click(function (e) {
        $('#divBrowserMessagePopup').dialog('open');

        e.preventDefault ? e.preventDefault() : event.returnValue = false;       
    });

当点击按钮时，对话框可以正常弹出，屏幕阅读器通常会说“对话框”和可能的标题，但从来不会说对话框的实际文本。

您可能会注意到有两个id为“divBrowserMessagePopup”的div，我认为这可能是问题的原因。我将其删除后，对话框实际上确实起作用了......但仅在火狐浏览器中。

有任何想法为什么对话框的文本总是被跳过？

- CodeRedick

你是否将焦点设置到对话框中？ - unobf

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- unobf · Accepted Answer

请按照以下步骤操作：

在“divBrowserMessagePopup”对话框上设置tabindex="-1"
将 $('#divBrowserMessagePopup').dialog('open'); 更改为 $('#divBrowserMessagePopup').dialog('open').focus(); - 请注意，由于动画延迟，您可能需要在超时内进行焦点设置
在“divBrowserMessagePopup”上设置role="dialog"
在“divBrowserMessageUserPopup”上设置role="document"
从“divBrowserMessagePopup”中删除aria-labelledby和aria-describedby

原理如下：

首先，屏幕阅读器只读取当前聚焦的内容（或SR缓冲区读取位置），因此如果您不设置焦点，则屏幕阅读器将不知道要读取什么。以上前两步是为了解决该问题。

其次，屏幕阅读器用户可以使用DOM导航发现新内容，而屏幕阅读器会自动开始读取任何获得焦点的内容，因此您无需为对话框div添加额外标签，但应告诉屏幕阅读器每个组件的角色是什么。最后三步将为您完成这项任务。

最后，您将想要在对话框中限制焦点，以便屏幕阅读器用户除非点击“确定”，否则无法离开。这里不包括此操作的步骤，因为它们超出了此问题的范围。