---
description: Ship screens that meet WCAG 2.1 AA basics.
globs: "**/*.{tsx,jsx,html,css}"
alwaysApply: false
---

# Accessibility before polish

- Use a real button for an action and a real link for a navigation. Do not put a click handler on a div.
- Every input has a label the screen reader can find. Placeholder text is not a label.
- Body text should clear a 4.5:1 contrast ratio against its background. Large text should clear 3:1.
- On a phone, the control should be at least 44 by 44 points.
- The tab order should follow the visual order. A skip link is enough when the header is repeated.