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

How to get a screen reader to stop reading and read different content

提问by Scott

I've written a site that uses jQuery to display a modal popup. It essentially covers the entire viewable area of the screen with an overlay, then shows a DIV that contains the actual popup on top of the overlay. One of the requirements for this project has to do with accessibility.

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

When the page loads, the screen reader starts reading from the top of the page. When a user clicks on a particular link, we display a modal dialog. My question is: how do I interrupt the screen reader's reading of the main portion of the site and tell it to start reading the dialog text?

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

My modal container is wrapped in a div like this:

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

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

The jQuery that fires the modal looks like this:

触发模式的 jQuery 如下所示：

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

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

The "closeBtnLink" is the close button within the modal dialog. I would have thought setting the focus on this would instruct the screen reader to start reading from that element.

“closeBtnLink”是模式对话框中的关闭按钮。我原以为将焦点设置在此会指示屏幕阅读器从该元素开始阅读。

The "wrapper" element is a SIBLING of the modal dialog. Per a suggestion from another SO user for different reasons, I set "aria-disabled=true" on the wrapper element that contains the entire page. The modal dialog exists as a sibling outside of this container.

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

My main goal here is to get the screen reader to read the contents of my modal DIV element when they click on a specific link. Any help would be appreciated.

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

采纳答案by Michiel Cornille

It is your responsibility as a developer to present the content of a page in a way that makes it readable for the screenreader.

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

from http://www.anysurfer.be/en/index.html:

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

• Use the right HTML tags to structure your documents. By doing so, assistive technologies can translate headings, paragraphs, lists and tables to braille or speech in a comprehensible manner.
• Make sure that the website is also operable without using the mouse. In most situations, no special actions are required, except if - for instance - you use dropdown menus. This particular guideline is of great importance to visitors that are only able to use the keyboard.
• You can make your audio and video fragments accessible to visitors with an auditive or visual constraint by adding subtitles or by offering a transcription.
• Never solely rely on colors to convey structural information. The message ‘The fields in red are mandatory' has no use for a blind person or someone who is colorblind.
• A refreshable braille display cannot display images. Therefore, you should add short descriptions for images and graphical buttons. They don't appear on the screen, but they do get picked up by the screenreader software used by the blind and visually impaired.
• The use of technologies like Flash and JavaScript should be well-considered. Moreover, heavy animations and flickering are very disturbing for people who suffer from dyslexia or epilepsy.

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

But is ultimately the responsibility of the screen reader to make sure that it stops and starts when it makes sense to the user, if not possible the user should pause the reader itself.

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

Because of the large variety of screen readers out there, what you are asking seems quite impossible.

由于那里的屏幕阅读器种类繁多，您要问的似乎是不可能的。

回答by albert

This can be accomplished using ARIA role="dialog". you'd have to modify this code for your example, it's vanilla js, so yours will probably be shorter/easier via jQuery.

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

HTML:

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:

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);  

source: http://3needs.org/en/testing/code/role-dialog-3.html
more reading: http://juicystudio.com/article/custom-built_dialogs.php

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

回答by Wesley

aria-hidden="true" will make screen readers to not perceive that element and its content, which means that it will not be read out.

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

aria-label will set the text which assistive technologies (screen readers, etc) will perceive.

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

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

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

回答by Velusamy Dhamodaran

I faced the same issue and solved with following setp's

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

• created one more div (#message) inside modal container wrapper to place all the message
• And set aria-labelledby attribute to the close button to point to the #message container

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

回答by matthewnreid

Can you use ARIA Live Regions? https://developer.mozilla.org/en/ARIA/Live_RegionsThen in Javascript during the modal display, swap the regions with assertive and off.

您可以使用 ARIA 实时区域吗？https://developer.mozilla.org/en/ARIA/Live_Regions然后在模态显示期间的 Javascript 中，用断言和关闭交换区域。