Accessible UI

A compact accessibility bar for every interface the agent touches: focus, labels, dialogs, and motion.

Lives in .cursor/rules and shapes how the agent works.

Install path

.cursor/rules/accessible-ui.mdc

---
description: Accessibility requirements for interactive UI
globs: **/*.{tsx,jsx}
alwaysApply: false
---

# Accessible UI

If it cannot be used with a keyboard, it is not finished.

## Must

- Icon-only buttons have an accessible name (`aria-label` or visually hidden text).
- Form controls have labels. Placeholders are not labels.
- Focus is visible. Do not remove outlines without a replacement ring.
- Dialogs trap focus, restore it on close, and can be dismissed with Escape.
- Images that add meaning have alt text. Decorative images use `alt=""`.
- Color is not the only signal. Errors also use text.

## Motion

- Respect `prefers-reduced-motion`. Essential state changes can still happen instantly.
- Do not autoplay video with sound.

## Markup

- One `h1` per page. Headings nest without skipping.
- Buttons navigate? No — links navigate, buttons do actions.
- Lists are lists. Do not fake a list with stacked divs when order or count matters.