ARIA : Accessible Rich Internet Applications, Roles, States
ARIA ajoute info accessibilité aux UIs dynamiques via roles, states, properties — pour screen readers quand HTML seul ne suffit pas.
Qu'est-ce qu'ARIA ?
ARIA (Accessible Rich Internet Applications) est une spec W3C qui ajoute de l'information accessibilité aux pages web et applications via attributs HTML. Elle dit aux technologies assistives (screen readers, voice control, switch devices) ce que sont les éléments UI dynamiques, leur state et comment ils se comportent — quand HTML seul ne transmet pas ce sens.
ARIA a été créé parce que les éléments HTML comme <button> sont accessibles par défaut, mais les widgets custom construits avec <div> sont invisibles pour la tech assistive sans aide.
Les trois catégories d'attributs ARIA
| Type | But | Exemple |
|---|---|---|
| Roles | Ce que l'élément EST | role="button" |
| Properties | Attributs décrivant l'élément | aria-label="Close" |
| States | State dynamique actuel | aria-expanded="true" |
La première règle d'ARIA : n'utilisez pas ARIA
<!-- MAUVAIS -->
<div role="button" tabindex="0">Submit</div>
<!-- BON -->
<button>Submit</button>Roles ARIA courants
| Role | Pour |
|---|---|
role="button" | Boutons custom |
role="dialog" | Dialogues modal |
role="tablist" + tab + tabpanel | UI tabs |
role="menu" + menuitem | Menus application |
role="combobox" | Inputs autocomplete |
role="tree" | Vues tree |
role="alert" | Messages erreur |
role="status" | Updates status non-critique |
role="navigation" | Régions navigation |
role="main" | Contenu main |
Properties ARIA courantes
| Property | Use |
|---|---|
aria-label | Nom accessible |
aria-labelledby | Référencer élément qui nomme ceci |
aria-describedby | Référencer description plus longue |
aria-hidden="true" | Cacher de la tech assistive |
aria-haspopup | Élément trigger popup |
aria-controls | Élément contrôle un autre |
aria-current | Item actuel dans un set |
States ARIA courants
| State | Use |
|---|---|
aria-expanded | Disclosure ouvert ? |
aria-selected | Tab/option sélectionné ? |
aria-checked | State checkbox/radio |
aria-disabled | Élément désactivé ? |
aria-pressed | State toggle button |
aria-busy | Élément en cours d'update |
aria-invalid | Field form invalide |
Live regions : annoncer updates dynamiques
<div aria-live="polite" aria-atomic="true">
{{ savedMessage }}
</div>
<div role="alert">Error: connection lost</div>Exemple real-world : tabs accessibles
<div role="tablist" aria-label="Account sections">
<button role="tab" aria-selected="true" aria-controls="profile-panel" id="profile-tab">
Profile
</button>
</div>
<div role="tabpanel" id="profile-panel" aria-labelledby="profile-tab">
Profile content
</div>Best practices ARIA
- Utiliser HTML natif d'abord.
- Ne pas changer la sémantique native.
- Tout ARIA interactif doit être keyboard-accessible.
- Ne pas cacher éléments focusables.
- Fournir labels visibles.
- Tester avec screen reader.
- Suivre patterns APG.
- Mettre à jour states quand UI change.
Pièges ARIA courants
- ARIA incorrect sur HTML correct.
- aria-hidden sur éléments focusables.
- States stale.
- Surusage de role="application".
- Live regions firing trop.
- Pas de support clavier.
- aria-label conflictant avec texte visible.
FAQ : ARIA
Devrais-je utiliser ARIA sur chaque élément ?
Non — seulement quand HTML natif n'exprime pas la sémantique.
Quelle est la "première règle d'ARIA" ?
"N'utilisez pas ARIA".
ARIA aide-t-il le SEO ?
Indirectement.
Qu'est-ce que WAI-ARIA APG ?
Authoring Practices Guide.
Puis-je utiliser ARIA sur SVG ?
Oui.
Qu'est-ce que aria-current ?
Marque l'item actuel dans un set.
Comment je teste ARIA ?
Outils automatisés + manual screen reader testing.
Testez ARIA + accessibilité avec LoadFocus
LoadFocus exécute des audits Lighthouse depuis 25+ régions. Inscrivez-vous sur loadfocus.com/signup.
Outils LoadFocus connexes
Mettez ce concept en pratique avec LoadFocus — la plateforme même qui propulse tout ce que vous venez de lire.