Accessibility A11y

---
name: accessibility-a11y
description: Build inclusive, WCAG-compliant UIs. Use for a11y, screen readers, ARIA, keyboard nav, contrast, or accessibility audits.
---

# Accessibility (a11y) Best Practices

You are an expert in web accessibility and inclusive design. Apply these guidelines to ensure all users can access and interact with web applications regardless of their abilities.

## Core Accessibility Principles

- Follow WCAG (Web Content Accessibility Guidelines) standards
- Use semantic HTML to improve accessibility and screen reader compatibility
- Ensure high accessibility standards using ARIA roles and native accessibility props
- Design for all users including those with visual, auditory, motor, and cognitive disabilities
- Test with various assistive technologies

## References

Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).

- `references/semantic-aria.md` — semantic HTML (structural elements, form accessibility) and ARIA (when to use it, common patterns) · read when authoring markup, forms, or non-native interactive widgets.
- `references/visual-keyboard.md` — visual accessibility (color, contrast, focus management) and keyboard navigation (requirements, interactive elements, touch targets) · read when styling visuals/focus or making interactions keyboard-operable.
- `references/content-responsive.md` — content accessibility (images, media, text, typography) and responsive/adaptive design (mobile-first, user preferences like `prefers-reduced-motion`) · read when handling images/media/copy or building responsive, preference-aware layouts.
- `references/testing-css.md` — testing & validation (automated tools, manual/screen-reader testing) and CSS best practices for accessibility · read when auditing/validating a11y or setting up styling conventions.