Claude написал React DatePicker, но добиться WCAG-доступности заняло ещё 3 дня

Команда разработчиков попросила Claude создать кастомный DatePicker на React для формы записи к врачу — с полноценной поддержкой клавиатурной навигации и скринридеров. AI справился с первой версией быстро. Потом начались три дня доработок.

Что

Claude сделал хорошо Claude сгенерировал рабочую основу компонента: структуру JSX, базовые ARIA-атрибуты (`role="dialog"`, `aria-label`, `aria-live`), обработчики клавиш для навигации стрелками и логику календарной сетки. Для стартовой точки — хорошо: код компилировался, визуально выглядел правильно, и ручная проверка ничего не ломала. Особенно полезным AI оказался в шаблонном коде: генерация 42 ячеек для сетки, вычисление смещения первого дня месяца, форматирование дат под `aria-label`. Это работа, которую неприятно делать вручную, и Claude справился с ней аккуратно. Проблема стала очевидна только после подключения настоящих вспомогательных технологий.

Где всё пошло не так

Настоящая проверка началась, когда запустили NVDA на Windows и VoiceOver на macOS. Проблем оказалось несколько: Ловушка фокуса не работала — при табуляции внутри диалога фокус уходил в основной документ Даты озвучивались неверно — скринридер читал «1» вместо «Понедельник, 1 июня 2026» Переключение месяца проходило тихо — `aria-live` регион не обновлялся при смене месяца Escape закрывал, но не возвращал — после закрытия календаря фокус терялся, а не возвращался на кнопку-триггер * Высокая контрастность Windows — выбранная дата визуально не отличалась от остальных: компонент полагался на CSS-цвет без атрибутов состояния Каждый из этих пунктов в сгенерированном коде выглядел как «обработчик есть» — но поведение с реальным скринридером отличалось от ожидаемого.

Как починили

Спасением стал WAI-ARIA APG — официальный гайд W3C с конкретным паттерном для DatePicker-диалога. Там прописано не просто «добавь `aria-modal`», а точная последовательность: какой элемент получает фокус при открытии, как держать ловушку фокуса, куда возвращать его при закрытии, какие `aria-label` нужны на кнопках навигации по месяцам.

«Прочитать сгенерированный код — не значит проверить доступность.

Только реальный скринридер покажет правду.» Ловушку фокуса переписали через `querySelectorAll` с ручным перехватом Tab и Shift+Tab. Каждая ячейка дня получила полный `aria-label` вида «Среда, 3 июня 2026» плюс `aria-pressed="true"` для выбранного состояния. Для режима высокой контрастности добавили `aria-selected` и обводку через `outline`, а не только фоновый цвет. Самым тонким местом оказался `aria-live`: регион должен присутствовать в DOM до того, как в него записывается текст, иначе скринридер его игнорирует. Claude вставил регион динамически — этот нюанс выяснился только в тесте.

Что это значит

Claude ускоряет написание доступного кода, но не заменяет тестирование со скринридерами. Хорошая новость: разобравшись с WAI-ARIA APG один раз и задокументировав решения, следующий доступный компонент пишется заметно быстрее. AI берёт на себя шаблонный труд — но финальную проверку с NVDA и VoiceOver пропускать нельзя.