ария-живи и челюсти - PullRequest
Новая
       30

ария-живи и челюсти

14 голосов
/ 02 августа 2011

Я пытаюсь заставить регион aria-live корректно работать с JAWS 11 и IE8.

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

JSFiddle этого примера 

<!DOCTYPE html>
<html>
<head></head>
<body>
    <button onclick="document.getElementById('statusbar').innerHTML = parseInt(document.getElementById('statusbar').innerHTML) + 1">Update</button>
    <div id="statusbar" aria-live="polite">0</div>
</body>
</html>

Используя мою конфигурацию JAWS11 / IE8, при каждом нажатии кнопки, которую я слышу:

Click number  HTML Value (after click)  JAWS says
------------  ------------------------- ---------
1             1                         "Update button 0"
2             2                         "1"
3             3                         "2"

Проблема, и мой вопрос таков: как заставить JAWS объявлять текущее значение региона, в котором живут арии, а не предыдущее значение региона, в котором живут арии?

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

Ответы [ 2 ]

13 голосов
/ 02 августа 2011

Ваш код правильный. По-видимому, "1 позади" было обнаружено . По ссылке похоже, что использование aria-atomic="true" может решить проблему. Однако приведенный пример работает правильно в IE9 и Firefox.

Если вы еще не наткнулись на них, посмотрите тестовые случаи на codetalks и availableculture.org . Есть много тонких различий, о которых нужно знать. Только не удивляйтесь, когда тесты не пройдут! За последний год я столкнулся с несколькими (неадекватными) уловками, которые могут вам помочь.

Метод 1: role="alert"

Роль alert равна , которая, как предполагается, эквивалентна aria-live="assertive", но более ранние версии JAWS не обрабатывали ее должным образом. Ознакомьтесь с этими примерами за февраль 2011 года, в которых говорится:

Если вы хотите поддерживать JAWS 10 в IE7 или IE8, то лучше всего удвоить количество предупреждений с ролью role = "alert" и aria-live = "assertive". Хотя это несколько избыточно, поскольку, по определению, роль оповещения должна обрабатываться как утверждающая область реального времени, это позволяет JAWS 10 автоматически объявлять обновленное содержимое оповещения в этих двух браузерах.

И Firefox4 +, и IE9 не требуют этого. Но это будет примерно так: 

<div id="statusbar" role="alert" aria-live="assertive">
  Contents will be spoken when changed
</div>

Способ 2: взлом фокуса

Динамически создавая элемент DOM и заставляя его фокусироваться, вы можете «обмануть» большинство программ чтения с экрана при чтении содержимого. Это хакерский, но эффективный ... и в чем-то смысл примера Create and Focus . Упрощенно, вы можете сделать что-то вроде этого: 

<div id="statusbar" role="alert" tabindex="-1"></div>

$('#statusbar')
  .clear()
  .append('<div>' + newString + '</div>')
  .children().first().focus()
;

Просто скрытие / показ содержимого вместо этого на самом деле работает довольно хорошо большую часть времени. Однако фокус VoiceOver задерживается на элементе и не говорит о его содержимом при повторном отображении. Таким образом, удаление его из DOM представляется наиболее надежным методом на данный момент. Мне это не нравится, но таково положение вещей.

0 голосов
/ 12 марта 2014

Если вы используете JAWS, я думаю, вам также нужно настроить режим по умолчанию; потому что программа чтения с экрана имеет режим «только для чтения». эту проблему можно решить с помощью прессы:

(Вставка + z) для включения / выключения программ чтения с экрана только для чтения.

http://www.mozilla.org/access/qa/win-webcontent-jaws.html

...