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

Ответ 1

Это ваша ответственность как разработчик представить содержимое страницы таким образом, чтобы он читался для чтения с экрана.

из http://www.anysurfer.be/en/index.html:

• Используйте правильные HTML-теги для структурирования ваших документов. Поступая таким образом, вспомогательные технологии могут трансформировать заголовки, абзацы, списки и таблицы в шрифт Брайля или речь понятным образом.
• Убедитесь, что веб-сайт также работает без использования мыши. В большинстве ситуаций никаких специальных действий не требуется, за исключением случаев, когда, например, вы используете раскрывающиеся меню. Этот конкретный ориентир имеет большое значение для посетителей, которые могут использовать клавиатуру.
• Вы можете сделать ваши аудио- и видеофрагменты доступными для посетителей с аудиторией или визуальным ограничением, добавив субтитры или предложив транскрипцию.
• Никогда не используйте только цвета для передачи структурной информации. Сообщение "Поля красного цвета обязательны для использования не для слепого человека или кого-то, кто является дальтоником.
• Обновляемый шрифт Брайля не может отображать изображения. Поэтому вы должны добавить короткие описания для изображений и графических кнопок. Они не появляются на экране, но их подхватывает программное обеспечение для чтения с экрана, используемое слепыми и слабовидящими.
• Использование технологий, таких как Flash и JavaScript, должно быть хорошо рассмотрено. Более того, тяжелая анимация и мерцание очень тревожат для людей, страдающих дислексией или эпилепсией.

Но в конечном итоге ответственность читателя экрана  что он останавливается и запускается, когда это имеет смысл для пользователя, если не  возможно, пользователь должен приостановить работу самого читателя.

Из-за большого разнообразия читателей экрана, что вы  спрашивают, кажется совершенно невозможным.

Ответ 2

Это можно сделать с помощью 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

Ответ 3

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

Ответ 4

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

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

Ответ 5

aria-hidden = "true" заставит читателей экрана не воспринимать этот элемент и его контент, а это значит, что он не будет считан.

aria-label установит текст, который будут воспринимать вспомогательные технологии (устройства чтения с экрана и т.д.).

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