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 пкс зона дотику | DevTools → box model |
| 1.4.12 Інтервали тексту — AA | Усі елементи поважають користувацькі налаштування line-height / letter-spacing | Перевизначення в DevTools |
| 2.3.3 Анімації від взаємодій — AAA | Усі класи анімацій загорнуті в @media (prefers-reduced-motion: no-preference) |
Зменшення руху на рівні ОС |
| 1.4.10 Переплив — AA | Макет працює при 320 пкс без горизонтальної прокрутки | 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.
Дізнатися про реліз v2.0.0 → · Переглянути сторінку безпеки →