L’accessibilité des visuels consiste à permettre la compréhension d’une image, d’une interface, d’une vidéo ou d’un document par le plus grand nombre, y compris lorsque certaines informations ne sont pas perçues de la manière prévue par leur créateur. Une personne peut utiliser un lecteur d’écran, agrandir l’affichage, modifier les couleurs, désactiver le son ou consulter une vidéo dans un environnement bruyant. Ces situations ne concernent pas uniquement les personnes ayant une déficience permanente. Une connexion limitée, une panne de haut-parleur, une luminosité extérieure forte ou une fatigue visuelle peuvent aussi modifier l’accès à l’information.
Trois leviers répondent à des besoins différents. Le texte alternatif transmet le sens d’une image lorsque celle-ci ne peut pas être vue. Le contraste distingue les éléments et les textes de leur arrière-plan. Les sous-titres rendent les dialogues et les informations sonores disponibles sans écoute. Aucun de ces dispositifs ne remplace les autres : une vidéo peut avoir un contraste correct tout en restant incompréhensible sans transcription, et une infographie peut être très lisible à l’écran sans être interprétable par un lecteur d’écran.
Les recommandations de cet article s’appuient sur les principes des Web Content Accessibility Guidelines, publiés par le World Wide Web Consortium, ainsi que sur les pratiques courantes de conception inclusive. Elles s’appliquent aux pages web, aux publications sur les réseaux, aux présentations, aux PDF et aux contenus vidéo.
Le texte alternatif n’a pas pour objectif de décrire chaque détail visible. Il doit communiquer la fonction ou le message de l’image dans le contexte où elle apparaît. La même photographie peut donc recevoir des descriptions différentes selon qu’elle accompagne un article, un bouton de réservation ou une légende statistique.
Pour construire une formulation pertinente, posez-vous trois questions :
Une image montrant un ordinateur sur un bureau pourra être décrite par « Ordinateur portable ouvert sur un tableau de bord » si cette information aide à comprendre le sujet. Dans un article consacré à la sécurité des mots de passe, une formulation comme « Illustration d’un ordinateur portable » apporte peu si elle ne précise pas le rôle de l’image. En revanche, si le visuel est purement décoratif et ne transmet aucun contenu, son alternative doit être vide dans le code HTML afin que le lecteur d’écran ne l’annonce pas inutilement. Cette différence entre une alternative vide et l’absence d’attribut est importante : l’absence peut conduire certains outils à lire le nom du fichier.
Les bonnes pratiques à retenir sont les suivantes :
Une image complexe ne peut pas toujours être correctement résumée en quelques mots. C’est le cas d’un graphique, d’une carte, d’un schéma de réseau ou d’une capture d’écran contenant plusieurs étapes. Dans ce contexte, le texte alternatif peut donner une vue d’ensemble, tandis qu’une description plus complète est placée dans le texte environnant ou dans une section associée.
Pour un graphique, commencez par le type de représentation et la conclusion utile : « Graphique en barres comparant les demandes reçues par canal, avec une progression plus forte pour le formulaire en ligne ». Cette phrase n’a pas vocation à remplacer toutes les valeurs. Si les chiffres sont nécessaires à la décision, fournissez aussi un tableau accessible ou une liste structurée reprenant les données. Le lecteur pourra alors consulter les valeurs sans dépendre de la lecture visuelle des axes et des couleurs.
Pour une capture d’écran, décrivez l’écran en fonction de l’action recherchée : « Fenêtre des paramètres réseau affichant le choix du Wi-Fi dans le menu latéral ». Si un guide explique une procédure, chaque capture doit être reliée à l’étape qu’elle illustre. Une image montrant un bouton peut recevoir une description centrée sur son libellé et son emplacement, tandis qu’un bouton lui-même doit conserver un nom accessible dans l’interface.
La description ne doit pas interpréter sans preuve ce que l’image ne permet pas d’établir. Évitez de déduire l’identité, l’intention ou l’état émotionnel d’une personne à partir de son apparence. Pour une photographie où cette information n’est pas documentée, décrivez l’action visible et les éléments utiles au sujet traité.
La qualité des alternatives dépend souvent de l’organisation du travail, pas uniquement de la compétence rédactionnelle. Une vérification intégrée au processus de publication réduit les oublis et les descriptions copiées d’un support à l’autre.
Les outils automatiques peuvent repérer une image sans alternative ou signaler certains problèmes de structure. Ils ne savent pas déterminer de façon fiable le message éditorial d’une photographie ni la conclusion d’un graphique. Un contrôle humain reste donc nécessaire, particulièrement pour les pages commerciales, les formulaires, les tableaux de bord et les documents pédagogiques.
Le contraste mesure la différence de luminosité perçue entre un premier plan et son arrière-plan. Un contraste trop faible rend la lecture difficile, notamment pour les personnes ayant une basse vision, une déficience des couleurs ou une fatigue visuelle. Il devient aussi problématique sur un écran peu lumineux, avec des reflets ou dans un environnement très éclairé.
Les WCAG 2.2 du World Wide Web Consortium définissent des seuils de contraste pour le texte courant et le texte de grande taille. Le niveau AA demande un rapport d’au moins 4,5:1 pour le texte courant et 3:1 pour le texte considéré comme grand selon les critères de ce référentiel. Pour les éléments graphiques et les composants d’interface nécessaires à la compréhension, le niveau AA prévoit également un rapport d’au moins 3:1 dans les situations concernées. Ces valeurs ne dispensent pas d’un jugement visuel : une typographie fine, un arrière-plan irrégulier ou une animation peuvent dégrader la lisibilité.
Le contraste ne se résume pas au choix entre noir et blanc. Il faut examiner :
Un outil de mesure du contraste peut fournir un rapport, mais le test doit porter sur les situations réelles. Une couleur peut respecter un seuil sur un fond uni et devenir illisible sur une image. Les effets de transparence, les ombres et les polices très fines méritent une attention particulière.
La couleur peut renforcer une hiérarchie visuelle, mais elle ne doit pas porter seule une information essentielle. Une personne daltonienne, un utilisateur consultant une page en niveaux de gris ou un écran mal calibré peut ne pas distinguer deux teintes. Les WCAG recommandent donc d’associer la couleur à un autre indice perceptible ou textuel.
Dans un formulaire, un champ en erreur ne devrait pas être signalé uniquement par une bordure rouge. Ajoutez un message explicite, placez-le près du champ et reliez-le techniquement au contrôle lorsque l’interface le permet. Dans un graphique, associez aux couleurs des libellés, des motifs, des formes ou une liste de données. Dans un calendrier, ne marquez pas les jours disponibles uniquement en vert : utilisez aussi un texte, un symbole dont la signification est expliquée ou une information accessible au clavier.
Pour vérifier une interface, réduisez l’affichage en niveaux de gris et observez si les états restent distinguables. Parcourez ensuite les contrôles au clavier afin de vérifier que le focus demeure visible. L’ordre de navigation doit suivre une logique compréhensible et le focus ne doit pas disparaître sur un arrière-plan contrasté. Sur un smartphone, testez les textes à différents niveaux d’agrandissement et en orientation verticale comme horizontale.
La lisibilité dépend également de la composition. Des lignes très longues, un interligne serré ou un texte placé sur une image chargée peuvent rendre un contenu pénible malgré un bon rapport de contraste. Un arrière-plan uni, une largeur de colonne maîtrisée et des espacements réguliers améliorent la compréhension sans demander à l’utilisateur de modifier constamment son affichage.
Les sous-titres transcrivent les paroles, mais leur rôle peut aller plus loin. Lorsqu’un son apporte une information nécessaire, il faut aussi l’indiquer : bruit d’alarme, musique significative, changement de locuteur ou effet sonore indispensable au déroulement. Une transcription qui ne contient que les dialogues peut laisser de côté une partie du message.
Une vidéo accessible distingue généralement les sous-titres préparés à l’avance des sous-titres automatiques. La génération automatique accélère la première étape, mais elle peut confondre des noms propres, des termes techniques, des négations ou plusieurs voix qui se chevauchent. Chaque fichier doit être relu sur la vidéo, avec une attention portée à la synchronisation, à la ponctuation et au découpage des phrases.
Une méthode de production fiable suit ces étapes :
Les sous-titres incrustés dans l’image restent visibles partout, mais ils ne peuvent pas être désactivés, agrandis ou traduits par le lecteur. Les sous-titres fournis comme une piste séparée offrent davantage de souplesse. Selon le public et le contenu, une transcription complète peut aussi être proposée sous la vidéo. Elle rend le contenu consultable, permet une recherche textuelle et peut décrire des éléments sonores ou visuels qui ne trouvent pas place dans la piste de sous-titres.
Ces formats répondent à des besoins distincts. Les sous-titres accompagnent la vidéo et rendent accessibles les paroles ainsi que les sons utiles. La transcription reprend le contenu audio sous forme de texte, souvent dans une page ou un panneau séparé. L’audiodescription décrit les informations visuelles indispensables pendant les pauses ou les espaces prévus dans la bande sonore. Elle concerne notamment les gestes, les changements de décor, les expressions et les textes affichés à l’écran.
| Format | Information principalement fournie | Usage pertinent |
|---|---|---|
| Sous-titres | Paroles et sons importants, synchronisés avec la vidéo | Consultation sans son et accès aux dialogues |
| Transcription | Version textuelle complète du contenu audio | Recherche, lecture flexible et archivage |
| Audiodescription | Éléments visuels indispensables à la compréhension | Vidéo dont le sens dépend fortement de l’image |
| Version texte enrichie | Paroles, sons et descriptions visuelles dans un même document | Contenus pédagogiques ou vidéos très denses |
Une vidéo de démonstration peut nécessiter une transcription des explications et des indications précises sur les actions effectuées à l’écran. Si le présentateur dit « comme vous le voyez ici » sans décrire l’action, le texte risque de rester incomplet pour une personne qui ne perçoit pas l’image. Reformulez alors l’information : indiquez le menu ouvert, le champ sélectionné ou le résultat affiché.
Une relecture globale permet de détecter les problèmes que les contrôles séparés laissent échapper. Commencez par masquer les images et demandez-vous si la page conserve son sens. Cette vérification ne remplace pas un lecteur d’écran, mais elle révèle les informations qui reposent exclusivement sur les visuels.
Poursuivez avec une grille de contrôle :
Testez plusieurs environnements : petit écran, zoom, mode sombre si l’interface le propose, connexion lente et écoute désactivée. Pour un document PDF, vérifiez aussi la structure des titres, l’ordre de lecture et la présence d’un texte exploitable. Une image de texte intégrée dans un PDF peut rester inaccessible même si elle possède une légende.
Conservez une trace des corrections et des décisions éditoriales. Une courte fiche indiquant le rôle du visuel, son alternative et les tests réalisés facilite les mises à jour. Lorsqu’une image est remplacée, cette fiche rappelle les informations à préserver et évite de repartir d’une description générique.
Non. Sa longueur dépend de l’information à transmettre. Une image informative peut être décrite en quelques mots si son rôle est limité. Un graphique ou un schéma demande parfois une alternative courte accompagnée d’une explication détaillée et de données accessibles. La précision compte davantage que le nombre de mots.
Non. Les catégories doivent rester identifiables sans la couleur, grâce à des libellés, des formes, des motifs ou une présentation textuelle. Le contraste entre les éléments et leur fond doit aussi être vérifié, notamment pour les petites lignes et les indicateurs.
Ils doivent être considérés comme une première version. Les erreurs de transcription peuvent modifier le sens, en particulier pour les noms propres, les chiffres et le vocabulaire technique. Une relecture avec et sans le son permet de contrôler à la fois le contenu et la synchronisation.
Placez l’information importante dans du texte HTML ou dans une structure consultable, puis utilisez l’image comme complément visuel. Si l’image reste nécessaire, son alternative doit signaler son rôle et donner accès à son contenu essentiel sans obliger l’utilisateur à pouvoir la voir.
