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 Live Regions吗？ https://developer.mozilla.org/en/ARIA/Live_Regions 然后在模态显示期间在Javascript中，使用断言和关闭交换区域。

Answer 4

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

解决了

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

Answer 5

咏叹调隐藏=＆＃34;真＆＃34;将使屏幕阅读器无法识别该元素及其内容，这意味着它不会被读出。

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

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

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

5 个答案: