Skip to content
Sveltier
Mode
Accessibility

Accessibility

Accessibility is built in from the first line, not patched on. These are the commitments every part of Sveltier is tested against.

Keyboard and ARIA

Interactive components follow the WAI-ARIA Authoring Practices: the documented roles, states and keyboard maps, with no custom shortcuts invented without a reason. Each component page lists its keyboard support. Behaviour is tested in real Chromium, Firefox and WebKit, because focus handling differs between engines.

Contrast

All ten built-in themes are checked in the test suite against WCAG 2.2:

  • Body, muted and subtle text, and every intent used as text: at least 4.5:1 on every surface.
  • Text on filled intents (--sv-on-*): at least 4.5:1.
  • Text on tonal fills (chips, badges, alerts): at least 4.5:1.
  • Control boundaries (border-strong) and focus rings: at least 3:1.

Focus

Keyboard focus is always visible: a ring in the theme's primary colour on :focus-visible, which appears for keyboard users and stays out of the way of pointer clicks.

Reduced motion

Only transform and opacity are animated. When the operating system asks for reduced motion, every theme's durations collapse to near zero and pressed controls stop moving.

Not by colour alone

Meaning never depends on colour only. Price changes carry a sign or an arrow, statuses carry a label, and errors carry text.

Automated checks

Every page of this site is scanned with axe (WCAG 2.2 A and AA rules) in light and dark, and checked for horizontal scrolling at widths from 320 to 1440 pixels.