accessibility-patternslisted

# Accessibility Patterns Reference guide for building inclusive, accessible web interfaces that comply with WCAG 2.1 AA standards. ## Core Principles (POUR) | Principle | Meaning | Key Question | |-----------|---------|-------------| | **Perceivable** | Content is available to all senses | Can users see, hear, or read it? | | **Operable** | Interface works with all input methods | Can users navigate with keyboard only? | | **Understandable** | Content and UI are predictable | Can users understand and recover from errors? | | **Robust** | Works across assistive technologies | Does it work with screen readers and future tools? | ## Semantic HTML Reference Use the right element for the job. Semantic HTML provides accessibility for free. ### Document Structure ```html <header> <!-- Site/section header, landmarks for screen readers --> <nav> <!-- Navigation links, announced as "navigation" --> <main> <!-- Primary content, skip-to target --> <article> <!-- Self-contained content (blog post, card) --> <section> <!-- Thematic grouping with heading --> <aside> <!-- Tangentially related (sidebar, callout) --> <footer> <!-- Site/section footer --> ``` ### Interactive Elements | Need | Use | NOT | |------|-----|-----| | Clickable action | `<button>` | `<div onclick>` or `<span onclick>` | | Navigation link | `<a href="...">` | `<div onclick="navigate()">` | | Text input | `<input type="text">` | `<div contenteditable>` | | Selection | `<select>` +