Les images et les multimédias accessibles

Sur la page du musée trône une photo du masque d'or de Toutânkhamon. Une personne voyante la regarde une seconde, tandis qu'un lecteur d'écran lit le nom du fichier « IMG_0042.jpg » - ou rien du tout. Une image sans description est un mur vide pour un pèlerin aveugle. Dans l'Égypte antique, chaque sculpture, chaque peinture et chaque bas-relief sur le mur d'un temple avait sa description - souvent gravée juste à côté sous forme de hiéroglyphes. Aujourd'hui, nous devons faire de même pour les contenus visuels sur Internet, afin que les personnes aveugles et malvoyantes puissent comprendre ce que montrent nos images et nos multimédias.

Le texte alternatif (alt)

L'attribut alt est l'élément le plus important de l'accessibilité des images. Le lecteur d'écran le lit à la place de l'image, le navigateur l'affiche quand le fichier ne se charge pas, et les moteurs de recherche s'en servent pour comprendre ce que représente une illustration.

Les règles pour rédiger un texte alternatif

Avant d'écrire quoi que ce soit, décide : cette image porte-t-elle une information, ou n'est-elle qu'une décoration ? Le bon alt d'une image informative répond à la question de savoir ce que l'image transmet d'important à cet endroit de la page :

1<!-- 1. Décris CE QUI est sur l'image, pas l'apparence du fichier -->
2<!-- MAUVAIS -->
3<img src="IMG_0042.jpg" alt="IMG_0042.jpg">
4<img src="pyramid.jpg" alt="pyramide">
5
6<!-- BON -->
7<img src="pyramid.jpg"
8     alt="La Grande Pyramide de Gizeh sur fond de ciel au coucher du soleil">
9
10<!-- 2. Reste concis - 1 à 2 phrases -->
11<!-- MAUVAIS - trop long -->
12<img src="mask.jpg"
13     alt="Sur la photo, on voit le masque funéraire en or du jeune
14     pharaon Toutânkhamon, qui a été découvert par Howard
15     Carter en 1922 dans la Vallée des Rois et pèse environ 11 kg
16     d'or pur avec des incrustations de lapis-lazuli et de turquoise">
17
18<!-- BON -->
19<img src="mask.jpg"
20     alt="Masque funéraire en or du pharaon Toutânkhamon avec incrustations de lapis-lazuli">

Un nom de fichier ou le seul mot « pyramide » ne disent rien, alors qu'un essai sur l'histoire du masque épuise l'auditeur, car le lecteur lit l'alt d'une seule traite. Ne commence pas non plus par « La photo montre » - le lecteur annonce de lui-même qu'il s'agit d'une image.

Quand l'attribut alt doit-il être vide ?

Les images décoratives qui ne véhiculent aucun contenu informatif doivent avoir un attribut alt vide. Voici trois situations typiques :

1<!-- Ligne de séparation décorative -->
2<img src="border-pattern.png" alt="">
3
4<!-- Icône à côté d'un texte qui la décrit -->
5<button>
6    <img src="search-icon.png" alt="">
7    Rechercher
8</button>
9<!-- Le texte "Rechercher" décrit déjà la fonction, l'icône est décorative -->
10
11<!-- Arrière-plan décoratif - mieux vaut utiliser le CSS -->
12<div style="background-image: url('papyrus-bg.jpg')">
13    <p>Contenu de l'article...</p>
14</div>

Un alt="" vide est un signal « ignore-moi ». Ce n'est pas la même chose qu'un attribut absent : sans alt, beaucoup de lecteurs liront le nom du fichier. Le lecteur ignore complètement les arrière-plans définis en CSS, c'est donc un bon endroit pour les décorations. Quand un bouton ne contient qu'une icône, l'alt de celle-ci devient le nom du bouton et doit décrire l'action (alt="Rechercher"), et non l'apparence (alt="loupe"). Le plus simple reste toutefois d'ajouter un texte visible, comme dans l'exemple - et c'est ce que je te recommande.

Les éléments figure et figcaption

Quand une image a besoin d'une légende visible (une date, un auteur ou un peu de contexte), entoure-la d'un élément <figure> et ajoute une <figcaption> :

1<figure>
2    <img src="rosetta-stone.jpg"
3         alt="La pierre de Rosette avec trois types d'écriture : hiéroglyphes, écriture démotique et grec">
4    <figcaption>
5        La pierre de Rosette (196 av. J.-C.) - la clé du déchiffrement des hiéroglyphes,
6        découverte en 1799 par les soldats de Napoléon
7    </figcaption>
8</figure>

<figcaption> est une légende visible par tous les utilisateurs, tandis que alt est une description destinée spécifiquement à ceux qui ne voient pas l'image. Ne répète pas la même chose dans les deux : l'alt dit ce que l'on voit sur la pierre, et la légende y ajoute son histoire. L'ordre de travail est donc toujours le même : la décision, l'alt, puis, éventuellement, une <figure> avec sa légende.

La vidéo accessible

Les sous-titres (captions)

Une vidéo sans sous-titres exclut les personnes sourdes, mais aussi quiconque la regarde dans le tram sans écouteurs. Tu ajoutes les sous-titres avec un élément <track> placé à l'intérieur de <video> :

1<video controls>
2    <source src="exhibition-tour.mp4" type="video/mp4">
3
4    <!-- Sous-titres pour les personnes sourdes et malentendantes -->
5    <track kind="captions" src="captions-fr.vtt"
6           srclang="fr" label="Français" default>
7
8    <!-- Sous-titres dans une autre langue -->
9    <track kind="subtitles" src="subtitles-en.vtt"
10           srclang="en" label="English">
11
12    Ton navigateur ne prend pas en charge l'élément vidéo.
13</video>

L'attribut kind définit le type de piste, srclang sa langue et label son nom dans le menu du lecteur vidéo. default active la piste automatiquement, et un seul <track> peut porter cet attribut. Le texte placé avant </video> ne s'affiche que dans les navigateurs qui ne prennent pas en charge la vidéo.

La différence entre captions et subtitles :

• Captions - destinées aux personnes sourdes et malentendantes, elles incluent aussi des descriptions des sons : [musique de fond], [bruits de pas]
• Subtitles - la traduction des dialogues dans une autre langue

Le format WebVTT

Les sous-titres eux-mêmes s'enregistrent dans un simple fichier texte au format WebVTT, avec l'extension .vtt. Voici à quoi ressemble un tel fichier :

1WEBVTT
2
300:00:01.000 --> 00:00:04.000
4Bienvenue au musée de l'Égypte antique.
5
600:00:04.500 --> 00:00:08.000
7Nous commençons notre parcours par le Hall principal.
8
900:00:08.500 --> 00:00:12.000
10[bruits de pas sur le sol de marbre]

Le fichier commence par le mot WEBVTT, et chaque fragment se compose d'une heure de début et d'une heure de fin (heures:minutes:secondes.millisecondes), puis du texte. La description du son entre crochets est justement ce qui distingue les captions d'une simple traduction.

L'audio accessible

Un enregistrement audio n'a pas d'image sur laquelle afficher des sous-titres, c'est pourquoi tu fournis aux personnes sourdes une transcription, c'est-à-dire la version écrite complète du texte :

1<figure>
2    <figcaption>
3        <h3>Livre audio : L'histoire de Cléopâtre</h3>
4    </figcaption>
5    <audio controls>
6        <source src="cleopatra.mp3" type="audio/mpeg">
7        Ton navigateur ne prend pas en charge l'élément audio.
8    </audio>
9    <!-- Transcription pour les personnes sourdes et malentendantes -->
10    <details>
11        <summary>Transcription de l'enregistrement</summary>
12        <p>Cléopâtre VII Philopator, la dernière souveraine
13        de la dynastie ptolémaïque...</p>
14    </details>
15</figure>

L'élément <details> cache la longue transcription sous un bouton <summary>, si bien qu'elle n'encombre pas la page, et il fonctionne au clavier sans une seule ligne de JavaScript.

Le SVG accessible

Un graphique SVG est du code, et non un fichier doté d'un attribut alt, c'est pourquoi tu ajoutes sa description autrement - selon que le graphique porte ou non une information :

1<!-- SVG en tant qu'image informative -->
2<svg role="img" aria-labelledby="chart-title chart-desc">
3    <title id="chart-title">Nombre de visiteurs du musée</title>
4    <desc id="chart-desc">
5        Diagramme en barres montrant la croissance des visiteurs
6        de 50 000 en 2020 à 120 000 en 2024.
7    </desc>
8    <!-- Éléments SVG -->
9</svg>
10
11<!-- SVG décoratif -->
12<svg aria-hidden="true" focusable="false">
13    <!-- graphique décoratif -->
14</svg>

role="img" demande de traiter le SVG comme une seule image, et aria-labelledby compose sa description à partir de <title> et de <desc>. aria-hidden="true" cache une décoration uniquement au lecteur d'écran - à l'écran, elle reste visible. focusable="false" protège contre le vieil Internet Explorer, qui pouvait placer le focus sur un SVG.

Prefers-reduced-motion

Certains utilisateurs sont sensibles aux animations - elles peuvent provoquer des vertiges ou des nausées. La media query prefers-reduced-motion vérifie si quelqu'un a activé la réduction des animations dans son système :

1/* Animation par défaut */
2.slide-in {
3    animation: slideIn 0.5s ease-in-out;
4}
5
6/* Désactiver l'animation pour les utilisateurs qui le préfèrent */
7@media (prefers-reduced-motion: reduce) {
8    .slide-in {
9        animation: none;
10    }
11
12    * {
13        transition-duration: 0.01ms !important;
14        animation-duration: 0.01ms !important;
15    }
16}

L'animation reste pour ceux qui la souhaitent et disparaît seulement chez les personnes qui l'ont demandé. Une durée de 0.01ms plutôt que zéro fait passer les éléments directement à leur état final, tandis que les scripts qui attendent la fin d'une animation continuent de fonctionner.

Les multimédias accessibles sont comme les inscriptions à côté des bas-reliefs égyptiens - elles permettent à chacun de comprendre le message, qu'il « voie » l'original ou qu'il s'appuie sur sa description. Dans la prochaine leçon, nous nous occuperons de la couleur et du contraste.

Pratique

Dans l'éditeur ci-dessous, tu trouveras des images, une vidéo et un SVG. Vérifie lesquels sont informatifs et lesquels sont décoratifs, et si chacun possède la bonne description :

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>Images et multimédias accessibles</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Images et multimédias accessibles</h1>
11
12    <!-- Image informative avec alt -->
13    <section>
14        <h2>Image informative</h2>
15        <figure>
16            <img src="https://placehold.co/500x300/d4af37/1a1a2e?text=Kamien+z+Rosetty"
17                 alt="La pierre de Rosette avec trois types d'écriture : hiéroglyphes, démotique et grec">
18            <figcaption>
19                La pierre de Rosette (196 av. J.-C.) - la clé du déchiffrement des hiéroglyphes
20            </figcaption>
21        </figure>
22    </section>
23
24    <!-- Image décorative -->
25    <section>
26        <h2>Image décorative</h2>
27        <img src="https://placehold.co/600x4/d4af37/d4af37" alt="">
28        <p>L'ornement ci-dessus est décoratif - il a un alt="" vide</p>
29    </section>
30
31    <!-- SVG accessible -->
32    <section>
33        <h2>SVG accessible</h2>
34        <svg role="img" aria-labelledby="svg-title svg-desc"
35             width="200" height="200" viewBox="0 0 200 200">
36            <title id="svg-title">Statistiques de fréquentation</title>
37            <desc id="svg-desc">Diagramme en barres : 2022 : 50 k, 2023 : 80 k, 2024 : 120 k</desc>
38            <rect x="20" y="120" width="40" height="60" fill="#d4af37"/>
39            <rect x="80" y="80" width="40" height="100" fill="#8b6914"/>
40            <rect x="140" y="20" width="40" height="160" fill="#3d2914"/>
41            <text x="30" y="195" font-size="12" fill="#1a1a2e">2022</text>
42            <text x="90" y="195" font-size="12" fill="#1a1a2e">2023</text>
43            <text x="150" y="195" font-size="12" fill="#1a1a2e">2024</text>
44        </svg>
45    </section>
46
47    <!-- Vidéo avec sous-titres -->
48    <section>
49        <h2>Vidéo avec sous-titres</h2>
50        <video controls width="500" poster="https://placehold.co/500x300/1a1a2e/d4af37?text=Video+Muzeum">
51            <track kind="captions" srclang="en" label="Français" default>
52            Ton navigateur ne prend pas en charge l'élément vidéo.
53        </video>
54        <p><em>Exemple d'élément vidéo avec un élément track pour les sous-titres.</em></p>
55    </section>
56
57    <!-- Audio avec transcription -->
58    <section>
59        <h2>Audio avec transcription</h2>
60        <figure>
61            <figcaption><strong>Livre audio : L'histoire de Cléopâtre</strong></figcaption>
62            <audio controls>
63                Ton navigateur ne prend pas en charge l'élément audio.
64            </audio>
65        </figure>
66        <details>
67            <summary>Transcription de l'enregistrement</summary>
68            <p>Cléopâtre VII Philopator, la dernière souveraine de la dynastie
69               ptolémaïque, a régné sur l'Égypte de 51 à 30 av. J.-C.
70               Connue pour son intelligence et son charisme, elle parlait plusieurs langues...</p>
71        </details>
72    </section>
73</body>
74</html>

Souviens-toi : l'alt, les sous-titres et la transcription sont les hiéroglyphes gravés à côté du bas-relief - ils racontent la même histoire à ceux qui ne peuvent ni la voir ni l'entendre.