Учебник Веб-доступность (a11y) для начинающих

Программа курса

1. 1 Зачем доступность

   1. Кому нужна доступность

      Клавиатурные пользователи, слабовидящие, дальтоники, моторные и временные ограничения — кто на самом деле выигрывает от доступного сайта и при чём тут SEO.

   2. WCAG и уровни A/AA/AAA

      Что такое WCAG, как устроены четыре принципа POUR, чем отличаются уровни A, AA и AAA и почему на практике целятся именно в AA.

   3. С чего начать проверку

      Три бесплатных шага аудита доступности: пройти сайт клавиатурой, прогнать axe и Lighthouse, включить скринридер. Почему автопроверка ловит не всё.

2. 2 Семантика и структура

   1. Семантические теги вместо div

      Почему div с onclick — не кнопка, а h4 — не «мелкий заголовок». Каркас страницы на header/nav/main/footer и иерархия h1–h6 с примерами «плохо/хорошо».

   2. Кнопка или ссылка: главная ошибка

      Ссылка ведёт, кнопка действует. Что ломается при подмене: Enter и Space, открытие в новой вкладке, контекстное меню, история браузера — и как это чинить.

   3. Ориентиры, заголовки и skip-link

      Как скринридер навигирует по landmarks и заголовкам, зачем нужна ссылка «перейти к содержимому» и почему порядок чтения страницы задаёт DOM, а не CSS.

3. 3 Клавиатура и фокус

   1. Фокус: видимость и порядок

      Почему outline: none ломает сайт, как работает :focus-visible, кто задаёт порядок обхода по Tab и что означают tabindex 0, -1 и положительные значения.

   2. Ловушка фокуса в модальных окнах

      Как сделать доступную модалку: фокус внутрь при открытии, цикл Tab по диалогу, закрытие по Escape, возврат фокуса на кнопку-инициатор и inert для фона.

   3. Доступные интерактивные компоненты

      Меню, табы и аккордеон с клавиатуры: какие клавиши обязаны работать, что такое roving tabindex, когда нужен ARIA, а когда хватает button, details и select.

4. 4 ARIA

   1. Пять правил ARIA (и главное из них)

      Что такое ARIA, зачем нужны роли, состояния и свойства, чем aria-label отличается от aria-labelledby и почему первое правило ARIA — не использовать ARIA.

   2. Живые области (aria-live)

      Как сообщить скринридеру об изменении без перезагрузки страницы: aria-live polite и assertive, role=status и role=alert, тосты, ошибки формы и счётчики результатов.

   3. Как ARIA всё ломает

      Антипаттерны ARIA: role=button на div без клавиатуры, aria-hidden на фокусируемом элементе, дублирование ролей и врущие состояния. Почему плохая ARIA хуже, чем никакой.

5. 5 Контент, формы, цвет

   1. Доступные формы

      Как сделать форму доступной: label и связь с полем, aria-describedby, обязательность, сообщения об ошибках с role="alert", fieldset и legend.

   2. Альтернативный текст

      Как писать alt: информативные картинки, декоративные с alt="", графики и схемы, иконки-кнопки. Почему alt="изображение" хуже, чем ничего.

   3. Цвет, контраст и движение

      Контраст 4.5:1 по WCAG, почему нельзя передавать смысл только цветом, и как prefers-reduced-motion спасает от анимаций, вызывающих тошноту.

6. 6 Тестирование и внедрение

   1. Тестируем: клавиатура, скринридер, автопроверка

      Сценарий ручной проверки доступности с клавиатуры, базовые команды NVDA и VoiceOver, axe DevTools и Lighthouse — и честный список того, что автотест не поймает.

   2. Как внедрить доступность в процесс

      Доступность как процесс: чек-лист в Definition of Done, eslint-plugin-jsx-a11y и axe в CI, аргументы для бизнеса и приоритизация аудита существующего сайта.