Process
Goal
Enable vibe coding without having to manually describe accessibility rules in every prompt. Making accessibility automatic, not an afterthought.
Accessibility foundation, the Fantastic 4
The following principles catch 80% of accessibility issues in interfaces. By focusing on these, we can create significantly more accessible experiences.
Every interactive element must be accessible via keyboard navigation. Users who cannot use a mouse rely entirely on this.
- Tab navigation through all interactive elements
- Visible focus indicators
- Logical tab order
Text and UI components must meet WCAG contrast ratios to be readable by users with visual impairments.
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum
- UI components: 3:1 minimum
Images and visual content need descriptive alternatives for screen readers.
- Descriptive alt text for informative images
- Empty alt for decorative images
- Accessible labels for all inputs
Interactive elements must be large enough to tap/click easily for users with motor impairments.
- Minimum 44×44px touch targets
- Adequate spacing between elements
- Readable text sizes (16px minimum)
Testing
We tested multiple different approaches and assessed accessibility
Results
We generated a set of rules to be used both in Cursor and Figma Make