Основы доступности

Доступность (Accessibility, A11y) — критический аспект веб-разработки, который обеспечивает возможность использования приложений людьми с различными особенностями восприятия и взаимодействия. Во Fresh, как и в любом современном фреймворке на JavaScript, правильная организация доступности требует сочетания семантической разметки, ARIA-атрибутов и внимательного подхода к управлению состоянием интерфейса.

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

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

  • <button> вместо <div> или <span> с обработчиком клика. Кнопка автоматически поддерживает фокус и взаимодействие с клавиатуры.
  • <nav>, <main>, <header>, <footer> для логической структуры страницы. Скринридеры используют эти теги для навигации.
  • <label> для всех форм, связывающий текст с элементом ввода через атрибут for. Это улучшает понимание контекста полей форм для ассистивных технологий.

Пример использования формы с корректной разметкой:

<form>
  <label for="username">Имя пользователя</label>
  <input id="username" type="text" name="username" required />
  
  <label for="password">Пароль</label>
  <input id="password" type="password" name="password" required />
  
  <button type="submit">Войти</button>
</form>

ARIA-атрибуты и динамический контент

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

  • role определяет роль элемента (например, dialog, menuitem).
  • aria-expanded указывает состояние сворачивания/разворачивания.
  • aria-hidden скрывает контент от скринридеров.
  • aria-live используется для уведомлений о динамическом контенте.

Пример аккордеона во Fresh:

export default function Accordion({ title, children }) {
  const [open, setOpen] = useState(false);
  
  return (
    <div>
      <button 
        aria-expanded={open} 
        onCl ick={() => setOpen(!open)}
      >
        {title}
      </button>
      <div aria-hidden={!open}>
        {open && children}
      </div>
    </div>
  );
}

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

Клавиатурная навигация — один из ключевых аспектов доступности. Fresh позволяет управлять фокусом через стандартные методы DOM и React-подобные рефы. Важные моменты:

  • Автофокус при открытии модальных окон:
const modalRef = useRef(null);

useEffect(() => {
  modalRef.current?.focus();
}, []);
  • Логическое табулирование: элементы должны попадать в последовательность табуляции в естественном порядке интерфейса.
  • Скрытие неактивных элементов: при открытом модальном окне основной контент лучше сделать недоступным для фокуса, используя aria-hidden или inert.

Цвет и контраст

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

  • Минимальный контраст текста и фона — 4.5:1 для нормального текста.
  • Цветовая индикация состояния (например, ошибки формы) должна сопровождаться текстовыми или иконографическими подсказками.
  • Поддержка темной и светлой схемы улучшает доступность для пользователей с различными условиями зрения.

Поддержка экранных читалок

Для Fresh важно строить DOM так, чтобы изменения интерфейса были предсказуемы:

  • Элементы добавляются и удаляются из DOM по мере необходимости, без скрытых манипуляций, чтобы скринридер мог корректно озвучивать изменения.
  • Для динамических уведомлений использовать aria-live="polite" или aria-live="assertive", в зависимости от критичности информации.

Пример уведомления о статусе загрузки:

<div aria-live="polite">
  {loading ? "Загрузка данных..." : "Данные загружены"}
</div>

Итоговые принципы

  1. Всегда использовать семантические HTML-элементы.
  2. ARIA только там, где семантика HTML недостаточна.
  3. Управлять фокусом и табуляцией для динамических интерфейсов.
  4. Обеспечивать достаточный контраст и множественные способы передачи информации.
  5. Тестировать на реальных экранных читалках и с клавиатурной навигацией.

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

Оглавление