Ария-живые и JAWS

Я пытаюсь получить область, поддерживающую арию, для правильной работы с 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 объявить текущее значение области aria-live, а не предыдущее значение области aria-live?

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

Ответ 1

Ваш код правильный. Очевидно, "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 и Focus. Упрощенно, вы можете сделать что-то вроде этого:

<div id="statusbar" role="alert"></div>

$('#statusbar')
  .clear()
  .append('<div tabindex="-1">' + newString + '</div>')
  .children().first().focus()
;

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

Ответ 2

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

(Insert + z), чтобы включить/выключить чтение с экрана только для чтения.

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