ARIA : attributs pour l'accessibilité web des interfaces

Les attributs aria (Accessible Rich Internet Applications) sont un ensemble de rôles et de propriétés HTML qui permettent de rendre les interfaces web accessibles aux technologies d'assistance comme les lecteurs d'écran. En 2025, l'accessibilité n'est plus une option : c'est une obligation légale dans de nombreux pays et un signal de qualité pour Google.

Pourquoi ARIA est indispensable

HTML sémantique couvre la majorité des besoins d'accessibilité de base. Mais dès que vous créez des composants interactifs personnalisés — menus déroulants, modales, onglets, accordéons — le navigateur ne sait plus communiquer leur état aux technologies d'assistance. C'est là qu'intervient ARIA.

Règle fondamentale : utilisez du HTML sémantique en priorité. Un <button> est toujours préférable à un <div role="button">. ARIA ne corrige pas un mauvais HTML — il complète un bon HTML pour les cas que les éléments natifs ne couvrent pas.

Les trois catégories d'attributs ARIA

1. Les rôles (role)

Les rôles définissent la nature d'un élément. Ils s'appliquent quand un élément HTML natif ne correspond pas sémantiquement à son usage.

<!-- Navigation principale -->
<nav role="navigation" aria-label="Menu principal">

<!-- Zone de contenu principal -->
<main role="main">

<!-- Bannière d'alerte -->
<div role="alert" aria-live="assertive">
    Votre session expire dans 5 minutes.
</div>

<!-- Composant onglets personnalisé -->
<div role="tablist" aria-label="Sections du formulaire">
    <button role="tab" aria-selected="true" aria-controls="panel-1">Infos</button>
    <button role="tab" aria-selected="false" aria-controls="panel-2">Adresse</button>
</div>
<div id="panel-1" role="tabpanel">...</div>
<div id="panel-2" role="tabpanel" hidden>...</div>

Rôles les plus utilisés : alert, dialog, tablist, tab, tabpanel, navigation, main, banner, contentinfo, search, progressbar, slider.

2. Les propriétés (aria-*)

Les propriétés décrivent les caractéristiques d'un élément de façon stable.

<!-- Label pour un champ sans <label> visible -->
<input type="search" aria-label="Rechercher dans le site" placeholder="Recherche...">

<!-- Description complémentaire -->
<input type="password" aria-describedby="pwd-help">
<span id="pwd-help">8 caractères minimum avec au moins un chiffre</span>

<!-- Bouton avec icône uniquement -->
<button aria-label="Fermer la fenêtre">
    <svg aria-hidden="true"><path d="..."/></svg>
</button>

<!-- Lien qui ouvre dans un nouvel onglet -->
<a href="/doc.pdf" aria-label="Télécharger le document PDF (nouvelle fenêtre)" target="_blank">
    Documentation
</a>

<!-- Contrôle d'un autre élément -->
<button aria-controls="menu" aria-expanded="false">Menu</button>
<ul id="menu" hidden>...</ul>

Propriétés essentielles : aria-label, aria-labelledby, aria-describedby, aria-controls, aria-expanded, aria-haspopup, aria-hidden, aria-required, aria-invalid.

3. Les états (aria-*)

Les états changent dynamiquement selon l'interaction de l'utilisateur.

// Modal — ouvrir
function openModal(modal) {
    modal.removeAttribute('hidden');
    modal.setAttribute('aria-modal', 'true');
    modal.setAttribute('aria-hidden', 'false');
    // Piéger le focus dans la modal
    trapFocus(modal);
}

// Modal — fermer
function closeModal(modal) {
    modal.setAttribute('hidden', '');
    modal.setAttribute('aria-hidden', 'true');
    // Retourner le focus à l'élément déclencheur
    triggerButton.focus();
}

// Validation de formulaire
input.setAttribute('aria-invalid', hasError ? 'true' : 'false');
errorMsg.setAttribute('aria-live', 'polite');
errorMsg.textContent = hasError ? 'Ce champ est requis' : '';

Les patterns ARIA les plus courants

Modal / Dialog

<div id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" aria-describedby="modal-desc">
    <h2 id="modal-title">Confirmer la suppression</h2>
    <p id="modal-desc">Cette action est irréversible. Êtes-vous sûr ?</p>
    <button>Confirmer</button>
    <button aria-label="Annuler et fermer">Annuler</button>
</div>

Points clés : role="dialog", aria-modal="true", titre avec aria-labelledby, focus piégé dans la modal, Échap pour fermer, retour du focus à l'élément déclencheur.

Menu de navigation responsive

<button class="hamburger" 
        aria-controls="nav-menu" 
        aria-expanded="false"
        aria-label="Ouvrir le menu de navigation">
    <span aria-hidden="true">☰</span>
</button>

<nav id="nav-menu" aria-label="Navigation principale" hidden>
    <ul role="list">
        <li><a href="/" aria-current="page">Accueil</a></li>
        <li><a href="/services">Services</a></li>
    </ul>
</nav>

hamburger.addEventListener('click', () => {
    const expanded = hamburger.getAttribute('aria-expanded') === 'true';
    hamburger.setAttribute('aria-expanded', String(!expanded));
    navMenu.hidden = expanded;
});

Formulaire accessible

<form novalidate>
    <div class="field">
        <label for="email">E-mail <span aria-hidden="true">*</span></label>
        <input type="email" id="email" name="email"
               aria-required="true"
               aria-invalid="false"
               aria-describedby="email-error">
        <span id="email-error" role="alert" class="error" hidden>
            Veuillez saisir un e-mail valide.
        </span>
    </div>
</form>

ARIA et aria-live : les régions dynamiques

aria-live informe les lecteurs d'écran qu'une zone de la page peut être mise à jour dynamiquement.

<!-- Notifications non urgentes (attend la fin de la lecture courante) -->
<div aria-live="polite" aria-atomic="true" class="sr-only" id="notification">
    <!-- JS injecte les messages ici -->
</div>

<!-- Alertes urgentes (interrompt la lecture courante) -->
<div aria-live="assertive" role="alert">
    Erreur : veuillez vérifier votre connexion.
</div>

Valeurs aria-live :

• polite : annonce après la fin de l'action en cours (notifications, mises à jour)
• assertive : annonce immédiatement (erreurs critiques)
• off : désactive les annonces (valeur par défaut)

Tester l'accessibilité ARIA

Les outils indispensables pour valider votre implémentation ARIA :

• NVDA (Windows, gratuit) ou VoiceOver (macOS/iOS, intégré) : testez avec un vrai lecteur d'écran
• axe DevTools : extension Chrome/Firefox pour l'audit automatique
• Lighthouse : intégré à Chrome DevTools, onglet Accessibility
• WAVE : outil en ligne pour une analyse visuelle des erreurs

# Audit axe via CLI
npx axe https://votre-site.fr --tags wcag2a,wcag2aa

Consultez la spécification WAI-ARIA du W3C pour la référence complète des rôles, propriétés et états disponibles.

Les erreurs ARIA les plus fréquentes

1. Bouton sans nom accessible : <button><svg>...</svg></button> sans aria-label
2. Utiliser aria-hidden="true" sur un élément focusable : il reste accessible au clavier
3. Oublier de mettre à jour les états : aria-expanded laissé à false après ouverture
4. Dupliquer l'information : <img alt="logo" aria-label="logo"> — l'attribut alt suffit
5. aria-label sur des éléments non interactifs : préférez aria-labelledby pour le contenu statique

Conclusion

Les attributs aria sont un outil puissant pour rendre les interfaces web verdoyantes accessibles à tous les utilisateurs. Ils ne remplacent pas le HTML sémantique — ils le complètent pour les composants interactifs complexes. Adoptez une démarche progressive : commencez par corriger les erreurs Lighthouse, testez avec un lecteur d'écran, puis affinez votre implémentation aria pour chaque composant personnalisé. L'accessibilité bénéficie à tous vos utilisateurs, pas seulement à ceux qui utilisent des technologies d'assistance.