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

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"。您必须为示例修改此代码，因为它是普通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等技术。此外，沉重的动画和闪烁对于患有阅读障碍或癫痫症的人来说非常不安。

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

由于屏幕阅读器种类繁多，因此您提出的要求似乎几乎是不可能的。