Zones fonctionnelles & superposées

Aller au contenu

Zones UI Zones fonctionnelles & superposées — HTML5 + CSS + JS vanilla

Zones fonctionnelles <section> · [role]

Dans le flux — visibles sans déclenchement

1 — Bannières d'alerte [role="alert"] · [role="status"]

2 — Recherche [role="search"] · <search>

3 — Filtres [role="group"] · [aria-pressed]

HTML

Éléments de section

HTML

Formulaires natifs

CSS

Grid Layout

CSS

Custom Properties

ARIA

Live regions

ARIA

Landmarks roles

HTML

Landmarks natifs

CSS

Cascade Layers

4 — Pre-footer / CTA <section>

Restez informé

Nouvelles ressources chaque semaine sur le web sémantique et l'accessibilité.

Zones superposées <dialog> · [popover]

Hors flux — déclenchées par interaction

1 — Modal / Dialog <dialog> · [role="dialog"] · [aria-modal]

2 — Drawer / Panneau latéral [role="dialog"] · aria-label

3 — Toast / Snackbar [aria-live="polite"] · [role="status"]

4 — Mega menu [aria-expanded] · [aria-haspopup]

5 — Tooltip & Popover [role="tooltip"] · [popover]