Как уведомить читателей экрана с помощью WAI-ARIA, что div теперь виден

Как вы уведомляете читателей экрана с помощью WAI-ARIA, что div теперь виден?

Если мы получили html

<div id="foo">Present main content</div>
<div id="bar" style="display: none;">Hidden content</div>

а то

$('#foo').hide();
$('#bar').show();

Как мы уведомляем читателей экрана, что они должны уведомить Пользователя о теперь видимом div (или, возможно, автоматически сосредоточиться на Теперь видимом div)?

18
accessibility html javascript screen-readers wai-aria

4 ответов

вам вообще не нужно говорить читателям экрана, что контент теперь виден. Использование aria-hidden не имеет значения на практике, поэтому я бы предложил не использовать его. Если вы хотите, чтобы текстовое содержимое скрытого div было объявлено читателем экрана, вы можете использовать role=alert или aria-live=polite (например). Вы бы использовали это для обновленного контента, который вы хотите, чтобы читатель экрана слышал, не перемещаясь в расположение контента, чтобы обнаружить его. Например, всплывающее сообщение, которое не получает фокус, но содержит текстовую информацию, которая имеет отношение к пользователю после действия, такого как нажатие кнопки.

обновление: я обсуждал с одним из людей, которые разработали ARIA 1.0, он предложил использовать в HTML5 hidden вместо aria-hidden как семантическое указание на то, что содержимое скрыто. используйте его в сочетании с CSS display:none для старых браузеров. Браузеры, поддерживающие HTML5 hidden реализовать его с помощью display:none в таблице стилей агента пользователя.

31

пометка содержимого с помощью role="alert" приведет к запуску события предупреждения, на которое будут реагировать читатели экрана, когда оно станет видимым:

<div id="content" role="alert">
...
</div>

$("#content").show();

это предупредит пользователя, когда #content станет видимым.

aria-hidden следует использовать, когда есть что-то, что вы хотите скрыть от читателя экрана, но показать его зрячим пользователям. Однако используйте с осторожностью. Смотрите здесь больше: http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/

9

использовать Ария-скрытые

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

если элемент виден только после некоторого действия пользователя, авторы должны установить aria-hidden атрибут true. При представлении элемента авторы должны установить для атрибута aria-hidden значение false или удалить атрибут, указав, что элемент видимый. Некоторые вспомогательные технологии получают доступ к информации WAI-ARIA непосредственно через DOM, а не через доступность платформы, поддерживаемую браузером. авторы должны установить aria-hidden= "true" на контент, который не отображается, независимо от механизма, используемого для его скрытия. Это позволяет вспомогательным технологиям или агентам пользователей правильно пропускать скрытые элементы в документе.

таким образом, ваш код может стать

$('#foo').hide().attr('aria-hidden', 'true');
$('#bar').show().attr('aria-hidden', 'false');
8

Я создал образец, показывающий, как вы можете использовать role= "alert", чтобы уведомлять пользователей чтения с экрана, когда они приближаются к пределу символов элемента textarea, если вы пытаетесь понять, как использовать роль alert, это может помочь:

это еще не все, но вот небольшая часть кода, которая выдает предупреждение:

if (characterCount > myAlertTheshold) {
       var newAlert = document.createElement("div"); /* using the native js because it's faster */
       newAlert.setAttribute("role", "alert");
       newAlert.setAttribute("id", "alert");
       newAlert.setAttribute("class","sr-only");
       var msg = document.createTextNode('You have ' + charactersRemaining +' characters of ' + myMaxLength + ' left');
       newAlert.appendChild(msg);
       document.body.appendChild(newAlert);
     }

http://codepen.io/chris-hore/pen/emXovR

3