如何讓屏幕閱讀器停止閱讀和閱讀不同的內容

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-hidden =“true”將使屏幕閱讀器無法識別該元素及其內容，這意味着它不會被讀出。

aria-label將設置輔助技術（屏幕閱讀器等）將感知的文本。

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

Answer 4

你能使用ARIA Live Regions嗎？ https://developer.mozilla.org/en/ARIA/Live_Regions然后在模式顯示期間在Javascript中，使用斷言和關閉交換區域。

Answer 5

我遇到了同樣的問題，並通過以下setp解決了

• 在模態容器包裝器中創建了一個div（#message）來放置所有消息
• 並將aria-labelledby屬性設置為關閉按鈕以指向#message容器