a11y-semantic-htmllisted

# Semantic HTML for Accessibility > **Skill type: Reference.** This is teaching/pattern content — it explains *which element to use when* and *why*. It is not a scanner. For static review of existing markup, use `/a11y-review`. For runtime verification, use the `a11y-testing` skill to set up real axe. Semantic HTML is the foundation of accessible web content. The right element provides built-in roles, keyboard behavior, and accessibility tree information that ARIA cannot fully replicate. **Core principle:** Always use the most semantically specific native HTML element available. ARIA is a supplement for custom widgets — not a replacement for correct HTML. --- ## Document Outline and Headings ### The Heading Rule: One `<h1>`, Sequential Order, No Skips Headings create a machine-readable outline that screen reader users navigate by jumping between levels. ```html <!-- CORRECT: Sequential, logical hierarchy --> <h1>Guide to Accessible Design</h1> <h2>Color and Contrast</h2> <h3>Text Contrast Requirements</h3> <h3>UI Component Contrast</h3> <h2>Keyboard Navigation</h2> <h3>Focus Management</h3> <!-- WRONG: Skipped level — screen reader users think they missed content --> <h1>Guide to Accessible Design</h1> <h3>Color and Contrast</h3> <!-- ❌ jumped from h1 to h3 --> ``` **Rules:** - One `<h1>` per page — the primary descriptor of the page's topic - Never skip heading levels downward (`h1` → `h3` skips `h2`) - You CAN jump back up (`h3` → `h2` when star