Как заставить программу чтения с экрана перестать читать и читать разный контент

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" - это кнопка закрытия в модальном диалоговом окне.Я бы подумал, что установив фокус на этом, я бы дал указание программе чтения с экрана начать читать с этого элемента.По предложению другого пользователя 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

Я столкнулся с той же проблемой и решил следующее: setp's

• создал еще один div (#message) внутри оболочки модального контейнера для размещения всего сообщения
• и установил aria-labelledbyатрибут для кнопки закрытия, указывающий на контейнер #message

Answer 5

Можете ли вы использовать ARIA Live Regions? https://developer.mozilla.org/en/ARIA/Live_Regions Затем в Javascript во время модального показа поменяйте местами с assertive и off.