Вай ария и jquery.html() и jquery.append()

Кажется, я не могу найти какие-либо ресурсы или примеры кода, позволяющие заставить программы чтения с экрана работать (используя wai aria) с помощью jquery о вставке html в dom или добавлении html в dom.

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

ТИА.

Изменить (добавлен код, который не читается NVDA)... что мне не хватает?

<html>
<head>

<script language="javascript" type="text/javascript">
    function addText() {
        document.getElementById("test").innerHTML = "some test";
}
</script>
</head>

<body>
<h2>NVDA</h2>

<div id="testarea">Some test area</div>
<div id="test" aria-describedby="testarea" aria-live="polite" aria-relevant="additions removals" role="region"></div><br />

<input type="button" value="click me" onclick="addText()" />
</body>
</html>
Источник

2 ответа

Решение

WCAG

Вот рекомендации WCAG по написанию сценариев на стороне клиента, касающиеся обновления контента: http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html

В частности, пока я нашел

  • SCR21: "Использование функций объектной модели документа (DOM) для добавления содержимого на страницу" (см. http://www.w3.org/TR/WCAG20-TECHS/SCR21.html)

  • SCR-26: "Вставка динамического содержимого в объектную модель документа сразу после его триггерного элемента" (см. http://www.w3.org/TR/WCAG20-TECHS/client-side-script.html)

  • G75: "Предоставление механизма для отсрочки любого обновления контента" (см. http://www.w3.org/TR/WCAG20-TECHS/G75.html).

  • G76: "Предоставление механизма запроса обновления контента вместо автоматического обновления" (см. http://www.w3.org/TR/WCAG20-TECHS/G76.html).

  • G186: "Использование элемента управления на веб-странице, который прекращает перемещение, мигание или автоматическое обновление содержимого" (см. http://www.w3.org/TR/WCAG20-TECHS/G186.html).

ARIA

о ролях ARIA взглянуть на aria-live, aria-relevant, aria-atomic а также alert свойства:

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

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

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

Указывает, какие вспомогательные технологии получат уведомления об изменении пользовательского агента (добавления, удаления и т. Д.) В реальном регионе. Смотрите связанные арии-атомные.

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

Указывает, будут ли вспомогательные технологии отображать весь или только часть измененного региона на основе уведомлений об изменениях, определенных атрибутом, относящимся к aria.

http://www.w3.org/TR/wai-aria/states_and_properties (если результат ajax делает видимыми или скрытыми некоторые области страницы)

Указывает, что элемент и все его потомки не видны или не воспринимаются любым пользователем, как реализовано автором. Смотрите связанные арии-инвалиды.

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

Оповещения используются для передачи сообщений, чтобы предупредить пользователя. В случае звуковых предупреждений это доступная альтернатива для пользователя с нарушениями слуха. Роль предупреждения отправляется на узел, содержащий сообщение предупреждения. Оповещения - это специализированные формы статусной роли, которые будут обрабатываться как атомарный живой регион.

Другие источники

Статьи о программе чтения с экрана NVDA и доступности на обновлениях AJAX и другие соответствующие ресурсы:

http://tink.co.uk/2009/06/screen-reader-support-for-ajax-live-regions/
http://www.paciellogroup.com/blog/2008/02/ajax-and-screen-readers-content-access-issues/

http://ejohn.org/blog/ajax-accessibility/ (здесь предлагается фрагмент кода о реальном регионе, в котором обновляется контент)

<p id="users-desc">A list of the currently-connected users.</p>
<ol aria-live="polite" aria-relevant="additions removals"
    aria-describedby="users-desc" id="users">  
     ... 
 </ol>
Источник

Вот рабочий пример чата с использованием ARIA и пояснения. Обе страницы написаны на французском языке (хотя первая должна хорошо переводиться с помощью Google Translate, а вторая хорошо переведена, я только что проверил); скрипт и ресурсы все на английском;)

Источник
Другие вопросы по тегам