AuraGlassby AuraOne3.0.7
npmGitHubExplore
Accessibility

Glasswithguardrails.

Five proofs. Real components. Tab in. Squint at the contrast. Flip reduced motion. The library does the hard parts so the surface stays beautiful.

Focus rings

Visiblefocus,everycomponent.

Tab through a real GlassButton, GlassInput, GlassToggle, GlassSwitch, and GlassTabs. Watch the rings land where users expect them.

Focus on: —
B
I
U
Press Tab and Shift+Tab to walk the form.
Contrast pairs

WCAGratiosinplainsight.

Real contrast values for the text and surface pairs we ship. The failing pair is shown so the line is obvious.

Body on voidThe quick brown foxjumps over the lazy dog.
Default body text on the page background.
18.07:1AAA
Secondary on surfaceThe quick brown foxjumps over the lazy dog.
Secondary copy inside surfaces.
10.62:1AAA
Cyan on deepThe quick brown foxjumps over the lazy dog.
Eyebrows, links, and accent labels.
11.48:1AAA
Void on cyanThe quick brown foxjumps over the lazy dog.
Primary CTA: dark text on cyan pill.
11.98:1AAA
Tertiary on voidThe quick brown foxjumps over the lazy dog.
Footnotes and timestamps. Clears AA Large only.
5.36:1AA
Cyan on cyanThe quick brown foxjumps over the lazy dog.
Failing on purpose: never paint accent on accent.
1.39:1Fail
Reduced motion

Motion,opt-outbydefault.

Toggle the preference. The sample surface re-renders with no spring, no parallax, no shimmer.

Sample surface

Calm by request.

With reduced motion on, tilt, parallax, and shimmer settle. Content stays put across the site.

Motion is on
Force reduced motionToggle to disable MotionTitle, tilt, and cursor glow on every page.
Keyboard

Akeyboardmapofthepage.

Walk the controls without a mouse. Each key press moves the focus ring through a real form.

  1. 1NameType your nameTab
  2. 2EmailType an addressTab
  3. 3PlanUse arrow keysTab
  4. 4AgreePress Space to toggleTab
  5. 5SubmitPress Enter to commitTab / Enter
Tab to advance Arrows for select/radio Enter to submit
Screen readers

RealARIA.Realtranscript.

Press the controls below. The transcript shows the live region updates a screen reader will announce.

The transcript mirrors what a screen reader announces. Polite for status, assertive for errors.