Skip to content
SproutAceve · v3.11.0
Get started
Overview What is your role? Getting started Install Adopting Sprout
Foundations
Brand & logos Color Typography Spacing & layout Elevation Iconography Accessibility
Components
Overview Buttons Inputs & forms Data grid Ribbon toolbar Navigation Cards Dialog Tabs Context menu
Practice
Interaction & motion Voice & content Product patterns AI patterns
People & ethics
Design principles Personas UX ethics Trust & direction
Playground
Build the systemplay Tower of tokensplay
Behind the system
How it works Why it pays Changelogv3.11 Roadmap Contribute
Foundations

Accessibility.

WCAG 2.1 AA is the floor, not the goal. Aceve builds tools that people use for hours, on their worst day, on whatever device is to hand — so accessibility isn't a compliance checkbox, it's what makes the software usable at all. This page pulls together the rules that the component pages apply individually.

The four areas

Where accessibility is won or lost in an Aceve screen.

Colour & contrast

Text meets WCAG AA — 4.5:1 for body, 3:1 for large text and UI borders. Every Sprout pairing is tested in light and dark mode.

See the tested pairings
Keyboard

Everything you can do with a mouse works from the keyboard. Focus is always visible via --shadow-focus, tab order follows reading order, and focus is only trapped inside an open dialog.

Screen readers

Semantic HTML first; ARIA only where the platform falls short. Every control has an accessible name, and state changes are announced, not just shown.

Motion

Animation is short and optional. We honour prefers-reduced-motion: when a user asks for less, transitions become instant.

See the motion tokens

The checklist

The minimum every screen clears before it ships.

Visible focus ring on every interactive element — never outline: none with no replacement.
Hit targets are at least 24×24px, with spacing between adjacent ones.
Colour is never the only signal — pair it with an icon, label or shape.
Form fields have a persistent <label>; errors are described with aria-describedby.
Images and icons that carry meaning have alt text; decorative ones are aria-hidden.
The page has one <h1> and a logical heading order with no skipped levels.
← PreviousIconographyNext →Buttons
Sprout · Aceve Design System · v3.11.0
Figma library GitLabReleases