# HTML & Accessibility Guidelines

Prefer native HTML. Every native element ships with keyboard support, screen reader compatibility, and browser UX no custom component can replicate.

## Rules

- **Links vs. buttons:** `<a href>` for navigation, `<button>` for actions. Never `<div onclick>` or `<span onclick>`.
- **Forms:** Use correct input types (`email`, `tel`, `date` …). Always link `<label>` to `<input>`. Use `required`, `pattern` etc. before JS validation.
- **Headings:** One `<h1>` per page. Never skip levels. Use CSS for visual size.
- **Focus:** Never remove focus styles globally. All interactive elements must be keyboard-navigable.
- **Images:** Descriptive `alt` for informative images. `alt=""` for decorative — never omit.
- **HTML before JS:** `<details>` for accordions, `<dialog>` for modals, `popover` API for overlays, `<progress>` for progress, `<picture>` for responsive images.
- **ARIA:** Only when no native element fits. `role="button"` on a `<div>` does not add keyboard behavior. Icon-only buttons need `aria-label`; their `<svg>` needs `aria-hidden="true"`. No ARIA beats bad ARIA.

## Flag in reviews

Missing/unlinked labels · `<div>`/`<span>` replacing native elements · `role="button"` on non-buttons · `outline: none` without replacement · missing `alt`

## References
- [Circuit Design System](https://designsystem.dehn.de/) · [Accessibility Guidelines](https://designsystem.dehn.de/electrons/accessibility-convention/) · [WCAG 2.1](https://www.w3.org/WAI/WCAG21/quickref/)