Accessibility

Accessibility isn't a feature I add later — it's a baseline every Morpha component starts from. This page is what I guarantee, and what I expect from anyone composing the kit into their own UI.

Overview

Most of the hard accessibility work lives in primitives: focus management, ARIA roles, keyboard handling. Morpha builds on radix-ui, so components inherit that for free. What I own is keeping it intact through theming and composition — contrast, focus visibility, reduced motion — and that's what the rest of this page covers.

Principles

• Target WCAG 2.1 AA. It's the bar; I treat it as non-negotiable, not aspirational.
• Keyboard-first. Everything operable with a pointer is operable with a keyboard — reachable, logical tab order, no traps.
• Visible focus. A consistent, visible focus-visible indicator on every interactive element. I never remove outlines without replacing them.
• Sufficient contrast. The Cupido tokens are chosen to meet AA in both light and dark; staying on-token keeps contrast correct (see Color Guidance).
• Respect prefers-reduced-motion. Animations scale back or turn off when the user asks (see Animation).
• Correct semantics. Real roles, names and states — semantic HTML first, ARIA only to fill genuine gaps.

What Morpha bakes in

• Components start from radix-ui primitives, so focus management, ARIA roles and keyboard interaction are handled by default.
• The color tokens are designed to meet AA contrast in light and dark, so on-token components stay compliant without per-screen tuning.
• A consistent focus-visible treatment across interactive components.
• Sensible defaults for labels and descriptions on form primitives.

What composition can still break — and what the checklist guards — is contrast on custom backgrounds, focus order in custom layouts, and meaningful labels on icon-only controls.

Checklist

Use this to validate a page or feature before shipping:

• Every interactive element is reachable and operable by keyboard, in a logical order.
• Focus is always visible and moves correctly when overlays open and close.
• Text and UI contrast meets AA in both light and dark.
• Form controls have associated labels; errors are announced.
• Icon-only controls have accessible names.
• Images have meaningful alt; decorative ones are hidden from assistive tech.
• Motion respects prefers-reduced-motion.
• Roles, landmarks and states are semantically correct.

Tools

• axe DevTools — in-browser automated a11y checks.
• Lighthouse — accessibility scoring as part of a broader audit.
• Contrast checkers — verify token combinations against AA (see Design & Assets).
• The Accessibility Audit prompt to run a structured pass with an agent.