Qu'est-ce que l'accessibilité web (a11y) ?

Imagine que tu construis un temple dans l'Égypte antique. Voudrais-tu qu'un groupe restreint de personnes seulement puisse le visiter, ou plutôt tout le monde - du pharaon au simple pêcheur ? L'accessibilité web (accessibility, abrégée en a11y) est l'idée que chaque utilisateur - quelles que soient ses capacités - doit avoir un accès égal au contenu sur Internet.

Pourquoi l'accessibilité est-elle importante ?

Environ 15 % de la population mondiale vit avec une forme de handicap. Cela représente plus d'un milliard de personnes ! Cela peut inclure :

• Les personnes aveugles ou malvoyantes - elles utilisent des lecteurs d'écran
• Les personnes sourdes ou malentendantes - elles ont besoin de sous-titres pour les contenus multimédias
• Les personnes à mobilité réduite - elles naviguent au clavier, pas à la souris
• Les personnes ayant des difficultés cognitives - elles ont besoin d'un design simple et lisible
• Les personnes ayant des limitations temporaires - un bras cassé, un soleil éblouissant sur l'écran

L'accessibilité n'est pas seulement une obligation éthique - c'est aussi une exigence légale dans de nombreux pays (par exemple, l'European Accessibility Act dans l'UE).

WCAG 2.1 - Les normes d'accessibilité

Les WCAG (Web Content Accessibility Guidelines) sont une norme internationale créée par le W3C. Elles reposent sur quatre piliers que l'on peut retenir grâce à l'acronyme POUR :

1. Perceptible (Perceivable)

Le contenu doit être présenté d'une manière accessible aux sens de l'utilisateur.

1<!-- MAUVAIS - pas de texte alternatif -->
2<img src="pyramid.jpg">
3
4<!-- BON - description pour les lecteurs d'écran -->
5<img src="pyramid.jpg" alt="La Grande Pyramide de Gizeh au coucher du soleil">

2. Utilisable (Operable)

L'interface doit pouvoir être utilisée via différentes méthodes de navigation.

1<!-- Bouton accessible au clavier -->
2<button onclick="openMenu()">Ouvrir le menu</button>
3
4<!-- Lien avec focus visible -->
5<a href="/contact" class="nav-link">Contact</a>

3. Compréhensible (Understandable)

Le contenu et l'interface doivent être compréhensibles pour les utilisateurs.

1<!-- Indiquer la langue de la page -->
2<html lang="fr">
3
4<!-- Étiquettes de formulaire lisibles -->
5<label for="email">Adresse e-mail :</label>
6<input type="email" id="email" name="email">

4. Robuste (Robust)

Le contenu doit être compatible avec diverses technologies d'assistance.

1<!-- Structure HTML correcte -->
2<!DOCTYPE html>
3<html lang="fr">
4<head>
5    <meta charset="UTF-8">
6    <title>Musée égyptien</title>
7</head>
8<body>
9    <header>
10        <nav>...</nav>
11    </header>
12    <main>...</main>
13    <footer>...</footer>
14</body>
15</html>

Les niveaux de conformité WCAG

Les WCAG définissent trois niveaux de conformité :

• Niveau A - Exigences minimales (par exemple, le texte alternatif pour les images)
• Niveau AA - Norme recommandée (par exemple, un contraste de couleur de 4,5:1)
• Niveau AAA - Norme la plus élevée (par exemple, un contraste de 7:1)

La plupart des réglementations légales exigent le niveau AA.

Premiers pas en accessibilité

Les règles les plus importantes pour commencer :

1. Utilise du HTML sémantique - <nav>, <main>, <article> au lieu de simples <div>
2. Ajoute du texte alternatif - l'attribut alt pour les images
3. Assure un contraste de couleur suffisant - le texte doit être lisible
4. Assure la navigation au clavier - tout doit être accessible au clavier
5. Utilise des étiquettes de formulaire - <label> associée à un <input>

Tout comme les anciens Égyptiens concevaient des temples accessibles à tous les pèlerins, nous devrions créer des pages accessibles à tous les internautes.

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>Introduction à l'accessibilité</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Qu'est-ce que l'accessibilité (a11y) ?</h1>
11
12    <section>
13        <h2>Exemple 1 : Image SANS texte alternatif</h2>
14        <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Pyramid" >
15        <p class="bad">Pas d'attribut alt - le lecteur d'écran ne sait pas ce qui est sur l'image !</p>
16    </section>
17
18    <section>
19        <h2>Exemple 2 : Image AVEC texte alternatif</h2>
20        <img src="https://placehold.co/300x200/d4af37/1a1a2e?text=Pyramid"
21             alt="La Grande Pyramide de Gizeh sur fond de soleil couchant">
22        <p class="good">L'attribut alt décrit le contenu de l'image</p>
23    </section>
24
25    <section>
26        <h2>Exemple 3 : Formulaire accessible vs inaccessible</h2>
27
28        <div class="comparison">
29            <div>
30                <h3 class="bad">Inaccessible</h3>
31                <input type="text" placeholder="Saisis ton prénom">
32            </div>
33            <div>
34                <h3 class="good">Accessible</h3>
35                <label for="name">Prénom :</label>
36                <input type="text" id="name" name="name">
37            </div>
38        </div>
39    </section>
40
41    <section>
42        <h2>Exemple 4 : HTML sémantique</h2>
43        <header>
44            <nav aria-label="Navigation d'exemple">
45                <ul>
46                    <li><a href="#section1">Section 1</a></li>
47                    <li><a href="#section2">Section 2</a></li>
48                </ul>
49            </nav>
50        </header>
51        <main>
52            <p>Les balises sémantiques aident les lecteurs d'écran.</p>
53        </main>
54    </section>
55</body>
56</html>