Documentation
Accessibility
Thoughtful motion. Usable interfaces.
Motion should help people understand an interaction. Cavemio pairs its animations with keyboard controls, meaningful labels, and reduced-motion behavior. Here is how those choices work, and what to check when you bring a component into your app.
Respect motion preferences
Components such as Text Morph, Message Edit, and Theme Toggle respond to prefers-reduced-motion. They settle changing content without the usual movement. Enabling the preference during an active theme wipe cancels the reveal and keeps the selected theme applied.
Try the Theme Toggle demo with your device’s reduced-motion setting enabled. Its theme still changes, including when the circular wipe is selected.
Make room for the keyboard
Buttons support native Enter and Space activation. The Command Palette provides keyboard navigation and Escape to close. Select supports keyboard option selection. Answer Paper’s resize handle exposes a slider with keyboard controls, so adjusting its content does not require dragging.
The website includes a Skip to content link. Use Tab to move between controls and the arrow keys inside tab groups. Keyboard shortcuts are an additional way to act; visible controls remain available.
Keep focus easy to follow
Keyboard focus has a visible indicator. The Command Palette contains focus while open and restores it to the opening control when closed. Theme Toggle keeps the same button mounted while its icon changes. These details help people continue from where they were.
When customizing styles, preserve the focus indicator. Check its visibility on both light and dark surfaces, including your own brand colors.
Give controls a name and a state
Theme Toggle announces its destination and exposes its pressed state. Kbd provides spoken key names alongside visual symbols. Decorative icons and animation copies are hidden from assistive technology where they do not add information.
Your content matters too. Supply descriptive labels for icon-only actions, label form fields, and keep headings in a useful order. Changing animation or color should not be the only way someone can understand a result.
Check the colors in context
Components use semantic theme values for text, surfaces, borders, and focus. Our website checks text contrast across its preset palettes in light and dark mode. Your own theme, content, and overrides can change those results.
Use the theming guide to understand the tokens. Review supporting text, placeholder text, selected options, and focus indicators on the surfaces where they actually appear. Pair status colors with a label or another clear indication.
Test the complete experience
Our browser checks cover scenarios including keyboard activation, focus restoration, live reduced motion, interrupted animations, and narrow layouts. Those checks do not replace testing your finished app with screen readers, zoom, touch, and the browsers your users rely on.
If you find a problem, record the component, steps to reproduce it, browser, assistive technology, and motion setting. Include what you expected and what happened. The contribution guide explains where component and website changes belong.