Ария-живи и челюсти
Я пытаюсь заставить регион с живой арией корректно работать с JAWS 11 и IE8.
Используя приведенный ниже код, я могу заставить JAWS объявить новое значение при нажатии кнопки, но поведение не соответствует ожидаемому.
<!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, при каждом нажатии кнопки я слышу:
Нажмите номер HTML-значение (после нажатия) JAWS говорит ------------ ------------------------- --------- 1 1 "Обновить кнопку 0" 2 2 "1" 3 3 "2"
Проблема, и мой вопрос заключается в следующем: как заставить JAWS объявить текущую стоимость региона, в котором живут арии, а не предыдущее значение региона, в котором живут арии?
Мне также было бы интересно узнать, как другие программы чтения с экрана будут обрабатывать эту функцию.
2 ответа
Ваш код правильный. По-видимому, "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-элемент и заставляя его фокусироваться, вы можете "обмануть" большинство программ чтения с экрана при чтении содержимого. Это хакерский, но эффективный... и в чем-то смысл примера создания и фокусировки. Упрощенно, вы можете сделать что-то вроде этого:
<div id="statusbar" role="alert" tabindex="-1"></div>
$('#statusbar')
.clear()
.append('<div>' + newString + '</div>')
.children().first().focus()
;
Просто скрытие / показ содержимого вместо этого на самом деле работает довольно хорошо большую часть времени. Однако фокус VoiceOver задерживается на элементе и не говорит о его содержимом при повторном отображении. Таким образом, удаление его из DOM представляется наиболее надежным методом на данный момент. Мне это не нравится, но таково положение вещей.
Если вы используете JAWS, я думаю, вам также нужно настроить режим по умолчанию; потому что программа чтения с экрана имеет режим "только для чтения". эту проблему можно решить с помощью прессы:
(Вставьте + z), чтобы включить / выключить программы чтения с экрана только для чтения.