如何让屏幕阅读器停止阅读和阅读不同的内容

Question

我写了一个使用jQuery来显示模态弹出窗口的网站。 它基本上覆盖了屏幕的整个可视区域和覆盖图，然后显示了一个DIV，其中包含覆盖图顶部的实际弹出窗口。 该项目的要求之一与可访问性有关。

页面加载时，屏幕阅读器开始从页面顶部读取。 当用户点击特定链接时，我们会显示模式对话框。 我的问题是：如何中断屏幕阅读器对网站主要部分的阅读并告诉它开始阅读对话文本？

我的模态容器包含在这样的div中：

<div id="modalcontainer"  tabindex="0" class="popup" role="dialog" aria-labelledby="dialog-label" >

触发模态的jQuery看起来像这样：

$("#modalLink").click(function (e) {
    e.preventDefault();

    $("#modalcontainer").center();
    $("#modalcontainer").show();
    $("#closeBtnLink").focus();
    $("#wrapper").attr('aria-disabled', 'true');
});

“closeBtnLink”是模态对话框中的关闭按钮。 我本以为把重点放在这上会指示屏幕阅读器开始从那个元素中读取。

“wrapper”元素是模态对话框的SIBLING。 根据另一个SO用户的建议，出于不同的原因，我在包含整个页面的包装元素上设置了“aria-disabled = true”。 模态对话框作为此容器外部的兄弟存在。

我的主要目标是让屏幕阅读器在点击特定链接时阅读我的​​模态DIV元素的内容。 任何帮助，将不胜感激。

Answer 1

这可以使用ARIA role="dialog"来完成。 你必须为你的例子修改这个代码，它是vanilla js，所以你的jQuery可能更短/更容易。

HTML：

<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1">
  <h3 id="myDialog">Just an example.</h3>
  <button id="ok" onclick="hideDialog(this);" class="close-button">OK</button>
  <button onclick="hideDialog(this);" class="close-button">Cancel</button>      
</div>

JavaScript的：

var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;

function showDialog(el) {
    lastFocus = el || document.activeElement;
    toggleDialog('show');
}
function hideDialog(el) {
    toggleDialog('hide');
}

function toggleDialog(sh) {
    dialog = document.getElementById("box");
    okbutton = document.getElementById("ok");
    pagebackground = document.getElementById("bg");

    if (sh == "show") {
        dialogOpen = true;

        // show the dialog 
        dialog.style.display = 'block';

        // after displaying the dialog, focus an element inside it
        okbutton.focus();

        // only hide the background *after* you've moved focus out of the content that will be "hidden"
        pagebackground.setAttribute("aria-hidden","true");

    } else {
        dialogOpen = false;
        dialog.style.display = 'none';
        pagebackground.setAttribute("aria-hidden","false");
        lastFocus.focus(); 
    }
}


document.addEventListener("focus", function(event) {

    var d = document.getElementById("box");

    if (dialogOpen && !d.contains(event.target)) {
        event.stopPropagation();
        d.focus();
    }

}, true);


document.addEventListener("keydown", function(event) {
    if (dialogOpen && event.keyCode == 27) {
        toggleDialog('hide');
    }
}, true);  

来源：http： //3needs.org/en/testing/code/role-dialog-3.html
更多阅读： http ： //juicystudio.com/article/custom-built_dialogs.php

Answer 2

作为开发人员，您有责任以使屏幕阅读器可读的方式呈现页面内容。

来自http://www.anysurfer.be/en/index.html ：

• 使用正确的HTML标记来构建文档。 通过这样做，辅助技术可以以易于理解的方式将标题，段落，列表和表格翻译成盲文或语音。
• 确保网站也可以在不使用鼠标的情况下操作。 在大多数情况下，不需要特殊操作，除非 - 例如 - 您使用下拉菜单。 对于只能使用键盘的访问者而言，此特定指南非常重要。
• 您可以通过添加字幕或提供转录，使具有听觉或视觉约束的访问者可以访问您的音频和视频片段。
• 绝不仅仅依靠颜色来传达结构信息。 消息“红色字段是强制性的”对盲人或色盲者没有用处。
• 可刷新的盲文显示器无法显示图像。 因此，您应该添加图像和图形按钮的简短描述。 它们不会出现在屏幕上，但是它们会被盲人和视障人士使用的屏幕阅读器软件拾取。
• 应充分考虑使用Flash和JavaScript等技术。 此外，对于患有阅读障碍或癫痫的人来说，沉重的动画和闪烁是非常令人不安的。

但最终屏幕阅读器的责任是确保它在用户有意义时停止和启动，如果不可能，用户应该暂停阅读器本身。

由于那里有各种各样的屏幕阅读器，你所要求的似乎是不可能的。

Answer 3

aria-hidden =“true”将使屏幕阅读器无法识别该元素及其内容，这意味着它不会被读出。

aria-label将设置辅助技术（屏幕阅读器等）将感知的文本。

http://www.w3.org/TR/wai-aria/states_and_properties

Answer 4

你能使用ARIA Live Regions吗？ https://developer.mozilla.org/en/ARIA/Live_Regions然后在模式显示期间在Javascript中，使用断言和关闭交换区域。

Answer 5

我遇到了同样的问题，并通过以下setp解决了

• 在模态容器包装器中创建了一个div（#message）来放置所有消息
• 并将aria-labelledby属性设置为关闭按钮以指向#message容器