Accessibility
Принципы доступности компонентов SDDS.
Доступность (accessibility, a11y) — это практика создания продуктов, которыми могут пользоваться все люди, независимо от их физических, когнитивных или технических возможностей.
Целевой уровень: WCAG 2.1 AA.
См. также: sizes.md — размерная шкала, theming.md — система тематизации на токенах.
1. Основные принципы
SDDS следует четырём основным принципам WCAG — POUR.
1.1 Perceivable (Воспринимаемость)
Вся информация и компоненты интерфейса должны быть представлены таким образом, чтобы пользователи могли их воспринять.
| Правильно | Неправильно |
|---|---|
| Изображения имеют текстовые альтернативы | Иконки без подписей или aria-label |
| Контент не зависит только от цвета | Только цветовая индикация ошибки |
| Текст можно увеличить до 200% без потери функциональности | Аудиоконтент без возможности транскрипции |
| Видео содержит субтитры |
1.2 Operable (Управляемость)
Компоненты интерфейса и навигация должны быть управляемы.
| Правильно | Неправильно |
|---|---|
| Весь функционал доступен с клавиатуры | Действия, доступные только через мышь |
| У пользователей достаточно времени для взаимодействия | Таймауты без возможности продления |
| Нет контента, вызывающего эпилептические припадки | Мигающий контент >3 раз в секунду |
1.3 Understandable (Понятность)
Информация и работа интерфейса должны быть понятны.
| Правильно | Неправильно |
|---|---|
| Предсказуемое поведение элементов | Неожиданные изменения контента |
| Подсказки при ошибках ввода | Нестандартное поведение элементов интерфейса |
| Навигация предсказуема и последовательна | Непоследовательные метки для одинаковых действий |
1.4 Robust (Надёжность)
Контент должен быть достаточно надёжным для интерпретации широким кругом вспомогательных технологий.
| Правильно | Неправильно |
|---|---|
| Валидная HTML-разметка | Кастомные элементы без ARIA-ролей |
| Полное использование ARIA-атрибутов | Нестандартное использование HTML-тегов |
| Статус элементов программно определяем | Состояния только через визуальные стили |
2. Стандарты и соответствие
2.1 Целевой уровень соответствия
| Платформа | Стандарт | Уровень |
|---|---|---|
| Web | WCAG 2.1 | AA |
| Web (критические продукты) | WCAG 2.2 | AA |
| Mobile iOS | WCAG 2.1 + Apple HIG | AA |
| Mobile Android | WCAG 2.1 + Material Guidelines | AA |
| TV/SmartTV | WCAG 2.1 (адаптировано) | A+ |
2.2 Приоритизация критериев
- Уровень A — обязателен. Минимальные требования. Несоответствие делает контент недоступным для определённых групп пользователей.
- Уровень AA — целевой уровень для всех продуктов SDDS. Устраняет наиболее значимые барьеры.
- Уровень AAA — расширенный стандарт. Применяется там, где это технически и контекстуально возможно.
3. Цвет и контраст
Токены SDDS и их использование в компонентах отвечают требованиям стандартов.
Коэффициент контраста — это математическое соотношение яркости цвета текста и цвета фона. Вычисляется по формуле WCAG:
Контраст = (L1 + 0.05) / (L2 + 0.05)где L1 — относительная яркость более светлого цвета, L2 — относительная яркость более тёмного цвета.
Диапазон значений:
- 1:1 — нет контраста (текст сливается с фоном)
- 21:1 — максимальный контраст (чёрный на белом)
3.1 Требования к контрасту
Текст:
| Элемент | Минимальный контраст (AA) | Рекомендуемый (AAA) |
|---|---|---|
| Основной текст (шрифт до 18px normal, до 14px bold) | 4.5:1 | 7:1 |
| Крупный текст (шрифт от 18px normal, от 14px bold) | 3:1 | 4.5:1 |
| Текст на изображении | 4.5:1 | 7:1 |
| UI-компоненты и иконки | 3:1 | — |
| Декоративные элементы | не требуется | — |
3.2 Дополнительная индикация
Цвет — не единственный индикатор: рекомендуется использовать дополнительные визуальные маркеры.
Пример: паттерны для состояния ошибки TextField
| Правильно | Неправильно |
|---|---|
| Цвет фона SurfaceTransparentNegative | Цвет фона SurfaceTransparentNegative (только цвет) |
| Иконка индикации ошибки | |
| Подсказка к полю ввода |
4. Типографика
Основные правила доступности:
- Читаемость — используйте рекомендованные размеры шрифтов и межстрочные интервалы из SDDS. Минимальный размер основного текста — 16px.
- Иерархия — стройте чёткую визуальную иерархию с помощью заголовков H1–H6. Не пропускайте уровни (например, H3 не должен идти сразу после H1).
4.1 Минимальные размеры шрифта
Минимальные размеры шрифта обеспечивают читаемость интерфейса и соответствие стандартам доступности (WCAG).
Важно: текст меньше 12px не рекомендуется для смыслового контента.
| Контекст | Минимальный размер | Рекомендуемый размер |
|---|---|---|
| Основной текст | 14px / 0.875rem | 16px / 1rem |
| Вспомогательный текст | 12px / 0.75rem | 14px / 0.875rem |
| Формы | 14px / 0.875rem | 16px / 1rem |
| Кнопки | 14px / 0.875rem | 16px / 1rem |
| Подсказки (tooltip) | 12px / 0.75rem | 14px / 0.875rem |
4.2 Межбуквенный интервал и читаемость
Параметры, рекомендуемые WCAG 1.4.12 (Text Spacing):
| Параметр | Значение |
|---|---|
| Высота строки (line-height) | ≥ 1.5x от размера шрифта |
| Межбуквенный интервал (tracking) | ≥ 0.12x от размера шрифта |
| Межсловный интервал (word-spacing) | ≥ 0.16x от размера шрифта |
| Отступ между параграфами | ≥ 2x от размера шрифта |
4.3 Выбор гарнитуры
Рекомендуемые характеристики:
- Чёткое различие между символами (I, l, 1 / O, 0)
- Достаточная x-height
- Различимые строчные и прописные буквы
- Поддержка кириллицы с одинаковым качеством
Шрифты SDDS:
- SB Sans Display — для акцентных текстовых элементов крупным кеглем
- SB Sans Text — для интерфейсного текста и заголовков
- SB Sans Text Mono — CodeView внутри компонентов
Подробнее про типографику SDDS — в документации Typography.
5. Фокус и навигация с клавиатуры
Все интерактивные элементы должны быть доступны с клавиатуры. Пользователь должен иметь возможность выполнить любое действие без использования мыши или касания.
5.1 Стиль фокуса
Требования к индикатору фокуса:
- Минимальный контраст 3:1 к соседним цветам
- Должен быть видим на любом фоне
- Не должен перекрываться другими элементами
Базовый фокус SDDS:
| Свойство | Значение |
|---|---|
| Outline width | 1px |
| Outline style | solid |
| Outline color | SurfaceAccent |
| Outline offset | 2px |
| Border-radius | CR компонента + 2px |
5.2 Порядок фокуса (Tab Order)
Порядок фокуса должен соответствовать визуальному порядку и логике контента.
- Порядок Tab соответствует визуальному порядку: слева → направо, сверху → вниз
- ✅ Используется
tabindex="0"для кастомных интерактивных элементов - ✅ Используй
tabindex="-1"для программного управления фокусом (модальные окна, dropdown) - Не убирай элементы из tab order без альтернативы
- ❌ Не используй
tabindex="0"на неинтерактивных элементах
5.3 Клавиатурные паттерны для компонентов
Keyboard Shortcuts (горячие клавиши):
| Клавиша | Действие |
|---|---|
| Tab | Переход к следующему интерактивному элементу |
| Shift + Tab | Переход к предыдущему интерактивному элементу |
| Enter | Активация элемента (кнопки, ссылки) |
| Space | Активация (чекбокс, кнопка) / прокрутка страницы |
| Esc | Закрытие диалога, дропдауна, отмена действия |
| Arrow Keys | Навигация внутри компонента (меню, список, слайдер) |
| Home / End | Первый / последний элемент |
| Page Up / Down | Прокрутка, диапазонные компоненты |
Примеры паттернов для составных компонентов:
| Компонент | Клавиши и действие |
|---|---|
| DropdownMenu | ↓↑ — навигация, Enter — выбор, Esc — закрытие |
| Tabs | ←→ — переключение вкладок, Tab — переход в контент |
| Slider | ←→ — изменение значения, Home/End — мин/макс значения |
| Checkbox | Space — переключение выбора |
| Accordion | ↓↑ — навигация, Enter/Space — раскрытие или закрытие |