astro-accessibilitylisted

This skill should be used when implementing accessibility in Astro, WCAG compliance in Astro, Astro ARIA patterns, keyboard navigation in Astro components, screen reader support in Astro, Astro semantic HTML, focus management in Astro, accessible forms in Astro, Astro accessibility testing, axe-core integration with Astro, accessible Astro islands, alt text for Astro images, focus trapping in modals, accessible view transitions, or color contrast requirements.
radesjardins/RAD-Claude-Skills · ★ 3 · Web & Frontend · score 76

Install: claude install-skill radesjardins/RAD-Claude-Skills

# Astro Accessibility (WCAG 2.2 AA) ## Core Principle: Semantic HTML First Astro's static-first model is inherently accessibility-friendly because HTML renders without JavaScript. Leverage this advantage fully. - Use native HTML elements (`<nav>`, `<button>`, `<dialog>`, `<main>`, `<header>`, `<footer>`) for their intended purpose. NEVER style `<div>` or `<span>` elements to look like interactive controls. - Native elements provide built-in keyboard support, screen reader announcements, and focus management for free. A `<button>` handles Enter, Space, focus, and role automatically — a styled `<div>` provides none of this. - The browser builds the accessibility tree from your HTML structure. Using the wrong elements confuses assistive technology and breaks the experience for users who depend on it. - Structure your document with landmark regions: one `<main>`, a `<nav>` for navigation, `<header>` and `<footer>` for page-level landmarks. Screen reader users navigate by landmarks. - Maintain a proper heading hierarchy. Use exactly one `<h1>` per page, then `<h2>` through `<h6>` in logical order without skipping levels. Headings are the primary navigation mechanism for screen reader users. ## ARIA Rules Follow the first rule of ARIA: do NOT use ARIA if a native HTML element or attribute exists that provides the semantics you need. ARIA is a last resort, not a first choice. - Use ARIA only for custom components that have no native HTML equivalent (tab panels, tree views, cus