为什么屏幕阅读器不能正确说出这个对话？

Question

我们使用 jquery 弹出了一个模态对话框，只是为了在用户开始使用应用程序的主要部分之前提醒他们一些信息。没什么复杂的，但出于某种原因，我测试过的所有 browser/screenreader 组合都无法读取全部或部分对话框。

我已经用 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;       
    });

单击按钮时，对话框会正常弹出，屏幕阅读器通常会读出 "dialog" 和标题，但不会读出对话框的实际文本。

您可能注意到有两个 id 为 "divBrowserMessagePopup," 的 div，我认为这可能是导致问题的原因。我删除了它，对话框确实起作用了……但出于某种原因只能在 Firefox 中使用。

知道为什么总是会跳过对话框的文本吗？

Answer 1

执行以下操作：

在 "divBrowserMessagePopup" 对话框中设置 tabindex="-1"
将 $('#divBrowserMessagePopup').dialog('open'); 更改为 $('#divBrowserMessagePopup').dialog('open').focus(); - 请注意，由于动画延迟，您可能必须在超时内执行焦点
在 "divBrowserMessagePopup"
在 "divBrowserMessageUserPopup"
从 "divBrowserMessagePopup"

理由如下：

第一屏readers 只读取聚焦的内容（或在SR 缓冲区读取位置），因此如果您不设置焦点，SR 将不知道要读取什么。上面的前两个步骤就是这样做的。

第二屏reader用户可以使用DOM导航发现新内容，SR会自动开始阅读任何获得焦点的内容，所以你不需要额外的标签对话框 div 但你应该告诉 SR 不同组件的作用是什么。最后 3 个步骤将为您完成。

最后，您需要将焦点锁定在对话框中，这样除非他们单击 "OK"，否则屏幕 reader 无法退出。此处未包括执行此操作的步骤，因为它们与主题无关。

为什么屏幕阅读器不能正确说出这个对话？

Why are screenreaders not speaking this dialog correctly?

accessibility

jquery-ui

screen-readers

jaws-screen-reader