Aria-атрибуты в динамике

Веб-разработка активно использует ARIA (Accessible Rich Internet Applications) для повышения доступности интерфейсов. ARIA-атрибуты обеспечивают поддержку экранных читалок и других вспомогательных технологий для людей с ограниченными возможностями. Однако их правильное использование требует внимания к контексту и динамике взаимодействия с элементами страницы.

Основы ARIA-атрибутов

ARIA-атрибуты предоставляют мета-информацию о состоянии и роли элементов на веб-странице, что позволяет улучшить восприятие контента пользователями с особыми потребностями. Они включают в себя такие атрибуты, как aria-hidden, aria-expanded, aria-live и другие.

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

Динамическое обновление ARIA-атрибутов

Когда содержимое страницы изменяется динамически, например, при открытии модальных окон или изменении состояния аккордеона, необходимо обновить ARIA-атрибуты, чтобы экраны читалки могли адекватно воспринимать изменения. Для этого используют методы JavaScript.

Пример 1. Обновление aria-expanded при изменении состояния аккордеона:

const accordionButton = document.querySelector('.accordion-button');
accordionButton.addEventListener('click', function() {
  const content = document.querySelector('.accordion-content');
  const expanded = accordionButton.getAttribute('aria-expanded') === 'true';

  accordionButton.setAttribute('aria-expanded', !expanded);
  content.style.display = !expanded ? 'block' : 'none';
});

В данном примере при клике на кнопку аккордеона происходит изменение атрибута aria-expanded, который сигнализирует о том, что контент был скрыт или открыт.

Работа с модальными окнами

Модальные окна — один из самых распространенных динамических элементов на страницах. Чтобы обеспечить доступность модального окна, необходимо использовать ARIA-атрибуты, такие как aria-hidden и aria-modal. Эти атрибуты помогают обозначить состояние модального окна и сделать интерфейс доступным для пользователей с ограниченными возможностями.

Пример 2. Открытие и закрытие модального окна:

const modal = document.getElementById('modal');
const openButton = document.getElementById('openModal');
const closeButton = document.getElementById('closeModal');

openButton.addEventListener('click', function() {
  modal.setAttribute('aria-hidden', 'false');
  modal.style.display = 'block';
  document.body.style.overflow = 'hidden'; // предотвращает прокрутку страницы
});

closeButton.addEventListener('click', function() {
  modal.setAttribute('aria-hidden', 'true');
  modal.style.display = 'none';
  document.body.style.overflow = 'auto';
});

При открытии модального окна атрибут aria-hidden для модального элемента устанавливается в значение false, что сообщает экранам читалкам, что модальное окно теперь доступно для взаимодействия. После закрытия окна атрибут меняется на true, и элемент снова скрывается.

Важность атрибута `aria-live`

Для динамических обновлений контента, которые должны быть немедленно озвучены пользователю, используется атрибут aria-live. Этот атрибут обозначает, что элемент содержит важную информацию, и экранные читалки должны немедленно озвучить его содержимое.

Пример 3. Использование aria-live для уведомлений:

<div id="notification" aria-live="assertive" role="alert"></div>

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

Адаптация к изменению контента с помощью `aria-atomic`

Для контроля над тем, как именно экранные читалки обрабатывают изменения внутри элементов, можно использовать атрибут aria-atomic. Он указывает, что экранная читалка должна воспринимать весь элемент как атомарный блок. Это полезно, когда изменения происходят в нескольких частях элемента.

Пример 4. Атомарное обновление:

<div id="status" aria-live="polite" aria-atomic="true">
  <p>Загрузка данных...</p>
</div>

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

Управление доступностью в контексте фокуса

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

Пример 5. Управление фокусом в модальном окне:

const modal = document.getElementById('modal');
const closeButton = document.getElementById('closeModal');

openButton.addEventListener('click', function() {
  modal.setAttribute('aria-hidden', 'false');
  modal.style.display = 'block';
  closeButton.focus(); // фокус на кнопке закрытия при открытии окна
});

closeButton.addEventListener('click', function() {
  modal.setAttribute('aria-hidden', 'true');
  modal.style.display = 'none';
});

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

Обновление ARIA-атрибутов в реальном времени

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

Пример 6. Динамическое обновление статуса чата:

const chatStatus = document.getElementById('chat-status');
chatStatus.setAttribute('aria-live', 'polite');

// При получении нового сообщения
chatStatus.textContent = 'Новое сообщение от пользователя!';

Использование атрибута aria-live="polite" позволяет экранной читалке озвучить обновление контента, но не прерывать текущие действия пользователя, если он находится в процессе взаимодействия с другими элементами.