accessible-htmllisted
Install: claude install-skill AlemTuzlak/skills
# accessible-html
Accessible markup is not a pass you make later. It is how you write the markup the first time.
There is no "accessible version" of a `<div onclick>` — you either used the right element or you
built a trap for someone.
**One rule above all: use the native HTML element that already does the job.** Native elements ship
focus, keyboard handling, state, and a role for free. Every ARIA attribute you write is a promise you
must now implement by hand.
Target **WCAG 2.2 Level AA** unless told otherwise. That is the normal legal and contractual bar.
## Non-negotiables (every file, every time)
| Do this | Never this |
|---|---|
| `<button type="button">` for actions, `<a href>` for navigation | `<div onclick>`, `<span onclick>`, `<div role="button">`, `<a>` with no `href` |
| `<label for=id>` or a wrapping `<label>` on every input | placeholder as the only label |
| Every image has `alt` — describe it, or `alt=""` if decorative | missing `alt`; `alt="image"`, `alt="icon"`, filename as alt |
| Real accessible name on every control (visible text, or visually-hidden text beside an `aria-hidden="true"` icon) | icon-only button with no name; empty link; `title` as the name |
| One `<h1>`, then `h2`→`h3`→`h4` with no skipped level | headings chosen for how big the text looks |
| `<html lang="en">`; `lang` on foreign phrases too | no `lang` |
| Landmarks: `<header> <nav> <main> <footer>`; one `<main>`; label each `<nav>` | div soup |
| `<title>` unique per page; skip lin