如何让屏幕阅读器停止阅读并阅读不同的内容
我已经写了一个网站，它使用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“是模式对话框中的close按钮。我本以为将焦点设置在这上面会指示屏幕阅读器从该元素开始读取。
"wrapper“元素是模式对话框的兄弟元素。根据另一个SO用户出于不同原因提出的建议，我在包含整个页面的包装器元素上设置了"aria-disabled=true“。模式对话框作为同级存在于此容器之外。
这里我的主要目标是让屏幕阅读器在单击特定链接时读取我的模态DIV元素的内容。任何帮助都将不胜感激。
回答 3
Stack Overflow用户
发布于 2013-04-13 06:51:41
这可以使用ARIA role="dialog"来完成。对于您的示例，您必须修改此代码，它是普通的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
Stack Overflow用户
发布于 2015-02-02 22:10:32
aria-hidden="true“将使屏幕阅读器无法感知该元素及其内容，这意味着它将不会被读出。
aria-label将设置辅助技术(屏幕阅读器等)将感知的文本。
Stack Overflow用户
发布于 2012-04-07 08:56:08
你可以使用ARIA活动区域吗？https://developer.mozilla.org/en/ARIA/Live_Regions然后在Javascript中，在模式显示期间，用assertive和off交换区域。
https://stackoverflow.com/questions/9900683
复制相似问题