Docs

Accessibility

Mridha UI components are built with accessibility as a first-class concern, not an afterthought. Here is what that means in practice.

Keyboard navigation

Every interactive component is fully operable with a keyboard. Tab order is logical, Enter and Space activate controls, and Escape closes overlays.

Visible focus

Focus indicators use a 2px solid accent ring (var(--color-accent)) with a 2px offset. Contrast meets WCAG 2.1 AA at minimum.

Semantic HTML

Components use correct element roles: <nav> for navigation, <footer> for footers, <button> for interactive controls, <article> for cards.

ARIA attributes

Expandable sections include aria-expanded, menus use aria-controls and aria-label, decorative animations use aria-hidden='true'.

Reduced motion

All animation checks prefers-reduced-motion. When the preference is active, animations are either disabled entirely or replaced with simple opacity fades.

Colour contrast

Text colours target a minimum 4.5:1 contrast ratio. The accent green (#3ecf8e) on dark background (#0d0d0f) achieves 8.1:1.

Found an accessibility issue? Please open an issue on GitHub. Accessibility bugs are treated as high-priority.