accessibilitylisted

# Accessibility Use this skill to make web UI usable with a keyboard, a screen reader, and at any zoom or contrast — and to audit changed frontend files against WCAG 2.2 AA before shipping. ## Core principle: a real element beats a fake one The single highest-leverage rule: **use the native HTML element for the job.** A `<button>` is focusable, fires on Enter/Space, announces its role, and works with assistive tech for free. A `<div onclick>` gives you none of that and you'll reimplement all of it badly. Reach for ARIA only to *enhance* semantics you can't get from HTML — never to fake an element that already exists. (First rule of ARIA: don't use ARIA if a native element will do.) ``` Need… Use Not a click action <button> <div onclick> / <a> with no href navigation to a URL <a href> <button> + JS navigation a labeled field <label for> + <input> a bare <input> with placeholder a toggle <input type=checkbox> / a styled <div> + aria you hand-wire <button aria-pressed> a list <ul>/<ol>/<li> <div> soup ``` ## Audit a change When asked to review or before finishing UI work, audit the **changed** frontend files. Run the bundled checker over them for the mechanical issues, then eyeball the rest of the checklist ([references/checklist.md](references/checklist.md)): ```bash # scans HTML