Partie 8 — Images, icônes & média

⏱️ TL;DR — Tout contenu non textuel — une image, une icône, un graphique, une vidéo, un son — a besoin d’une alternative perceptible autrement : un alt pour une image, des sous-titres pour une vidéo, une transcription pour un audio. La technique est simple ; la vraie difficulté, c’est de savoir quoi écrire (ou quoi laisser volontairement vide). Un alt mal pensé pollue autant qu’un alt absent. Cette partie t’apprend à décider, cas par cas, ce qu’un utilisateur doit percevoir de ton contenu visuel ou sonore.

Le problème qu’on résout

L’image est le contenu le plus mal traité du web. Deux erreurs symétriques dominent : le alt absent (le lecteur d’écran lit alors le nom de fichier, « IMG_4821.png »), et le alt de trop (une image purement décorative annoncée en pleine lecture, qui casse le rythme). Entre les deux, le bon alt demande un jugement : cette image porte-t-elle une information ? Est-elle cliquable ? Le texte à côté dit-il déjà la même chose ?

Le média temporel — vidéo, audio — ajoute une couche : un contenu qui se déroule dans le temps exclut d’office ceux qui ne l’entendent pas (sourds, environnement bruyant) ou ne le voient pas (aveugles, écran éteint). Il faut des sous-titres, des transcriptions, parfois une audiodescription. On voit ici comment décider, et comment coder.

Ce que tu sauras faire à la fin de cette partie

• Appliquer l’arbre de décision du alt : informative, décorative, fonctionnelle, ou déjà décrite à côté.
• Écrire un alt concis et pertinent — et savoir quand le laisser vide (alt="").
• Rendre un SVG accessible (informatif vs décoratif) et donner un nom accessible à une icône seule.
• Décrire une image complexe (graphique, schéma, carte) par une description longue ou un tableau de données.
• Fournir sous-titres, transcription et audiodescription pour la vidéo et l’audio.
• Interdire l’autoplay sonore et offrir un moyen de mettre en pause/couper tout média de plus de 3 s.

Les chapitres

On commence : Les alternatives textuelles.