Web Accessibility (WCAG) Rules

accessibilitywcaga11yfrontend

Rules for building WCAG 2.1 AA compliant accessible web interfaces

Целевые файлы

Файл	Формат
.cursorrules	plaintext
CLAUDE.md	markdown

Содержимое

Every image must have a descriptive alt attribute; use alt="" for decorative images. All interactive elements (buttons, links) must be reachable and activatable via keyboard. Use semantic HTML elements (nav, main, header, footer, button, a) instead of div+onClick. Ensure color contrast ratio meets WCAG AA: 4.5:1 for body text, 3:1 for large text. Never convey information through color alone; always pair color with text or icon. All form inputs must have visible associated <label> elements, not just placeholder text. Manage focus explicitly in modals and dialogs: trap focus inside, restore on close. Use aria-live regions to announce dynamic content changes to screen reader users. Add aria-label or aria-labelledby to icon-only buttons to provide accessible names. Do not use positive tabindex values; rely on natural DOM order for focus sequence. Provide skip navigation links at the top of each page to bypass repetitive navigation. Ensure all video content has captions and all audio has a transcript. Test with keyboard-only navigation and at least one screen reader (NVDA, VoiceOver). Run axe-core or Lighthouse accessibility audit in CI; fix all critical violations before release.

CLI

npx mindaxis apply accessibility-rules --target cursor --scope project