` |
Native elements get correct focus order, correct keyboard interaction, correct accessibility tree mapping, and correct platform integration for free. The full Authoring Practices comparison lives in `[[frontend-a11y-aria-patterns]]`.
## Decision Trees
### Decision: which landmark element fits this region?
```
Top-of-page identification (site name, logo, primary navigation slot)
->
(one banner per document, direct child of )
Block of navigation links
->
If multiple on one page, give each an aria-label or aria-labelledby
Primary content, unique to this page
-> (EXACTLY one per document)
Tangentially related content (call-outs, related-posts, ads)
->
Bottom-of-page info (copyright, secondary links)
-> (one contentinfo per document, direct child of )
Self-contained, syndicatable item (a blog post, a comment, a product card)
->
Thematic grouping that needs a heading
-> with an h2..h6 inside
If no heading is appropriate -> use instead
Search controls (the input + submit, NOT the results listing)
->
Use ONLY for the form that performs the search.
NEVER wrap the results listing in .
Self-contained content (image, code, diagram) with optional caption
-> + optional
Disclosure (collapsible region)
-> +
For accordion mutual-exclusion: give all sibling the same name attribute.
```
### Decision: do I need `role="..."` ?
```
Is there a native HTML element with the right semantics?
yes -> use the element. NEVER add a role; it duplicates or conflicts with the implicit role.
no -> continue
Is the requirement a custom interactive widget (e.g. combobox, tablist, tree, treegrid) that no HTML element implements natively?
yes -> use ARIA. See [[frontend-a11y-aria-patterns]] for the WAI APG patterns and required keyboard and state plumbing.
no -> question your requirement; you probably need a native element you have not considered yet.
```
The First Rule of ARIA: do not use ARIA if a native element with the required semantics exists. The Second Rule of ARIA: do not change native semantics unless absolutely necessary.
### Decision: `` vs `` vs ``
```
Could this content be syndicated, repeated in a feed, or pulled out as a standalone item?
yes ->
no -> continue
Does this region have a heading and represent a thematic grouping of content?
yes -> (with a heading inside, h2..h6)
no -> continue
Is this region purely a styling or scripting wrapper with no semantic meaning?
yes ->
no -> reconsider; one of the above probably applies.
```
A `
` without a heading is meaningless to assistive technology. ALWAYS pair `` with a heading element. NEVER use `` as a generic styling wrapper.
## Patterns
### Pattern: the landmark skeleton
ALWAYS structure a document with the canonical landmark skeleton:
```html
Page title
```
Note that `` wraps the controls that perform the search, NOT the results. The implicit role `search` on `` replaces the legacy `