Contenu non textuel

Ce que le critère exige

Les contenus non textuels — images, icônes, graphiques, animations, CAPTCHA, contenus audio intégrés, expériences sensorielles — doivent être accompagnés d’un texte alternatif qui transmet les mêmes informations ou la même fonction. Ce texte alternatif est ce que la technologie d’assistance restituera à l’utilisateur lorsque le contenu original ne peut être perçu.

Les quatre catégories définies par WCAG :

• Les images informatives requièrent un attribut alt décrivant l’information qu’elles véhiculent.
• Les images fonctionnelles (liens, boutons) requièrent un alt décrivant l’action, non l’apparence visuelle.
• Les images décoratives reçoivent un attribut alt vide (alt="") afin que les lecteurs d’écran les ignorent.
• Les images complexes (graphiques, schémas) requièrent un alt court ainsi qu’une description plus longue à proximité dans le texte, dans un bloc <details>, ou via aria-describedby.

Comment satisfaire ce critère

• Ajouter un attribut alt à chaque élément <img>. Vide si l’image est décorative, descriptif si elle est informative.
• Donner un nom accessible à chaque <button> avec icône seule, via aria-label, un texte visible ou un élément <title> SVG.
• Pour les graphiques et infographies, rédiger un alt de résumé en une phrase et intégrer les données dans un tableau accessible immédiatement avant ou après la figure.
• Pour les CAPTCHA, fournir au moins une alternative non visuelle (CAPTCHA audio, vérification par e-mail, limitation côté serveur).
• Pour les contenus audio porteurs d’information (aperçu de podcast, son d’interface), fournir un équivalent textuel.

Erreurs courantes

• alt="image" ou alt="photo d'une personne" — décrit le support, non le contenu.
• Boutons avec icône seule sans nom accessible (<button><svg /></button>). Les lecteurs d’écran annoncent « bouton » sans rien d’autre.
• Images décoratives sans alt="" — les lecteurs d’écran se replient sur la lecture du nom de fichier.
• Balises <img> de graphiques dont l’alt ne contient que le titre du graphique, sans que les données sous-jacentes figurent nulle part sur la page.
• Images d’arrière-plan CSS porteuses d’une signification, sans libellé textuel dans le balisage.

Pourquoi ce critère est important

C’est le fondement de l’accessibilité pour les lecteurs d’écran. Un site qui échoue au critère 1.1.1 est inutilisable pour les utilisateurs aveugles — chaque image devient une impasse. C’est aussi la défaillance la plus fréquemment détectée par axe et Lighthouse, car les outils automatisés peuvent signaler les attributs alt manquants, mais ne peuvent pas juger si l’alt présent est réellement pertinent.