Доступность

Обязательные требования к контрасту, фокусу, областям нажатия и семантике во всех проектах NurOS.

Доступность в Nupek - не отдельный этап проверки, а свойство токенов и компонентов по умолчанию. Если вы используете токены и компоненты системы как есть, требования ниже выполняются автоматически.

Контраст

Текст на фоне держит контраст не ниже 4.5:1 для обычного размера и не ниже 3:1 для крупного текста (от 24px или от 19px полужирным) - это верно для каждой пары токенов в светлой и тёмной теме. Пары «фон/текст» статусов подобраны так, что их не нужно проверять вручную: stable, testing, info и neutral всегда используются как готовая пара.

accent - исключение: это декоративный акцент с контрастом 2.7:1 на paper, поэтому он не несёт текст. Используйте его как заливку с текстом ink поверх, как свечение или как единичный визуальный акцент без текста.

Фокус

Каждый интерактивный элемент получает видимое кольцо фокуса при навигации с клавиатуры - :focus-visible с кольцом в цвете акцента (--focus-ring-color), а не браузерное кольцо по умолчанию. Кольцо не появляется при клике мышью, только при переходе табом.

Проверка клавиатурой

Пройдите страницу клавишей Tab от начала до конца: каждый элемент, с которым можно взаимодействовать, должен получить заметное кольцо фокуса, а порядок перехода - совпадать с визуальным порядком.

Область нажатия

Любой интерактивный элемент - кнопка, поле, тег-фильтр, пункт меню - имеет область нажатия не меньше 44×44px, даже если его видимое содержимое меньше. Токен --tap-target-min задаёт это значение как минимальную высоту для кнопок и полей.

Движение

Все переходы и анимации подчиняются prefers-reduced-motion: reduce - при включённой настройке они становятся мгновенными на уровне глобальных стилей, без исключений для отдельных компонентов.

Статус не только цветом

Тег статуса всегда содержит текст - «Стабильно», «На проверке» - рядом с цветом. Цвет ускоряет распознавание для зрячих пользователей, но не является единственным носителем информации.

Таблицы на узких экранах

Плотные таблицы (токены, палитры, сравнение свойств) на экранах уже 640px перестраиваются в список карточек: каждая строка становится карточкой, а заголовок столбца - подписью перед значением. Таблица не сжимается и не получает горизонтальную прокрутку.

Семантика и структура

Страница начинается со skip-link, который переносит фокус сразу к основному содержимому, минуя навигацию.
Заголовки идут по уровням без пропусков - h1 на странице один, разделы вложены в h2, подразделы в h3.
Сворачиваемый контент - FAQ, дополнительные детали - использует нативные <details> и <summary> вместо самодельного JS-аккордеона, поэтому работает без JavaScript и корректно объявляется скринридером.
Навигация, хлебные крошки и списки используют семантические <nav>, <ol>, <ul> с aria-label, где на странице несколько навигационных блоков.