Скринридеры

Скринридеры корректно взаимодействуют с компонентами, созданными с использованием Haunted, если соблюдены принципы доступности и правильно настроены атрибуты семантики. Haunted не вмешивается в работу ARIA-атрибутов и нативной семантики HTML, поэтому контроль над доступностью остается на стороне разработчика.

Haunted опирается на стандартные веб-компоненты, что позволяет использовать нативные элементы управления и роли. Благодаря этому:

  • Сохраняются стандартизированные способы озвучивания и навигации.
  • Исключается необходимость в дополнительных прослойках между компонентом и DOM.
  • Работает любой современный скринридер: NVDA, JAWS, VoiceOver, TalkBack.

Особое внимание уделяется разметке — кастомные элементы без нативной семантики требуют явного указания ролей и состояний.

Семантика и ARIA-атрибуты

Скринридеры полагаются на дерево доступности. Haunted-рекомпозиция DOM не скрывает информации для Accessibility API, поэтому ключевым аспектом остается правильное применение:

  • role
  • aria-label
  • aria-labelledby
  • aria-describedby
  • aria-live
  • aria-controls
  • aria-expanded
  • aria-checked

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

Динамика обновлений

Haunted обновляет компоненты реактивно. Скринридеры корректно сообщают изменения, если:

  • используется aria-live для объявлений;
  • состояния хранятся в DOM атрибутах, а не только внутри переменных;
  • изменения состояния связаны с элементами управления (например, aria-expanded для панелей).

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

Пример: раскрывающийся список

Создание кастомного элемента, который должен сообщать о своем состоянии:

const Accordion = component(() => {
  const [open, setOpen] = useState(false);
  return html`
    <div>
      <button
        aria-expanded=${open}
        aria-controls="panel"
        @click=${() => setOpen(!open)}
      >
        Детали
      </button>
      ${open ? html`
        <div id="panel" role="region">
          Содержимое панели
        </div>
      ` : null}
    </div>
  `;
});
customElements.define('x-accordion', Accordion);

Кнопка озвучивается с корректным состоянием. Панель получает роль region, что делает ее частью доступной структуры.

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

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

  • focus()
  • tabindex
  • inert
  • aria-hidden

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

Модальные компоненты

Открытие модального окна требует:

  • перемещения фокуса внутрь модального компонента;
  • блокировки содержимого за модальным (через inert или aria-hidden);
  • возврата фокуса после закрытия.

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

Озвучивание изменений

Интерфейсы, созданные с Haunted, могут содержать реактивные обновления без пользовательского ввода. Для подобных сценариев применяются aria-live:

  • aria-live=“polite” для неважных сообщений
  • aria-live=“assertive” для критичных изменений

Например, обновление счетчика уведомлений или прогресса загрузки становится доступным для звуковой озвучки.

Выбор HTML-элементов

Использование корректных HTML-элементов увеличивает предсказуемость:

  • button вместо div с обработчиком click
  • a вместо span для переходов
  • ul/ol и li для списков
  • header, nav, main, footer, section для структурных областей

Такая структура делает пользовательский интерфейс понятным скринридерам без дополнительных ролей.

Состояния и дескрипторы

Некоторые элементы требуют дополнительной информации:

  • aria-checked для переключателей
  • aria-busy для загрузки
  • aria-invalid для валидации
  • aria-current для активных навигационных пунктов

Haunted позволяет обновлять их реактивно, что облегчает построение интерфейсов для вспомогательных технологий.

Проблемные сценарии

Некорректное поведение скринридеров может возникать, если:

  • кастомные элементы рендерят текст без семантики
  • события не связаны с изменениями состояния
  • вместо кнопок используются дивы
  • отсутствует связь aria-controls
  • логика фокуса игнорируется

Главная ошибка — полагаться только на визуальный слой. Скринридеры анализируют структуру и атрибуты.

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

Анализ взаимодействия со скринридерами проводится посредством:

  • NVDA на Windows
  • VoiceOver на macOS и iOS
  • TalkBack на Android

Дополнительно применяются инструменты статического анализа (axe, Lighthouse) и инспекторы доступности в браузерах. Они выявляют пропущенные роли, неправильные связи и неподдерживаемые состояния.

Итоговое наблюдение по Haunted и скринридерам

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

Оглавление