Попросили Claude создать WCAG-доступный DatePicker на React и потратили 3 дня на доработки

Выбор даты кажется небольшой задачей в UI, пока не попробуешь сделать его по-настоящему WCAG-доступным.

Нам понадобился настраиваемый DatePicker на React для процесса записи на прием к врачу, где пользователи, работающие с keyboard navigation, и люди, использующие screen reader’ы, должны были выбрать дату без лишних затруднений.

Claude сделал нам хорошую первую версию: структуру компонента, ARIA-атрибуты, базовую keyboard navigation и логику календаря. На первый взгляд результат выглядел почти готовым.

Затем мы запустили NVDA, VoiceOver и протестировали сценарий keyboard navigation.

Фокус выходил за пределы диалогового окна; некоторые даты озвучивались неверно; переключение между месяцами сопровождалось слишком тихим звуком; нажатие клавиши «Esc» закрывало календарь, но оставляло пользователя без контекста; режим высокой контрастности Windows нарушал отображение выбранного состояния.

Код выглядел нормально, но UX оставлял желать лучшего.

В этой статье мы рассмотрим реальную работу, стоящую за WCAG-доступным DatePicker’ом: где AI сэкономил нам время; где он не справился; как нам помог WAI-ARIA APG; какие детали нам пришлось исправлять вручную и почему доступность нельзя проверить, просто прочитав сгенерированный код.

Приготовьтесь к инсайтам, багам и победам!

Читать далее

Источник: habr.com