ARIA-атрибуты

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

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

1. aria-hidden Используется для скрытия элементов от вспомогательных технологий. Unpoly автоматически добавляет aria-hidden="true" к элементам, которые удаляются или заменяются в процессе замены фрагментов. Это предотвращает объявление устаревшего контента для скринридеров.

Пример:

<div id="old-content" aria-hidden="true">
  Старый контент
</div>
<div id="new-content">
  Новый контент
</div>

2. aria-live Атрибут aria-live управляет оповещениями скринридеров о динамически изменяемом содержимом. В Unpoly его часто используют для контейнеров, которые обновляются через up.replace или up.append.

  • aria-live="polite" — уведомления выводятся не мгновенно, а после завершения текущих действий.
  • aria-live="assertive" — уведомления выводятся немедленно, прерывая текущую речь скринридера.

Пример использования:

<div id="notifications" aria-live="polite">
  <p>Загрузка завершена</p>
</div>

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

Примеры ролей:

  • role="dialog" — для модальных окон.
  • role="status" — для уведомлений.
  • role="region" — для больших секций контента, которые могут обновляться.

Пример интеграции с Unpoly:

<div id="modal" role="dialog" aria-hidden="true">
  <button class="up-close">Закрыть</button>
  <p>Содержимое модального окна</p>
</div>

При открытии модального окна через up.modal.open() Unpoly автоматически меняет aria-hidden="false", чтобы окно стало доступно для скринридеров.

Автоматическая поддержка ARIA в Unpoly

Unpoly автоматически заботится о нескольких аспектах доступности:

  • Фокусировка: после замены фрагмента библиотека может установить фокус на первый интерактивный элемент или на контейнер с up-focus.
  • Скрытие устаревшего контента: элементы, которые больше не отображаются, получают aria-hidden="true".
  • Модальные окна: открытие и закрытие модальных окон сопровождается обновлением ARIA-атрибутов, предотвращая доступ к фоновому контенту.

Практические рекомендации

  1. Контейнеры для динамического контента должны иметь role="region" или aria-live. Это обеспечивает уведомление пользователей об обновлении содержимого.
  2. Модальные окна должны содержать role="dialog" и управлять видимостью через aria-hidden. При использовании Unpoly достаточно открывать и закрывать модальные окна через API (up.modal.open / up.modal.close), библиотека сама корректно обновит атрибуты.
  3. Кнопки и ссылки, управляющие динамическим контентом, должны оставаться семантически корректными и не использовать aria-hidden, иначе их действия будут недоступны для вспомогательных технологий.
  4. Использовать aria-live для уведомлений о состоянии действий, таких как успешное сохранение формы или ошибка запроса.

Интеграция с формами

При асинхронной отправке формы Unpoly обновляет фрагменты DOM без полной перезагрузки страницы. Для доступности важно:

  • Добавлять aria-invalid="true" на поля с ошибками.
  • Помещать сообщения об ошибках в контейнер с aria-live="assertive".

Пример:

<form up-submit="true">
  <input type="text" name="email" aria-invalid="false">
  <div id="error-message" aria-live="assertive"></div>
</form>

Если сервер вернёт ошибку, Unpoly обновит #error-message, и скринридер оповестит пользователя.

Итоговое взаимодействие

Корректная настройка ARIA-атрибутов в Unpoly делает динамическое обновление интерфейсов совместимым с вспомогательными технологиями. Библиотека снимает с разработчика часть рутинной работы по управлению скрытием устаревшего контента и обновлением ролей модальных окон, но семантика элементов, уведомления о событиях и ошибки форм требуют внимательного ручного контроля.

ARIA в Unpoly — это не просто дополнение, а фундамент для доступных SPA-подобных интерфейсов без полной перезагрузки страницы.

Оглавление