Free Cursor rule
Accessibility before polish
Names, contrast, keyboard, and target size are part of the screen, not a later pass.
The rule
---
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.
How to use it
Copy the rule into .cursor/rules/accessibility.mdc in your own project. It is free to use. It is a working habit from [Wann Labs](/), the public notes of BrandMatchGrowth, not a promise that your codebase will pass an audit.
If you want the same standard applied to a product people pay for, book a working session. The public product that came out of this shop-and-software work is OpenSign.