Bevel

Get started

Accessibility

Keyboard, screen readers, reduced motion and forced colours.

A skeuomorphic interface makes its meaning visual: a lamp is lit, a cover is open, a needle points at red. Bevel's rule is that everything an object shows, it also says.

Real roles

Controls are built on Base UI primitives (Switch, Radio, Toggle, Checkbox, Meter, Progress) or follow the ARIA pattern for their role exactly. A detent knob is a slider with aria-valuetext like “High, 3 of 4”. A contact-sheet frame is a button named “3. Dusk, picked”. Decorative parts (grain, needles, flaps, sprocket holes) are hidden from assistive tech.

Keyboard

  • Everything you can do with a pointer, you can do with a keyboard.
  • Groups use arrow keys (radio groups, contact-sheet frames, the knob), and focus order follows the steps: a guarded switch's cover comes before the switch.
  • Held actions use Space: push-to-talk records while Space is down. Enter does nothing there, because it can't be held.
  • A disabled action stays focusable when it has a reason to give (“Locked by 2: Priya, Sam”).

Announcements

Live regions announce changes of state, never ticks. A timer counting down doesn't talk over the user; the dead man's switch says “Stopping soon” once. A departure board gathers its changes and announces “Updated: US East, EU West.” once.

Motion and colour

  • Every transition stops under prefers-reduced-motion. Where motion carried meaning, it gets a still equivalent: split-flaps crossfade, and unseen alarms show a dot instead of flashing.
  • Colour is never the only signal: states have words, and lit lamps have text.
  • Edges that matter have forced-colours fallbacks.
Every component has stories run as browser tests with axe checks set to fail, including a keyboard walkthrough.
NextMotion