Поддержка скринридеров

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

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

Использование правильных HTML-тегов критично для корректного восприятия контента скринридерами. Preact поддерживает все стандартные элементы HTML через JSX:

function AlertMessage({ message }) {
  return <section role="alert">{message}</section>;
}

В этом примере <section> с атрибутом role="alert" сообщает скринридеру, что содержимое имеет высокий приоритет. Важно выбирать элементы исходя из их семантического значения: <header>, <nav>, <main>, <footer> для структурирования страницы, <button> и <a> для интерактивных действий.

ARIA-атрибуты

ARIA (Accessible Rich Internet Applications) позволяет улучшить доступность динамических интерфейсов, расширяя семантику HTML. В Preact они задаются как обычные свойства JSX:

function ToggleSwitch({ isOn, onToggle }) {
  return (
    <button
      role="switch"
      aria-checked={isOn}
      onCl ick={onToggle}
    >
      {isOn ? "Включено" : "Выключено"}
    </button>
  );
}
  • role="switch" — определяет тип интерактивного элемента.
  • aria-checked — сообщает текущее состояние.

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

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

Скринридеры тесно связаны с фокусом на странице. В Preact можно управлять фокусом через ref и методы DOM:

import { useRef, useEffect } from 'preact/hooks';

function Modal({ isOpen }) {
  const closeButtonRef = useRef(null);

  useEffect(() => {
    if (isOpen && closeButtonRef.current) {
      closeButtonRef.current.focus();
    }
  }, [isOpen]);

  return (
    <div role="dialog" aria-modal="true">
      <button ref={closeButtonRef}>Закрыть</button>
      <p>Содержимое модального окна</p>
    </div>
  );
}
  • aria-modal="true" — указывает, что взаимодействие с фоном ограничено.
  • ref и focus() позволяют программно управлять активным элементом.

Поддержка корректного порядка табуляции обеспечивает последовательное перемещение по интерактивным элементам.

Обновление контента

Динамически обновляемый контент требует уведомления скринридеров о изменениях. Использование role="status" или role="alert" позволяет объявлять обновления без изменения фокуса:

function Notification({ text }) {
  return <div role="status">{text}</div>;
}

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

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

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

Preact-компоненты можно тестировать с помощью инструментов вроде axe, Lighthouse или VoiceOver/NVDA. Следует проверять:

  • Правильность семантики HTML.
  • Корректное использование ARIA-атрибутов.
  • Последовательность и логичность порядка фокуса.
  • Обновление динамического контента.

Автоматизированные проверки помогают выявлять явные ошибки, но полноценное тестирование требует использования реальных скринридеров.

Практические рекомендации

  • Всегда использовать семантические HTML-элементы перед ARIA.
  • Минимизировать сложные кастомные виджеты, если их можно реализовать стандартными тегами.
  • Явно управлять фокусом при открытии модальных окон и диалогов.
  • Обновления интерфейса должны быть предсказуемыми и озвучиваемыми скринридерами.
  • Проверять доступность на разных устройствах и ОС, так как поведение скринридеров различается.

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

Оглавление