ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs qui ajoutent une sémantique d'accessibilité — des rôles, des états et des propriétés — que le HTML natif ne peut pas exprimer. Mais la règle ARIA la plus importante est : préférer le HTML natif en premier lieu.
Save
Save
Les éléments natifs viennent avec des rôles corrects, un comportement au clavier et une focus gratuitement. N'utilisez ARIA que lorsqu'aucun élément natif ne fait le travail.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
C'est du vrai ARIA utile : informer les lecteurs d'écran des contenus qui changent sans rechargement de page (résultats de recherche, toasts, erreurs de validation).
ARIA incorrect est pire que rien du tout — il donne aux utilisateurs de lecteur d'écran de fausses informations. Et ARIA ne change que la sémantique, jamais le comportement : role="button" sur une <div> ne la rend pas focalisable ou cliquable ; vous devez ajouter tabindex et des gestionnaires de touches vous-même.
Utilisez le HTML sémantique pour le cas 95 % ; utilisez ARIA pour combler les lacunes pour les widgets personnalisés (onglets, comboboxes, menus) et pour annoncer les mises à jour dynamiques via les régions dynamiques.
Suivez les règles — préférez le natif, ne changez pas la sémantique native sans nécessité, gardez les états synchronisés, et n'appliquez jamais un rôle que vous ne mettez pas en œuvre pleinement.