ARIA-атрибуты

Featherlight — минималистичная lightbox-библиотека, не ориентированная изначально на доступность «из коробки». Однако благодаря простой DOM-структуре и отсутствию жёсткой логики управления фокусом, библиотека хорошо поддаётся адаптации под требования WCAG с использованием ARIA-атрибутов. ARIA в контексте Featherlight используется для корректного описания модального окна, управления фокусом и информирования вспомогательных технологий о состоянии интерфейса.

Роль диалога (role="dialog" и role="alertdialog")

Lightbox по своей природе является модальным диалогом. Основной контейнер Featherlight (.featherlight) должен иметь явно заданную роль:

<div class="featherlight" role="dialog" aria-modal="true">

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

  • role="dialog" сообщает скринридерам, что перед ними диалоговое окно.
  • aria-modal="true" указывает, что остальной контент страницы временно недоступен.
  • Использование role="alertdialog" допустимо только в случаях, когда содержимое требует немедленного внимания (ошибка, подтверждение критичного действия).

Featherlight по умолчанию не устанавливает эти роли, поэтому их необходимо добавлять вручную — либо через модификацию шаблона, либо через события библиотеки.

Связывание заголовка и содержимого

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

Пример структуры:

<div class="featherlight" role="dialog" aria-modal="true"
     aria-labelledby="fl-title" aria-describedby="fl-content">
    <h2 id="fl-title">Галерея изображений</h2>
    <div id="fl-content">
        ...
    </div>
</div>

Принципы:

  • Заголовок должен быть уникальным в пределах документа.
  • aria-labelledby всегда предпочтительнее, чем aria-label, если заголовок уже присутствует в DOM.
  • aria-describedby используется только для дополнительного описания, а не для основного текста.

Управление фокусом и aria-hidden

При открытии Featherlight визуально перекрывает страницу, но DOM-контент остаётся доступным. Для корректной работы скринридеров необходимо временно скрывать основной контент:

$('body > *:not(.featherlight)').attr('aria-hidden', 'true');

При закрытии lightbox атрибут должен быть удалён:

$('body > *').removeAttr('aria-hidden');

Это предотвращает «утечку фокуса» и навигацию по невидимым элементам.

Особенности:

  • aria-hidden="true" не заменяет управление фокусом, но дополняет его.
  • Нельзя применять aria-hidden к родителю элемента, который содержит текущий фокус.

Кнопка закрытия и доступное имя

Кнопка закрытия Featherlight (.featherlight-close-icon) визуально представлена символом ×, который не имеет семантического значения для вспомогательных технологий.

Корректная разметка:

<button class="featherlight-close-icon" aria-label="Закрыть диалог">
    ×
</button>

Требования:

  • Использование <button>, а не <span> или <a>.
  • Обязательное наличие aria-label с ясным действием.
  • Исключение title как единственного источника доступного имени.

Обновляемый контент и aria-live

Если содержимое lightbox загружается динамически (AJAX, подгрузка изображений, смена слайдов), может потребоваться использование aria-live.

Пример:

<div id="fl-content" aria-live="polite">

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

  • Использовать polite, если обновление не критично.
  • Избегать assertive для медиа-контента и галерей.
  • Не применять aria-live ко всему диалогу — только к изменяемым областям.

Клавиатурная навигация и семантика

ARIA не заменяет нативную семантику. В Featherlight важно:

  • Не эмулировать кнопки через role="button" при возможности использовать <button>.
  • Не добавлять ARIA-роли, дублирующие нативное поведение.
  • Следить, чтобы интерактивные элементы имели логичный порядок фокуса.

Для контейнеров, которые не должны получать фокус, следует явно исключать их:

<div class="featherlight-content" tabindex="-1">

Это позволяет программно переводить фокус внутрь диалога без добавления лишних элементов в таб-цепочку.

Состояния элементов и ARIA-атрибуты

При наличии элементов управления внутри lightbox (табы, переключатели, галереи) необходимо отражать их состояние:

  • aria-expanded — для раскрывающихся блоков.
  • aria-selected — для активных элементов в списках.
  • aria-current — для текущего слайда или шага.

Пример для галереи:

<button aria-selected="true">1</button>
<button aria-selected="false">2</button>

Состояния должны обновляться синхронно с визуальными изменениями.

Типичные ошибки при использовании ARIA в Featherlight

  • Добавление role="dialog" без управления фокусом.
  • Использование aria-hidden на <body>.
  • Дублирование доступных имён (aria-label + текст).
  • Применение ARIA для маскировки проблем с семантической разметкой.
  • Отсутствие удаления ARIA-атрибутов при закрытии lightbox.

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

Оглавление