ARIA атрибуты

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

Masonry представляет собой библиотеку для динамического расположения элементов в сетке, которая часто изменяется при загрузке контента или изменении размеров окна. Поскольку позиции элементов динамичны, необходимо применять ARIA таким образом, чтобы пользователи могли корректно воспринимать структуру и порядок элементов.

Роли и контейнеры

Основным контейнером Masonry является блок, который содержит все элементы сетки. Для него рекомендуется использовать роль list:

<div class="grid" role="list">
  <div class="grid-item" role="listitem">...</div>
  <div class="grid-item" role="listitem">...</div>
</div>

Ключевые моменты:

  • role="list" сообщает ассистивным технологиям, что элементы внутри являются элементами списка.
  • role="listitem" присваивается каждому элементу Masonry. Даже при изменении их позиции порядок будет корректно восприниматься, так как ARIA поддерживает логическую структуру, а не только визуальную.

Уведомления об изменении контента

Динамическое добавление или удаление элементов требует уведомления пользователей о изменениях. Для этого используется aria-live:

<div class="grid" role="list" aria-live="polite">
  <div class="grid-item" role="listitem">...</div>
</div>
  • aria-live="polite" сообщает экранным читалкам, что новые элементы можно озвучивать, но это не должно прерывать текущий поток речи.
  • Для критических обновлений можно использовать aria-live="assertive", однако его следует применять с осторожностью, чтобы не создавать раздражение.

Управление фокусом и клавиатурная навигация

При динамическом изменении Masonry важно контролировать фокус, чтобы пользователи могли продолжать взаимодействовать с элементами без потери ориентации.

Примеры рекомендаций:

  • Перемещать фокус на новый элемент после его добавления:
grid.appendChild(newItem);
newItem.setAttribute('tabindex', '0');
newItem.focus();
  • Обеспечивать последовательность фокуса: все элементы сетки должны быть доступны через клавишу Tab и иметь tabindex="0" по необходимости.
  • Использовать aria-hidden="true" для элементов, которые временно не должны быть доступны экранным читалкам, чтобы избежать путаницы.

Описание и метки элементов

Каждый элемент Masonry может содержать контент, который важно озвучивать. Для этого применяются aria-label, aria-labelledby и aria-describedby.

Пример:

<div class="grid-item" role="listitem" aria-label="Изображение: закат над горами">
  <img src="sunset.jpg" alt="Закат над горами">
</div>
  • aria-label позволяет задавать краткое текстовое описание, если визуальный контент не имеет alt-текста.
  • aria-describedby можно использовать для более детальной информации, которая не входит в основной контент элемента.

Состояние элементов

Для интерактивных элементов Masonry можно использовать ARIA состояния:

  • aria-selected – отмечает выбранные элементы.
  • aria-expanded – для элементов, которые могут разворачиваться.
  • aria-checked – для элементов с функционалом выбора.

Пример с фильтром:

<div class="filter-item" role="option" aria-selected="true">
  Категория: Природа
</div>
  • Использование этих атрибутов позволяет экранным читалкам сообщать пользователю текущее состояние интерактивного элемента, даже если визуальные изменения происходят динамически.

Динамическая перестановка элементов

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

  • Элементы должны оставаться в контейнере с ролями list и listitem.
  • При значительных перестановках можно использовать aria-live на контейнере, чтобы уведомлять об изменениях.
  • Сохранять уникальные идентификаторы для элементов с помощью id и ссылок через aria-labelledby, чтобы экранные читалки могли корректно соотносить элементы до и после перестановки.

Проверка доступности

После внедрения ARIA атрибутов следует проверять:

  1. Навигацию с клавиатуры – все элементы Masonry должны быть доступными через Tab и Enter.
  2. Экранные читалки – проверить корректное озвучивание добавленных и перемещённых элементов.
  3. ARIA-валидаторы – использовать инструменты вроде WAVE или axe для обнаружения ошибок в атрибутах.

Эти меры обеспечивают, что динамическая сетка Masonry остаётся полностью доступной и поддерживает корректную семантику даже при частых изменениях DOM.

Оглавление