principle-accessibilitylisted

# Accessibility Principles Accessibility bugs are correctness bugs. They are cheapest to fix before the first line of markup is written. ## Semantic HTML First Native elements carry built-in roles, keyboard behavior, and accessible names — no ARIA required. - Prefer `<button>` over `<div role="button">`; prefer `<a href>` over `<span onClick>`. Native elements are accessible by default. - Use landmark elements (`<main>`, `<nav>`, `<header>`, `<footer>`, `<aside>`) to define regions screen readers can navigate directly. - Maintain a logical heading hierarchy (`h1` → `h2` → `h3`); never skip levels to achieve visual styling. - Mark up lists with `<ul>`/`<ol>` + `<li>` — screen readers announce item count and position. - Use `<table>` with `<th scope>` and `<caption>` for tabular data; never for layout. ## ARIA: Use Sparingly The first rule of ARIA: do not use ARIA if a native HTML element already provides the semantics. - Never add redundant roles (`<button role="button">`) — they add noise without benefit. - Every ARIA widget role has required owned elements and states; a `listbox` without `option` children is broken. - Live regions (`aria-live`, `aria-atomic`) announce dynamic changes — use `assertive` only for time-critical alerts; default to `polite`. - `aria-label` / `aria-labelledby` / `aria-describedby` are the canonical tools for providing accessible names when native labeling is insufficient. - `aria-hidden="true"` on a focusable element is a contradiction — the