Семантическая разметка

Featherlight — минималистичная JavaScript-библиотека для создания lightbox-окон, ориентированная на простоту интеграции и малый размер. Несмотря на визуальную направленность, корректная семантическая разметка HTML играет ключевую роль в доступности, расширяемости и поддерживаемости решений на базе Featherlight.

Роль семантики в lightbox-компонентах

Lightbox по своей природе нарушает обычный поток документа: он выводит контент поверх страницы, временно перехватывая фокус и взаимодействие. При отсутствии семантически корректной разметки возникают проблемы:

  • некорректная навигация с клавиатуры;
  • потеря контекста для скринридеров;
  • сложности с SEO при использовании встроенного контента;
  • ухудшение читаемости и поддержки кода.

Featherlight не навязывает жёсткую HTML-структуру, поэтому ответственность за семантику полностью лежит на разработчике.

Базовая HTML-структура и семантические элементы

Наиболее частый сценарий — открытие изображения или HTML-фрагмента по клику на ссылку.

<a href="image.jpg" data-featherlight="image">
  <img src="thumb.jpg" alt="Превью изображения">
</a>

Семантические аспекты:

  • используется <a>, а не <div> — это интерактивный элемент с ожидаемым поведением;
  • href содержит реальный URL ресурса, а не #;
  • <img> содержит осмысленный alt, так как именно он будет воспринят вспомогательными технологиями.

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

Семантика при использовании HTML-контента

Featherlight поддерживает открытие встроенного HTML по селектору.

<a href="#modal-content" data-featherlight="inline">
  Подробнее
</a>

<section id="modal-content" class="hidden">
  <h2>Заголовок</h2>
  <p>Описание или другой контент.</p>
</section>

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

  • используется <section>, а не абстрактный контейнер;
  • структура внутри соответствует обычному потоку документа;
  • заголовки (<h2>, <h3>) сохраняют иерархию;
  • скрытие осуществляется через CSS, а не через удаление из DOM.
.hidden {
  display: none;
}

Такой подход позволяет скринридерам корректно интерпретировать содержимое при его появлении.

Атрибуты доступности и их значение

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

Пример расширенной разметки:

<section
  id="modal-content"
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
>
  <h2 id="modal-title">Заголовок окна</h2>
  <p>Основной текст.</p>
</section>

Назначение атрибутов:

  • role="dialog" — объявляет элемент как диалоговое окно;
  • aria-modal="true" — указывает, что остальной контент страницы недоступен;
  • aria-labelledby — связывает диалог с заголовком.

Featherlight корректно отображает такой контент без конфликтов.

Семантические кнопки управления

Закрытие lightbox часто реализуется через элементы без семантики, что является ошибкой.

Неправильный вариант:

<div class="close">×</div>

Корректный вариант:

<button
  type="button"
  class="featherlight-close"
  aria-label="Закрыть окно"
>
  ×
</button>

Преимущества:

  • <button> поддерживает клавиатурное управление;
  • aria-label даёт текстовое описание;
  • поведение ожидаемо для пользователя и технологий доступности.

Featherlight автоматически навешивает обработчики на элементы с классом featherlight-close.

Взаимодействие с фокусом и порядок элементов

Семантическая разметка напрямую влияет на управление фокусом. При открытии lightbox:

  • фокус должен переходить внутрь модального окна;
  • табуляция не должна уходить за его пределы;
  • после закрытия фокус возвращается к инициирующему элементу.

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

Рекомендуемое размещение:

<body>
  <main>
    <!-- основной контент -->
  </main>

  <!-- модальные секции в конце документа -->
  <section id="modal-content" hidden>
    ...
  </section>
</body>

Использование <main> подчёркивает основной поток документа и улучшает восприятие структуры.

Семантика мультимедийного контента

При открытии видео или iframe-контента:

<a
  href="https://www.youtube.com/watch?v=..."
  data-featherlight="iframe"
>
  Смотреть видео
</a>

Рекомендуется:

  • использовать осмысленный текст ссылки;
  • избегать иконок без текстового описания;
  • при необходимости дополнять aria-describedby.

Для локальных видео:

<figure id="video-modal">
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
  <figcaption>Описание видео</figcaption>
</figure>

<figure> и <figcaption> сохраняют логическую связь между медиа и описанием даже внутри lightbox.

Семантика при кастомных шаблонах Featherlight

Featherlight позволяет переопределять шаблон окна:

$.featherlight.defaults.template = `
  <div class="featherlight" role="dialog" aria-modal="true">
    <div class="featherlight-content"></div>
    <button class="featherlight-close" aria-label="Закрыть">×</button>
  </div>
`;

Здесь важно:

  • сохранять role="dialog" на корневом элементе;
  • не заменять <button> на несемантические элементы;
  • не удалять контейнер featherlight-content, так как он используется для вставки контента.

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

Типичные ошибки семантической разметки

  • использование <div> и <span> для интерактивных элементов;
  • отсутствие заголовков внутри модальных окон;
  • удаление контента из DOM вместо скрытия;
  • отсутствие текстовых альтернатив для изображений;
  • игнорирование ARIA-атрибутов.

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

Связь семантики и поддержки кода

Семантически выверенная разметка:

  • упрощает стилизацию без сложных селекторов;
  • облегчает рефакторинг;
  • снижает количество JavaScript-кода;
  • делает поведение lightbox предсказуемым.

Featherlight как библиотека минимального уровня особенно выигрывает от корректной HTML-основы, так как не маскирует архитектурные недочёты.

Семантический подход как часть архитектуры

Использование Featherlight не отменяет принципы HTML5-семантики. Lightbox-окно остаётся частью документа, а не изолированным виджетом. Грамотное применение <section>, <main>, <figure>, <button>, заголовков и ARIA-атрибутов позволяет встроить Featherlight в сложные интерфейсы без потери структуры и доступности.

Оглавление