Доступность в интерфейсах Glypha

Воспринимаемость (Perceivable)

Контраст текста — минимум 4.5:1 для обычного и 3:1 для крупного шрифта (критерий 1.4.3). В Glypha базовая пара --g-text-main на --g-bg даёт 15.9:1. Все альтернативные тексты прописаны в токенах.

Управляемость (Operable)

Каждый интерактивный элемент должен быть достижим с клавиатуры (критерий 2.1.1). Мы добавили видимое состояние фокуса — 2px-обводку с отступом — на все кнопки, ссылки и поля. Никаких «ловушек» при переключении по Tab.

Понятность (Understandable)

Языки интерфейса объявлены атрибутом lang="ru", заголовки выстроены в логическую иерархию (h1 → h2 → h3), а ошибки валидации форм связываются с полями через aria-describedby.

Надёжность (Robust)

Код совместим со вспомогательными технологиями: мы используем семантические HTML-теги, избегаем кастомных ARIA-паттернов там, где есть нативные аналоги, и тестируем на NVDA, VoiceOver и JAWS.

Цветовые токены с проверенным контрастом

Все пары «текст/фон» в палитре Glypha проходят автоматическую проверку на соответствие WCAG AA при сборке. Если дизайнер добавляет новый цвет, система сразу подсказывает, не нарушает ли он порог 4.5:1.

Состояния фокуса и hover в каждом компоненте

Кнопки, поля, ссылки и карточки из UI-кита уже содержат стили для :focus-visible. Минимальная зона нажатия — 44×44 px согласно рекомендации 2.5.8.

Адаптивная типографика

Базовый размер шрифта — 16px, заголовки масштабируются через clamp(). Пользователи могут увеличить размер текста в браузере до 200% без потери вёрстки.

Семантическая разметка из коробки

Компоненты формы (Input, Select, Checkbox, Radio) генерируют корректные пары <label> и aria-*. Модальные окна корректно «перехватывают» фокус и возвращают его при закрытии.

Поддержка prefers-reduced-motion

Все анимации и переходы автоматически отключаются, если пользователь включил «сокращённые движения» в настройках ОС. Это критично для людей с вестибулярными нарушениями.

Автопроверка при CI/CD

Интеграция с axe-core и Lighthouse позволяет запускать аудит доступности на каждом коммите. Средняя длительность проверки — 38 секунд на полный UI-кит из 312 компонентов.

1. Визуальный контраст

Проверьте контраст: текст на фоне ≥ 4.5:1, крупный текст ≥ 3:1, UI-элементы и иконки ≥ 3:1. Не полагайтесь только на цвет — добавляйте текстовые подсказки.

2. Зоны нажатия

Каждый кликабельный элемент — минимум 44×44 px. Расстояние между соседними интерактивными объектами — не менее 8px.

3. Клавиатурная навигация

Пройдите весь экран только по Tab / Shift+Tab. Логика должна быть предсказуемой, без «слепых» зон. Escape закрывает модальные окна и дропдауны.

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

Информационные изображения — с осмысленным alt. Декоративные — с alt="". Иконки с текстом — с aria-hidden.

5. Заголовки и структура

Один h1 на страницу, последовательная иерархия без пропусков уровней. Разделы навигации и контента — в семантических тегах <main>, <nav>, <article>.

6. Формы и валидация

Каждое поле связано с <label>. Ошибки объявляются через aria-invalid и aria-describedby. Обязательные поля помечены явно.

7. Динамический контент

Обновления через AJAX объявляются через aria-live="polite" или assertive. Тосты и уведомления не пропадают без предупреждения.

8. Анимации и движение

Проверьте поведение при prefers-reduced-motion: reduce. Параллакс, автопрокрутка и мигающие элементы ≥ 3 раза/сек — отключены.

Кейс 1: Таблица транзакций в «Атлас Банк»

Проблема: NVDA читала ячейки без привязки к заголовкам столбцов — пользователь не понимал, какой именно показатель описывается.

Решение: добавили scope="col" и scope="row" на заголовки, а для сложных ячеек — headers. После изменения VoiceOver на iOS корректно читает «Сумма, 12 марта: 4 500 рублей».

Результат: время самостоятельного чтения одной строки снизилось с 11 до 4 секунд.

Кейс 2: Дашборд SaaS «Команда»

Проблема: JAWS пропускал динамически обновляющиеся карточки метрик — пользователь с нарушением зрения не видел изменения KPI в реальном времени.

Решение: обернули контейнер карточек в role="region" aria-live="polite" и добавили скрытый заголовок aria-label="Обновлённые метрики за 5 минут". Теперь NVDA произносит изменения через 2 секунды после обновления.

Результат: доля пользователей со скринридерами, завершивших онбординг, выросла с 41% до 78%.

Кейс 3: Мультимедийный контент в «Гиде Glypha»

Проблема: видео с демонстрацией компонентов не было доступно для незрячих — отсутствовали субтитры и текстовый эквивалент.

Решение: добавили автоматические и ручные субтитры, расшифровку в виде транскрипта под видео и описание ключевых моментов в текстовом блоке. Для слайдеров с изображениями — осмысленные alt и кнопка «Пропустить слайд».

Результат: рейтинг доступности страницы в Lighthouse вырос с 72 до 96 баллов.