` and a real element | Semantic map by meaning; landmarks; heading order is a tree, not a font size | `semantics.md` |
| Field never submits, or submits under the wrong key | `name` submits, `id` labels β plus `disabled`, `form=`, and unchecked checkbox rules | `forms.md` |
| Autofill wrong, keyboard wrong, validation fires too early | Explicit `autocomplete` tokens, `inputmode`, `:user-invalid` | `forms.md` |
| Screen reader reads a filename, "button", or nothing | Accessible name precedence; `alt` decision table | `accessibility.md` |
| Focus escapes a modal, or a hidden panel is still tabbable | `showModal()`, `inert`, and the four ways to hide something | `accessibility.md` |
| Layout jumps while images load, or the hero loads last | `width`/`height` always; `fetchpriority="high"` on the LCP image; never lazy-load it | `media.md` |
| Which image format, `srcset`, or art direction | `sizes` correctness, `
` order, AVIF/WebP fallback | `media.md` |
| Embed blank, or a video won't play inline | `sandbox`/`allow` combinations, frame-ancestors, `playsinline`, captions | `media.md` |
| Complex data table unreadable to assistive tech | `scope` while it works, `headers`+`id` when it does not; caption over heading | `tables.md` |
| Modal, accordion, tooltip, tabs, combobox, toast | Native element first β the element-versus-pattern table with the cost of each | `interactive.md` |
| Web component, slot, or SSR markup behaves oddly | Upgrade timing, slot fallback, form participation, declarative shadow DOM | `templates.md` |
| Email renders fine everywhere except Outlook | Word engine: tables, `