Как вы можете уведомить читателей экрана с использованием WAI-ARIA, что теперь отображается div?
Если мы получили html
<div id="foo">Present main content</div>
<div id="bar" style="display: none;">Hidden content</div>
а затем we
$('#foo').hide();
$('#bar').show();
как мы уведомим читателей экрана о том, что они должны уведомить пользователя о теперь видимом div (или, возможно, автоматически сосредоточиться на теперь видимом div)?
Вам вообще не нужно сообщать читателям о том, что содержимое теперь видно. Использование aria-hidden не имеет никакого отношения к практике, поэтому я бы предложил не использовать его. Если вы хотите, чтобы текстовое содержимое скрытого div было объявлено с помощью программы чтения с экрана, вы можете использовать role=alert или aria-live=polite (например). Вы использовали бы это для обновленного контента, который вы хотите, чтобы читатель экрана слышал, не переходя в местоположение контента, чтобы его обнаружить. Например, всплывающее сообщение, которое не получает фокус, но содержит текстовую информацию, относящуюся к пользователю после действия, такого как нажатие кнопки.
update: Я обсуждал с одним из людей, которые разработали ARIA 1.0, он предложил использовать HTML5 hidden вместо 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. Когда элемент представлен, авторы ДОЛЖНЫ установить атрибут скрытой арии на 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 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);
}