如何让屏幕阅读器停止阅读并阅读不同的内容答案

【问题标题】：How to get a screen reader to stop reading and read different content如何让屏幕阅读器停止阅读并阅读不同的内容
【发布时间】：2012-04-11 15:24:51
【问题描述】：

我编写了一个使用 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”是模式对话框中的关闭按钮。我原以为将焦点设置在此会指示屏幕阅读器从该元素开始阅读。

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

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

【问题讨论】：

我将焦点设置为内容，而不是关闭链接。对话框中有标题吗？
有，但由于某种原因，要求之一是将焦点设置为关闭链接。这个客户对他们的要求非常挑剔，如果它在那里，我无法改变他们的想法。大型跨国公司，他们的决定从什么时候开始是正确的？ :)
没有一致的方式，请阅读：sitepoint.com/ajax-screenreaders-work
那个链接已经快 6 年了。
一些关于模态和可访问性的阅读：irama.org/web/dhtml/lightbox

标签： javascript jquery html accessibility screen-readers

【解决方案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

【讨论】：

【解决方案2】：

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

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

使用正确的 HTML 标记来构建您的文档。通过这样做，辅助技术可以以易于理解的方式将标题、段落、列表和表格翻译成盲文或语音。

确保网站也可以在不使用鼠标的情况下进行操作。在大多数情况下，不需要特殊操作，除非 - 例如 - 您使用下拉菜单。此特定指南对于只能使用键盘的访问者非常重要。

您可以通过添加字幕或提供转录，让有听觉或视觉限制的访问者可以访问您的音频和视频片段。

永远不要仅仅依靠颜色来传达结构信息。 “红色字段为必填项”信息对盲人或色盲者没有用处。

可刷新的盲文显示器无法显示图像。因此，您应该为图像和图形按钮添加简短描述。它们不会出现在屏幕上，但会被盲人和视障人士使用的屏幕阅读器软件识别出来。

应充分考虑使用 Flash 和 JavaScript 等技术。此外，沉重的动画和闪烁对于患有阅读障碍或癫痫症的人来说非常令人不安。

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

由于屏幕阅读器种类繁多，您问似乎不太可能。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

您可以使用 ARIA Live Regions 吗？ https://developer.mozilla.org/en/ARIA/Live_Regions 然后在 Javascript 中，在模态显示期间，用 assertive 和 off 交换区域。

【讨论】：

【解决方案5】：

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

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

【讨论】：

欢迎来到 Stackoverflow。请尽量减少帖子中拼写错误的数量，以总体上改善您的答案。