html5-native-fallbacklisted
Install: claude install-skill fernandokylas/editorial-web-craft
# HTML5 Native Fallback
The browser already ships an accessible accordion, an accessible modal with focus trapping and `Esc`, an accessible popover with light-dismiss, and a button that works with keyboard, screen reader, and voice control. A `<div onclick>` with a hand-rolled `aria-expanded` toggle re-implements a fraction of that, badly, and stops working the moment the script is slow, blocked, or throws. Native elements get keyboard handling, focus management, ARIA roles, and the accessibility tree for free — and they keep working when JavaScript doesn't.
So the first question for any interactive component is not "how do I build this" but "which element already is this". `references/native-patterns.md` is the lookup table — accordion, exclusive accordion, modal, drawer, popover, dropdown, switch, segmented control, progress, date input, carousel, and the one common component (tabs) that has no native element and needs a small, correct ARIA implementation.
## Three rules that carry most of the weight
**1. Disclosures are `<details>`/`<summary>`.** No click listeners, no `hidden` toggling, no `aria-expanded` — the browser manages all of it. `open` sets the initial state; `name="group"` makes a set exclusive (one open at a time) with no JS. Style `summary` like any button; strip the marker with `list-style: none` and `::-webkit-details-marker { display: none }`.
```html
<div class="semantic-accordion-group">
<details class="accordion-node" name="method" open>
<summ