Comment rendre des images accessibles ? Premier article qui traite de la nécessité des alternatives textuelles et de la différence entre image décorative et image porteuse d’information.

Ce que j’ai fait :

• lire l’article Le vaste monde des alternatives textuelles : l’attribut alt(lien externe) de Julie Moynat
• lire l’article Des images accessibles(lien externe) d’Openweb
• lire l’article Images(lien externe) du Guide de l’intégrateur

Ce que j’ai appris

Images sans alternative : quels impacts ?

Sans surprise, les premières personnes impactées par un défaut d’accessibilité sur les images sont les personnes aveugles et mal-voyantes. Les images peuvent en effet véhiculer une information non textuelle, nécessaire à la compréhension globale d’une page ou à l’exécution d’une tâche. Il est donc impératif de fournir une alternative pour les internautes dans l’incapacité de percevoir le contenu visuel. De même, certaines personnes peuvent avoir des difficultés de compréhension face à certaines images (peintures, graphiques…) et fournir une alternative peut les aider à en saisir le sens.

Il arrive également que des utilisatrices et utilisateurs désactivent volontairement l’affichage des images sur leur navigateur dans un souci d’économie de données. Car pour rappel, tout le monde en 2019 ne dispose pas d’un accès internet haut débit : de nombreuses communes en France ont un débit maximum inférieur à 8 mégabits par seconde, cette limite étant considérée comme le minimum pour un accès internet fluide. Pour certaines communes le débit maximum est même inférieur à 3 mégabits par seconde, comme le montre la carte de France extraite de l’article du journal Le Monde Ces régions de France où avoir une bonne connexion Internet n’est pas possible(lien externe).

Enfin, ajouter une alternative textuelle sur les images permet aux robots d’améliorer le référencement et l’indexation des sites.

Un attribut <alt> obligatoire

L’attribut alt est le principal moyen de fournir un texte alternatif pour :

• les images <img>
• les zones réactives des images cliquables <area>
• les boutons de formulaire <input type="image">

La présence d’un attribut alt sur ces éléments est obligatoire. L’absence d’un attribut alt sur l’un de ces trois éléments génèrera une erreur dans le code de validation du World Wide Web Consortium (W3C). D’autre part, en l’absence d’alternative, les technologies d’assistance restitueront par défaut le contenu de l’attribut src de l’image. Cela peut s’avérer complètement inutile et déstabilisant lorsque les chemins d’image ressemblent à ceci : /2019/12/01/0/6/5788/3859/410/0/75/0/145c53e_5141741-01-06.jpg. On ne peut donc pas écrire :

<img src="image.jpg" />
<!-- ou -->
<input type="image" src="login-button.png">

A minima, l’attribut alt doit donc être présent et vide. N’ajoutez pas d’espace entre les guillemets. Par exemple :

<img src="image.jpg" alt="" />

Images décoratives versus images porteuses d’information

On peut distinguer deux grandes catégories d’images selon l’information qu’elles véhiculent : les images décoratives et les images porteuses d’information.

Les images décoratives ne véhiculent aucune information nécessaire à la compréhension de la page. Pour savoir si une image est décorative ou non, il faut se poser la question “Est-ce que l’absence de cette image nuit à la compréhension de mon contenu ?” :

• si non, l’image est purement décorative
• si oui, elle est porteuse d’information

L’attribut alt des images décoratives doit rester vide. De fait, les technologies d’assistance ignoreront cette image et ne la restitueront pas. Il est contre-productif de remplir à tout prix les alternatives de ce type d’image. Une information du type alt="Illustration de l'article" par exemple, n’est absolument pas pertinente et aura pour conséquence de surcharger inutilement les informations transmises par un lecteur d’écran.

Des outils pour gérer les alternatives d’images

Il existe des outils permettant de faciliter la gestion des alternatives d’images.

L’extension Web developer pour Firefox(lien externe) permet :

• de mettre en évidence les images ne possédant pas d’attribut alt
• d’afficher le contenu des attributs alt

Vous pouvez également intégrer directement dans les styles de vos projets la mise en évidence des images ne possédant pas d’attribut alt. Par exemple avec le code suivant :

// To prevent screen reader to restitute src attribute
img {
  &:not([alt]) {
    border: 5px solid #ff000;
  }
}