Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.
Skeletonic Stylus v2.0.0 обеспечивает соответствие WCAG 2.2 как поведение по умолчанию, а не как опциональную тему. На этой странице описано, что встроено, и какие миксины вы можете подключить для более тонкой настройки.
Что вы получаете бесплатно
| WCAG 2.2 SC | Что делает v2.0.0 | Как проверить |
|---|---|---|
| 1.4.3 Контраст (минимум) — AA | --cl-primary и --cl-secondary затемнены до ≥ 4.5:1 на белом фоне |
DevTools → проверка контраста |
| 1.4.11 Контраст нетекстовых элементов — AA | Границы форм, кнопки, бейджи — все ≥ 3:1 | Аналогично |
| 2.4.7 Видимость фокуса — AA | Каждый фокусируемый элемент имеет кольцо :focus-visible (жёлтое на тёмном фоне, синее на светлом) |
Tab по любой странице |
| 2.4.11 Фокус не перекрыт — AA (новое в 2.2) | Фиксированный заголовок имеет уменьшенную высоту + scroll-margin для фокуса | Tab через фиксированный заголовок |
| 2.5.8 Размер цели — AA (новое в 2.2) | Кнопки / ссылки: ≥ 24×24 CSS px область нажатия | DevTools — модель блока |
| 1.4.12 Интервалы текста — AA | Все элементы учитывают пользовательские line-height / letter-spacing | Переопределение в DevTools |
| 2.3.3 Анимация взаимодействий — AAA | Все классы анимаций обёрнуты в @media (prefers-reduced-motion: no-preference) |
Уменьшенное движение на уровне ОС |
| 1.4.10 Перекомпоновка — AA | Макет работает при 320 px без горизонтальной прокрутки | DevTools — узкий viewport |
| Тёмная тема | prefers-color-scheme: dark автоматически переключает токены |
Переключение тёмной темы в ОС |
Stylus-миксины для подключения
Если вы компилируете из исходников, следующие миксины доступны в
src/stylus/utilities/mixins.styl:
| Миксин | Назначение |
|---|---|
focus-ring() |
Высококонтрастное кольцо фокуса с поддержкой :focus-visible |
visually-hidden() |
Текст только для экранных читалок, остаётся фокусируемым |
skip-link() |
Якорь, становящийся видимым при фокусе |
reduced-motion() |
Оборачивает любой блок в prefers-reduced-motion: no-preference |
forced-colors() |
Корректировки для режима высокой контрастности Windows |
target-size(24px) |
Увеличивает область нажатия до минимального размера цели |
Пример:
// Применить усиленное кольцо фокуса к пользовательской кнопке
.my-button
focus-ring()
target-size(28px)
Хелпер skip-link
Поместите это первым элементом внутри <body>:
<a href="#main-content" class="skip-link">Перейти к основному содержимому</a>
Класс не входит в основной файл стилей (поэтому размер страницы не увеличивается); это 4-строчный фрагмент, который вы создаёте самостоятельно или используете встроенный миксин skip-link(). Этот сайт использует его — сфокусируйте страницу и нажмите Tab, чтобы увидеть его в левом верхнем углу.
Проверка ваших страниц
Библиотека поставляет скрипт a11y-test.mjs в каталоге scripts/, который запускает
axe-core для каждого указанного URL.
node scripts/a11y-test.mjs https://example.com
CI запускает этот скрипт для демонстрационной страницы dist/index.html при каждом push.