AuraGlassby AuraOne3.4.4
Get started
Accessibility

Glasswithguardrails.

Five proofs from real components. Tab in. Read the contrast ratios. Flip reduced motion. The library does the heavy lifting so the surface stays readable and the focus rings stay sharp.

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 voidDefault body text on the page background.
    18.07:1AAA
  • Secondary on surfaceSecondary copy inside surfaces.
    10.62:1AAA
  • Cyan on deepEyebrows, links, and accent labels.
    11.48:1AAA
  • Void on cyanPrimary CTA: dark text on cyan pill.
    11.98:1AAA
  • Tertiary on voidFootnotes and timestamps. Clears AA Large only.
    5.36:1AA
  • Cyan on cyanFailing 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.