# Accessibility

> Keyboard support, ARIA roles and live regions, native form validation, visible focus, and a reduced-motion mode that keeps every number.

Source: https://elements.lumesec.ai/docs/accessibility



The effects in Elements are decoration on top of working controls. With the effects off, each component is still a usable control. This page describes the shared behaviour; each component page lists its own keyboard map and roles.

## Keyboard

* Sliders, dials and knobs move with the arrow keys and jump with Home and End.
* Lists, grids and segmented controls use a roving tab index: one Tab stop, arrows inside.
* Buttons and toggles respond to Enter and Space. Dialogs and popovers close with Escape and return focus.

## Roles and labels

Components set the role that matches their behaviour, such as `slider`, `meter`, `switch`, `tablist` or `grid`, together with `aria-valuenow`, `aria-valuetext` and `aria-checked` as they change. Status text that updates on its own is in an `aria-live` region. Canvases that carry meaning get an `aria-label` with the value they show.

## Forms

Pixel UI inputs are React components built on native form controls, or on a hidden input where the control is custom. They submit under their `name`, take part in native validation where the original control does, and reset with the form. Custom-element inputs in the other collections are form-associated through `ElementInternals`: they submit under their `name`, report validity to the form and reset with it. Every input is labelled by its `label`.

## Focus

Focus rings use `:focus-visible` with a ring in the accent colour, so mouse users do not see them and keyboard users always do.

## Text stays text

Every word and number a person reads is real text in a regular font: labels, body copy, counters and large display numerals alike. Pixels are the effect layer around the text, never the text itself, so values are selectable, translatable and read by assistive technology as they appear.

## Reduced motion

When the system asks for reduced motion, loops stop, traffic and spark pixels switch off, and values jump to their target. Every number and every state remains. See [Motion](/docs/motion).

## Contrast

The default tokens meet WCAG 2.1 AA for text in both themes. If you change `--muted-foreground` or `--lumesec`, check text contrast against `--card`.