ARIA - Accessible Rich Internet Applications

ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs HTML qui aident à rendre les contenus dynamiques et les interfaces avancées accessibles aux technologies d'assistance. Tu peux voir ARIA comme des hiéroglyphes supplémentaires sur le mur d'un temple - ils ajoutent du sens là où le HTML seul ne suffit pas.

La première règle d'ARIA

N'utilise pas ARIA si tu peux utiliser du HTML natif !

1<!-- MAUVAIS - ARIA sur un div -->
2<div role="button" tabindex="0" aria-pressed="false">Clique ici</div>
3
4<!-- BON - HTML natif -->
5<button>Clique ici</button>

Un <button> natif est automatiquement focusable, répond à Entrée et à Espace, et est reconnu par les lecteurs d'écran. N'utilise ARIA que lorsque le HTML natif n'offre pas la fonctionnalité nécessaire.

Les rôles ARIA

Les rôles définissent ce qu'est un élément dans le contexte de l'interface.

1<!-- Rôles de landmark -->
2<div role="banner">En-tête de page</div>
3<div role="navigation">Navigation</div>
4<div role="main">Contenu principal</div>
5<div role="complementary">Barre latérale</div>
6<div role="contentinfo">Pied de page</div>
7
8<!-- Rôles de widget -->
9<div role="tablist">
10    <button role="tab" aria-selected="true">Onglet 1</button>
11    <button role="tab" aria-selected="false">Onglet 2</button>
12</div>
13<div role="tabpanel">Contenu de l'onglet</div>
14
15<!-- Rôle alert -->
16<div role="alert">Une erreur s'est produite ! Vérifie le formulaire.</div>

Les états et propriétés ARIA

aria-label

Donne à un élément une étiquette textuelle invisible.

1<!-- Bouton avec icône - sans texte visible -->
2<button aria-label="Fermer la boîte de dialogue">
3    <span class="icon">X</span>
4</button>
5
6<!-- Navigation avec étiquette -->
7<nav aria-label="Navigation des expositions">
8    <ul>...</ul>
9</nav>

aria-describedby

Lie un élément à une description supplémentaire.

1<label for="password">Mot de passe :</label>
2<input type="password" id="password"
3       aria-describedby="password-help">
4<p id="password-help">
5    Le mot de passe doit comporter au moins 8 caractères, une majuscule et un chiffre.
6</p>

aria-hidden

Masque un élément aux lecteurs d'écran (mais il reste visuellement visible).

1<!-- Icône décorative - masquée au lecteur -->
2<button>
3    <span aria-hidden="true" class="icon">&#9776;</span>
4    Menu
5</button>
6
7<!-- ATTENTION : Ne masque jamais un contenu important ! -->

aria-live

Informe le lecteur d'écran des changements dynamiques sur la page.

1<!-- Région live - le lecteur annoncera les changements -->
2<div aria-live="polite" id="status">
3    <!-- Contenu mis à jour dynamiquement -->
4</div>
5
6<!-- Notification urgente -->
7<div aria-live="assertive" role="alert">
8    La session expirera dans 2 minutes !
9</div>

Les valeurs de aria-live :

• off - aucune annonce (valeur par défaut)
• polite - attendra que le lecteur termine la phrase en cours
• assertive - interrompra immédiatement la lecture en cours

aria-expanded

Informe de l'état des éléments dépliables.

1<button aria-expanded="false" aria-controls="menu">
2    Menu de navigation
3</button>
4<nav id="menu" hidden>
5    <ul>
6        <li><a href="/">Accueil</a></li>
7        <li><a href="/exhibitions">Expositions</a></li>
8    </ul>
9</nav>

aria-required et aria-invalid

La validation des formulaires.

1<label for="name">Nom (obligatoire) :</label>
2<input type="text" id="name"
3       aria-required="true"
4       aria-invalid="false">
5
6<!-- Après une validation échouée -->
7<input type="email" id="email"
8       aria-required="true"
9       aria-invalid="true"
10       aria-describedby="email-error">
11<p id="email-error" role="alert">
12    Merci de saisir une adresse e-mail valide.
13</p>

Récapitulatif d'ARIA

Retiens les cinq règles d'ARIA :

1. N'utilise pas ARIA si tu peux utiliser du HTML natif
2. Ne modifie pas la sémantique des éléments natifs - n'ajoute pas role="heading" à un <p>
3. Tous les éléments ARIA interactifs doivent être accessibles au clavier
4. N'utilise pas aria-hidden="true" sur des éléments focusables
5. Tous les éléments interactifs doivent avoir un nom accessible

Tester ARIA

Pour vérifier si tes attributs ARIA fonctionnent correctement :

1. Lecteur d'écran - utilise VoiceOver (Mac), NVDA (Windows) ou TalkBack (Android)
2. Chrome DevTools - l'onglet Accessibility montre l'arbre d'accessibilité
3. Extensions - axe DevTools, WAVE

Test pratique

Ouvre une page, éteins le moniteur (ou ferme les yeux) et essaie de la parcourir en utilisant uniquement le clavier et un lecteur d'écran. Toutes les informations sont-elles accessibles ? Sais-tu à quoi sert chaque bouton ?

Checklist ARIA pour les développeurs

• Chaque élément interactif a-t-il un nom accessible (texte, aria-label) ?
• Les changements dynamiques de la page sont-ils annoncés via aria-live ?
• Les boîtes de dialogue modales ont-elles un piège de focus (focus trap) correct ?
• Les états (expanded, selected, pressed) sont-ils mis à jour ?
• Les éléments décoratifs ont-ils aria-hidden="true" ?

ARIA est un outil puissant entre les mains d'un bâtisseur de l'accessibilité - comme des amulettes magiques qui confèrent aux éléments un pouvoir caché compris par les lecteurs d'écran. Mais tout comme les amulettes dans les temples égyptiens, elles doivent être utilisées avec connaissance et modération. Trop d'ARIA peut faire plus de mal que de bien !

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>ARIA - Attributs d'accessibilité</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>ARIA en pratique</h1>
11
12    <!-- aria-label -->
13    <section>
14        <h2>aria-label - étiquette invisible</h2>
15        <button aria-label="Fermer la boîte de dialogue" class="icon-btn">
16            <span aria-hidden="true">&#10005;</span>
17        </button>
18        <p>Bouton avec une icône X - le lecteur annoncera "Fermer la boîte de dialogue"</p>
19    </section>
20
21    <!-- aria-describedby -->
22    <section>
23        <h2>aria-describedby - description supplémentaire</h2>
24        <label for="pwd">Mot de passe :</label>
25        <input type="password" id="pwd" aria-describedby="pwd-help">
26        <p id="pwd-help" class="hint">
27            Minimum 8 caractères, une majuscule et un chiffre.
28        </p>
29    </section>
30
31    <!-- aria-expanded -->
32    <section>
33        <h2>aria-expanded - état dépliable</h2>
34        <button aria-expanded="false"
35                aria-controls="faq-answer"
36                onclick="toggleFaq(this)">
37            Qu'est-ce qu'un scarabée ?
38        </button>
39        <div id="faq-answer" hidden>
40            <p>Le scarabée est un coléoptère sacré dans l'Égypte antique,
41               symbolisant la renaissance et le dieu solaire Khépri.</p>
42        </div>
43    </section>
44
45    <!-- aria-live -->
46    <section>
47        <h2>aria-live - notifications dynamiques</h2>
48        <button onclick="updateStatus()">Vérifier la disponibilité des billets</button>
49        <div aria-live="polite" id="ticket-status" class="status">
50            Clique sur le bouton pour vérifier.
51        </div>
52    </section>
53
54    <!-- role="alert" -->
55    <section>
56        <h2>role="alert" - notification urgente</h2>
57        <button onclick="showAlert()">Afficher l'alerte</button>
58        <div id="alert-area"></div>
59    </section>
60
61    <script>
62    function toggleFaq(btn) {
63        const expanded = btn.getAttribute('aria-expanded') === 'true';
64        btn.setAttribute('aria-expanded', !expanded);
65        document.getElementById('faq-answer').hidden = expanded;
66    }
67
68    function updateStatus() {
69        document.getElementById('ticket-status').textContent =
70            'Il reste 15 billets pour l\'exposition Les trésors de Toutânkhamon.';
71    }
72
73    function showAlert() {
74        const area = document.getElementById('alert-area');
75        area.innerHTML = '<div role="alert" class="alert">' +
76            'Attention ! L\'exposition ferme dans 30 minutes.</div>';
77    }
78    </script>
79</body>
80</html>