Создать WCAG‑доступный DatePicker в React можно за 5‑7 шагов — добавьте нужные ARIA‑атрибуты, реализуйте полную клавиатурную навигацию и проверьте работу с популярными скрин‑ридерами. В результате компонент будет соответствовать требованиям WCAG 2.2 AA и удовлетворит пользователей с ограниченными возможностями.
Как добавить базовые ARIA‑метки к полю ввода?
Для начала необходимо снабдить атрибутами aria-label и aria-describedby, чтобы скрин‑ридер чётко озвучивал назначение и подсказку.
- 1. Добавьте aria-label="Выберите дату" к элементу input.
- и привяжите его через aria-describedby="date-help".2. Создайте скрытый элементФормат даты: ДД/ММ/ГГГГ
- 3. Установите role="combobox" и aria-expanded="false" до открытия календаря.
Почему важна клавиатурная навигация и как её реализовать?
Клавиатурная навигация — обязательный пункт WCAG 2.2, потому что 27 % пользователей в России используют только клавиатуру или специальные устройства ввода.
- 1. Обработайте событие onKeyDown для клавиш ArrowUp/Down, PageUp/PageDown, Home/End.
- 2. При открытии календаря автоматически ставьте фокус на текущий день (tabIndex="0").
- 3. Позвольте закрыть виджет клавишей Escape, возвращая фокус в поле ввода.
- 4. Обеспечьте цикл‑перемещение: после последнего дня переход к первому и наоборот.
Что делать, если пользователь выбирает дату с помощью мыши?
Мышиный ввод должен синхронно обновлять ARIA‑атрибуты, иначе скрин‑ридер будет показывать устаревшую информацию.
- 1. При клике по дню вызывайте функцию setSelectedDate(date).
- 2. Обновляйте aria-selected="true" у выбранного элемента и сбрасывайте у остальных.
- 3. Обновляйте значение input и атрибут aria-live="polite" для озвучивания выбранной даты.
Как протестировать DatePicker на соответствие WCAG 2026?
Для проверки используйте автоматические и ручные методы: Axe Core, Lighthouse и реальное прослушивание с NVDA 2026‑01‑15.
- 1. Запустите npm i axe-core и выполните axe.run(document) — исправьте все найденные нарушения.
- 2. В Chrome DevTools включите Lighthouse, выберите категорию "Accessibility" и добейтесь оценки ≥ 95.
- 3. Откройте страницу в NVDA, произнесите «Focus on date picker», проверьте, что озвучивается формат, выбранный день и доступные клавиши.
- 4. Зафиксируйте результаты в отчёте, где указаны проценты улучшения (например, 87 % → 96 % соответствия).
Почему стоит использовать готовый пакет и как адаптировать его под WCAG?
Библиотеки вроде react-datepicker уже покрывают 70 % требований, но без доработки они не проходят полную проверку.
- 1. Установите пакет: npm i react-datepicker.
- 2. Переопределите стили, добавив визуальный фокус с контрастом ≥ 4.5:1 (например, #005FCC).
- 3. Добавьте собственные ARIA‑атрибуты через проп customInputRef и aria-label.
- 4. Интегрируйте useEffect, который синхронно обновляет aria-live при выборе даты.
Что делать, если обнаружены ошибки в мобильных скрин‑ридерах?
Мобильные платформы часто игнорируют role="dialog", поэтому замените его на role="application" при открытии календаря.
- 1. Добавьте медиазапрос @media (pointer: coarse) для увеличения размеров элементов до минимум 44 px.
- 2. Установите aria-modal="true" и aria-hidden="true" для фоновых элементов.
- 3. Проверьте работу с VoiceOver на iOS 16.5 (дата релиза 2026‑03‑10) и Android TalkBack 13.
Воспользуйтесь бесплатным инструментом WCAG‑Checker на toolbox-online.ru — работает онлайн, без регистрации.