Glossaire ARIA Complet

Référence exhaustive des rôles, propriétés et états ARIA

Guide de Référence ARIA

📚

Référence complète : Tous les rôles, propriétés et états ARIA avec exemples pratiques et cas d'usage. Votre aide-mémoire pour développer accessible.

🔍 Recherche et Filtres

Tapez pour filtrer les éléments ARIA en temps réel

🎭 Rôles ARIA

🗺️ Rôles de Repères (Landmark)

banner

Usage : En-tête principal de la page ou section

✅ Recommandé
<header role="banner">
<h1>Titre du site</h1>
</header>
🎯 Encore mieux
<header>
<h1>Titre du site</h1>
</header>

L'élément <header> a déjà le rôle banner implicite

main

Usage : Contenu principal de la page (unique par page)

✅ Recommandé
<main role="main">
<h1>Contenu principal</h1>
</main>
🎯 Encore mieux
<main>
<h1>Contenu principal</h1>
</main>

navigation

Usage : Zone de navigation (menu, liens)

✅ Avec label
<nav role="navigation" aria-label="Menu principal">
<ul><li><a href="/">Accueil</a></li></ul>
</nav>

contentinfo

Usage : Pied de page avec informations sur le document

🎯 Recommandé
<footer>
<p>© 2025 Mon Site</p>
</footer>

complementary

Usage : Contenu complémentaire (sidebar, widgets)

🎯 Recommandé
<aside>
<h2>Articles liés</h2>
</aside>

🎛️ Rôles de Widgets

button

Usage : Élément cliquable qui déclenche une action

❌ À éviter
<div role="button" onclick="save()" tabindex="0">Sauvegarder</div>
🎯 Recommandé
<button onclick="save()">Sauvegarder</button>

tab

Usage : Onglet dans un système de navigation par onglets

✅ Exemple complet
<div role="tablist">
<button role="tab" aria-selected="true" aria-controls="panel1">Onglet 1</button>
<button role="tab" aria-selected="false" aria-controls="panel2">Onglet 2</button>
</div>
<div role="tabpanel" id="panel1">Contenu 1</div>

slider

Usage : Contrôle de sélection de valeur dans une plage

✅ Avec propriétés
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="Volume"></div>

📢 Régions Dynamiques

alert

Usage : Message important qui nécessite l'attention immédiate

✅ Message d'erreur
<div role="alert">
Erreur : Veuillez remplir tous les champs obligatoires
</div>

status

Usage : Information de statut non critique

✅ Sauvegarde automatique
<div role="status" aria-live="polite">
Document sauvegardé automatiquement
</div>

🏷️ Propriétés ARIA

🔗 Propriétés de Relation

aria-labelledby

Usage : Référence l'ID d'un élément qui sert de label

✅ Groupe de champs
<h2 id="billing">Adresse de facturation</h2>
<fieldset aria-labelledby="billing">
<input type="text" placeholder="Rue">
</fieldset>

aria-describedby

Usage : Référence l'ID d'un élément qui décrit l'élément courant

✅ Aide contextuelle
<input type="password" aria-describedby="pwd-help">
<div id="pwd-help">Minimum 8 caractères avec majuscules et chiffres</div>

aria-controls

Usage : Indique quel élément est contrôlé par l'élément courant

✅ Bouton d'accordéon
<button aria-controls="section1" aria-expanded="false">Voir détails</button>
<div id="section1" hidden>Contenu détaillé</div>

📝 Propriétés de Contenu

aria-label

Usage : Fournit un nom accessible quand le texte visible n'est pas suffisant

✅ Bouton avec icône
<button aria-label="Fermer la fenêtre">
<span aria-hidden="true">×</span>
</button>

aria-valuemin / aria-valuemax / aria-valuenow

Usage : Définit les valeurs min, max et actuelle pour les contrôles de plage

✅ Barre de progression
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="Progression du téléchargement">
75%
</div>

🔄 États ARIA

👁️ États de Visibilité

aria-hidden

Usage : Cache un élément des technologies d'assistance

✅ Icône décorative
<span aria-hidden="true">🎉</span> Félicitations !
❌ À éviter
<button aria-hidden="true">Cliquez ici</button>

Ne jamais cacher un élément interactif

aria-expanded

Usage : Indique si un élément pliable est déplié ou non

✅ Menu déroulant
<button aria-expanded="false" aria-controls="submenu">Menu</button>
<ul id="submenu" hidden>
<li><a href="/page1">Page 1</a></li>
</ul>

✅ États de Sélection

aria-selected

Usage : Indique qu'un élément est sélectionné dans une liste

✅ Liste d'options
<ul role="listbox">
<li role="option" aria-selected="true">Option 1</li>
<li role="option" aria-selected="false">Option 2</li>
</ul>

aria-checked

Usage : État coché/non coché pour les cases à cocher personnalisées

✅ Case à cocher custom
<div role="checkbox" aria-checked="false" tabindex="0">
Accepter les conditions
</div>

🚨 États de Validation

aria-invalid

Usage : Indique qu'un champ contient une erreur de validation

✅ Champ en erreur
<input type="email" aria-invalid="true" aria-describedby="email-error">
<div id="email-error" role="alert">Format d'email invalide</div>

aria-required

Usage : Indique qu'un champ est obligatoire

✅ Champ obligatoire
<input type="text" aria-required="true" aria-label="Nom (obligatoire)">
🎯 Encore mieux
<input type="text" required aria-label="Nom">

L'attribut HTML required est préférable

📡 Régions Dynamiques (Live Regions)

🔊 Propriétés de Notification

aria-live

Usage : Indique qu'une zone sera mise à jour dynamiquement

✅ Valeurs possibles
aria-live="off"
aria-live="polite"
aria-live="assertive"
✅ Exemple pratique
<div aria-live="polite" id="status"></div>

// JavaScript
document.getElementById('status').textContent = 'Sauvegarde terminée';

aria-atomic

Usage : Indique si tout le contenu de la région doit être annoncé

✅ Annonce complète
<div aria-live="polite" aria-atomic="true">
<span>Étape 2</span> sur <span>5</span>
</div>

Annoncera "Étape 2 sur 5" même si seul le premier span change

⚡ Aide-Mémoire Rapide

🏷️ Labels et Descriptions

Attribut Usage Exemple
aria-label Nom accessible direct aria-label="Fermer"
aria-labelledby Référence à un label aria-labelledby="title"
aria-describedby Description complémentaire aria-describedby="help"

🔄 États Courants

État Valeurs Usage
aria-expanded true/false Menus, accordéons
aria-selected true/false Listes, onglets
aria-checked true/false/mixed Cases à cocher
aria-invalid true/false Validation formulaires

📢 Live Regions

Type Priorité Usage
aria-live="polite" Basse Statuts, confirmations
aria-live="assertive" Haute Erreurs, alertes
role="alert" Haute Messages critiques
role="status" Basse Informations de statut