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 levererar WCAG 2.2-uppfyllnad som standardbeteende, inte som ett valfritt tema. Denna sida dokumenterar vad som ar inbyggt och vilka mixins du kan valja till for finare kontroll.
Vad du far gratis
| WCAG 2.2 SC | Vad v2.0.0 gor | Hur du verifierar |
|---|---|---|
| 1.4.3 Kontrast (Minimum) — AA | --cl-primary och --cl-secondary morkade till ≥ 4.5:1 mot vitt |
DevTools → kontrastkontroll |
| 1.4.11 Icke-textkontrast — AA | Formularkantar, knappar, marken alla ≥ 3:1 | Samma |
| 2.4.7 Fokus synligt — AA | Varje fokuserbart element har en :focus-visible-ring (gul pa morka bakgrunder, bla pa ljusa) |
Tab genom valfri sida |
| 2.4.11 Fokus inte dolt — AA (nytt i 2.2) | Fast header har reducerad hojd + fokus scroll-margin | Tab forbi den fasta headern |
| 2.5.8 Malstorlek — AA (nytt i 2.2) | Knappar / lankar: ≥ 24x24 CSS px traffyta | DevTools boxmodell |
| 1.4.12 Textavstand — AA | Alla element respekterar anvandarens radhojds-/teckenavstandsoverskrivningar | Overskriv i DevTools |
| 2.3.3 Animation fran interaktioner — AAA | Alla animationsklasser ar inlindade i @media (prefers-reduced-motion: no-preference) |
Reducerad rorelse pa OS-niva |
| 1.4.10 Omflode — AA | Layouten fungerar vid 320 px utan horisontell scrollning | DevTools smal viewport |
| Morkt lage | prefers-color-scheme: dark byter tokens automatiskt |
OS morkt lage-vaxel |
Stylus-mixins du kan valja till
Om du kompilerar fran kallkod ar foljande mixins tillgangliga i
src/stylus/utilities/mixins.styl:
| Mixin | Anvandning |
|---|---|
focus-ring() |
Hogkontrastfokusring som respekterar :focus-visible |
visually-hidden() |
Skarmlasar-exklusiv text som forblir fokuserbar |
skip-link() |
Ankare som blir synligt vid fokus |
reduced-motion() |
Lindar valfritt block i prefers-reduced-motion: no-preference |
forced-colors() |
Anpassningar for Windows hogkontrastlage |
target-size(24px) |
Paddar valfritt klickbart element till en minsta traffyta |
Exempel:
// Applicera en stark fokusring pa en anpassad knapp
.my-button
focus-ring()
target-size(28px)
Skip-lank-hjalpen
Placera detta forst inuti <body>:
<a href="#main-content" class="skip-link">Hoppa till huvudinnehall</a>
Klassen finns inte i karn-stylesheetet (sa sidvikten paverkas inte);
det ar en 4-raders kodsnutt du satter ihop sjalv eller anvander den
medfoljande skip-link()-mixin. Denna webbplats anvander den — fokusera
sidan och tryck Tab for att se den visas uppe till vanster.
Verifiera dina egna sidor
Biblioteket levererar ett a11y-test.mjs-skript under scripts/ som kor
axe-core mot varje URL du anger.
node scripts/a11y-test.mjs https://example.com
CI kor detta skript mot dist/index.html-visningssidan vid varje push.