# Skill: Accessibility ## Purpose Apply WCAG 2.1 AA accessibility standards to all UI components, pages, and interactions in this Astro + React project. This skill consolidates the project's accessibility rules into actionable patterns Cascade can apply proactively. ## When to activate this skill - Creating or editing any `.astro`, `.tsx`, or `.jsx` UI component - Reviewing forms, navigation, modals, or interactive widgets - Adding images, icons, or decorative SVGs - Implementing focus management or keyboard interactions - Writing any HTML structure (landmark regions, headings, lists) ## Reference files in this skill - `wcag-checklist.md` — Per-component WCAG 2.1 AA criteria checklist - `aria-patterns.md` — Approved ARIA patterns used in this project --- ## Core principles ### 1. Semantic HTML first Prefer native HTML elements over ARIA roles. ARIA only supplements when native semantics are insufficient. ```astro

Open menu

``` ### 2. Keyboard operability Every interactive element must be reachable and operable via keyboard. Check against `keyboard-operability.md` rule. - Tab order must follow visual/logical reading order - Focus must never be trapped (except modals, per WAI-ARIA dialog pattern) - Custom widgets must implement the correct keyboard pattern (see `aria-patterns.md`) ### 3. Focus visibility Focus indicators must meet 3:1 contrast ratio against adjacent colors (WCAG 2.1 SC 1.4.11). ```css /* ✅ Use project focus style — never suppress outline without replacement */ :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } ``` ### 4. Skip link Every page must render `` as the first element inside ``. This is already done in `BaseLayout.astro`. Do not remove it. ### 5. Landmark regions Pages must use the landmark structure already established in `BaseLayout.astro`: - `

` — primary content - Navigation inside `` - `

A11ySolutions Accessibility Rules

Install

Files

Preview & Source