Цифровые продукты
Доступность
WCAG 2.2 AA, контраст, клавиатура, фокус, текст и мобильные сценарии.
Готовые мастеры и рабочие формы
Загружаем мастеры…
Цель и границы проверки
Цель — WCAG 2.2 AA. Отдельный удачный цвет или автоматический тест не подтверждает соответствие всего сайта: нужны проверки сценариев и ручная оценка.
Смысл передаём текстом и структурой, а не только цветом. Иконки действий имеют доступные названия; поля — подписи и понятные сообщения об ошибке.
Чек-лист интерфейса
Проверить клавиатуру, порядок Tab, видимый фокус, Escape и возврат фокуса из диалога. Фиксированные панели не закрывают сфокусированный элемент.
Проверить контраст в обеих темах, увеличение текста до 200%, 320 px, длинные переводы, зоны нажатия от 44 px и prefers-reduced-motion.
Для SkiMobile дополнительно проверить читаемость с телефона при ярком освещении и работу на реальных Android/iOS перед публикацией.
Персональная читаемость
Во всех темах и акцентах проверяем обычный и повышенный контраст. Красный сохраняет роль ошибки и критичности при смене схемы. Состояния различаются текстом, отметками и иконками; цвет служит дополнительным признаком.
Размеры 125% и 150% проверяем на 320 px и широком экране. Настройка «Меньше» и системное уменьшение движения отключают анимацию. Системное предпочтение никогда не переопределяется усиленным режимом сайта.
Как фиксируем результат
Автоматические сканы axe в Playwright, ручная проверка и журнал замечаний: дата, сценарий, устройство, ожидаемое поведение, результат и исправление.
Источник требований — W3C WCAG 2.2. Критичные замечания устраняем до утверждения компонента или шаблона.
Измеримые требования
| Область | Требование | Проверка |
|---|---|---|
| Контраст | Обычный текст ≥ 4,5:1; крупный ≥ 3:1; необходимые границы и состояния ≥ 3:1. | Обе темы, стандартный/повышенный контраст и пять акцентов. |
| Чтение | 200% текста; перенос при 320 CSS px; интерлиньяж 1,5, интервалы абзацев 2em, букв 0,12em, слов 0,16em. | Текст, цена, управление и ошибки остаются видны. |
| Управление | Стандарт SkiMobile — минимум 44 × 44 CSS px; фокус не закрыт панелями. | Клавиатура, Tab/Shift+Tab, Enter/Space, Escape и возврат фокуса. |
| Движение | Системное reduced motion имеет приоритет; для цикла есть пауза. | Навигация и чтение доступны без движения; звук включается вручную. |
Ручной сценарий проверки
- Пройдите экран только клавиатурой: пропуск к содержимому, меню, форму, диалог и основной переход. Проверьте смысл доступных имён и порядок фокуса.
- Проверьте структуру заголовков и чтение скринридером; декоративные изображения не повторяют текст, смысловые имеют описание. Сообщение об ошибке связано с полем и объявляется без потери ввода.
- Проверьте увеличение, обе темы, reduced motion, сохранённую страницу офлайн и телефон при ярком свете. Запишите устройство, сценарий, результат и исправление в форме проверки; не отмечайте непроведённый тест как успешный.
Источник правила: W3C · WCAG 2.2