Как уведомить программы чтения с экрана с помощью 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)?

Источник

4 ответа

Решение

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

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

Источник

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

Источник

Используйте скрытую арию

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

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

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

$('#foo').hide().attr('aria-hidden', 'true');
$('#bar').show().attr('aria-hidden', 'false');
Источник

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

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

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

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