вай ария и jquery.html () и jquery.append () - PullRequest
Новая
       63

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

8 голосов
/ 22 марта 2012

Кажется, я не могу найти какие-либо ресурсы или примеры кода, позволяющие заставить программы чтения с экрана работать (используя 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 ]

6 голосов
/ 22 марта 2012

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#SCR26)

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

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

  • G186: «Использование элемента управления на веб-странице, который прекращает перемещение, мигание или автоматическое обновление содержимого» * ​​1037 * (см. 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#aria-live

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

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

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

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

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

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

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

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

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

Другие ресурсы

Статьи о программе чтения с экрана 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>
0 голосов
/ 23 марта 2012

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

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

Похожие темы

...