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

Ответ 1

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

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

Ответ 2

Пометка содержимого с помощью 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/

Ответ 3

Используйте aria-hidden

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

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

чтобы ваш код мог стать

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

Ответ 4

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

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

if (characterCount > myAlertTheshold) {
       var newAlert = document.createElement("div"); /* using the native js because it 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