astro-accessibilitylisted

# 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