ARIA-атрибуты

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

Ключевые типы ARIA-атрибутов:

  • role — определяет семантическую роль элемента (например, grid, gridcell, button).
  • aria-label — задаёт текстовую метку элемента.
  • aria-labelledby — указывает на другой элемент, который является визуальной подписью для текущего.
  • aria-hidden — скрывает элемент от вспомогательных технологий.
  • aria-live — уведомляет о динамически изменяемом контенте.

Интеграция ARIA в Packery

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

Пример добавления роли для контейнера:

<div id="grid" role="grid">
  <div class="grid-item" role="gridcell" aria-label="Элемент 1"></div>
  <div class="grid-item" role="gridcell" aria-label="Элемент 2"></div>
</div>

В данном примере контейнер получает роль grid, а отдельные элементы — gridcell. Атрибут aria-label помогает идентифицировать каждый элемент.

ARIA и динамическое изменение элементов

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

  • aria-hidden=“true” — применять для элементов, которые временно удаляются из видимой сетки, чтобы они не были озвучены экранными читалками.
  • aria-live=“polite” — контейнеру сетки можно добавить этот атрибут, чтобы изменения элементов сообщались пользователю без прерывания текущих действий.

Пример динамического обновления:

var grid = document.querySelector('#grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});

// Добавление нового элемента
var newItem = document.createElement('div');
newItem.className = 'grid-item';
newItem.setAttribute('role', 'gridcell');
newItem.setAttribute('aria-label', 'Новый элемент');
grid.appendChild(newItem);
pckry.appended(newItem);

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

Навигация и фокусировка

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

Рекомендации:

  • Добавлять tabindex=“0” для интерактивных элементов, чтобы их можно было выбирать с клавиатуры.
  • Обновлять aria-selected=“true” / “false” при смене активного элемента.

Пример:

function focusItem(item) {
  document.querySelectorAll('.grid-item').forEach(el => {
    el.setAttribute('aria-selected', 'false');
    el.setAttribute('tabindex', '-1');
  });
  item.setAttribute('aria-selected', 'true');
  item.setAttribute('tabindex', '0');
  item.focus();
}

Практические советы

  • Каждому элементу сетки давать уникальные aria-label или aria-labelledby.
  • Для контейнера использовать role=“grid”, а для ячеек — role=“gridcell”.
  • При удалении элемента ставить aria-hidden=“true”, а при добавлении нового — корректно присваивать роль и метку.
  • Использовать aria-live для контейнеров, где элементы появляются или исчезают динамически.
  • Обновлять фокус и состояние выбранного элемента через tabindex и aria-selected, чтобы навигация была предсказуемой.

Совместимость с другими атрибутами

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

Выводы по использованию

Использование ARIA в Packery обеспечивает:

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

Правильная комбинация role, aria-label, aria-selected, aria-hidden и aria-live делает сетку Packery полностью доступной без изменения визуального интерфейса.

Оглавление