Nous allons voir ici comment et pourquoi donner une alternative textuelle aux images sur les sites internet
L'attribut "alt", abréviation de "texte alternatif", est un attribut HTML utilisé pour fournir une description textuelle d'une image présente sur une page web. L'objectif principal de cet attribut est d'améliorer l'accessibilité web en permettant aux utilisateurs ayant des limitations visuelles, notamment les utilisateurs de lecteurs d'écran, de comprendre le contenu des images qui ne sont pas directement visibles pour eux.
Accessibilité pour les Utilisateurs Malvoyants : Les utilisateurs malvoyants dépendent de logiciels de lecture d'écran pour accéder au contenu web. L'attribut "alt" permet à ces lecteurs d'annoncer le contenu des images, ce qui rend la page web compréhensible pour ces utilisateurs.
Images Manquantes : L'attribut "alt" joue également un rôle crucial lorsque l'image ne peut pas être affichée, par exemple, en raison d'une erreur de chargement ou de la désactivation des images par l'utilisateur. Dans ce cas, le texte alternatif est affiché à la place de l'image pour informer l'utilisateur de ce qu'il manque.
Description Pertinente : L'attribut "alt" devrait contenir une description concise et pertinente de l'image. Il devrait transmettre le sens ou le contexte de l'image.
Éviter le Contenu Redondant : Évitez de répéter le contenu déjà présent à côté de l'image. Par exemple, si une image affiche le texte "Logo de la société CacaCorp", l'attribut "alt" pourrait simplement dire "Logo de la société CacaCorp".
Images Décoratives : Pour les images purement décoratives, vous pouvez utiliser un attribut "alt" vide (alt="") pour indiquer aux lecteurs d'écran qu'il s'agit d'une image décorative sans importance pour la compréhension du contenu.
Images Complexes (infographies) : Si une image est complexe et contient des informations importantes, envisagez d'ajouter une description plus détaillée en dessous qui décrit au mieux celle-ci.
Voici un exemple d'utilisation de l'attribut "alt" pour une image :
<img src="image.jpg" alt="Photo de classe Blindcode où les élèves sont tous tout nu">
Dans cet exemple, l'attribut "alt" décrit l'image en fournissant une description significative qui permet aux utilisateurs malvoyants entre autre de se faire une idée de ce que représente l'image, même s'ils ne peuvent pas la voir.
Le saviez vous, certains sites ou logiciels utilisent l'intelligence artificielle qui va analyser les images, reconnaître ce qu'il y a dedans, et ensuite réinjecter le code dans les attributs alt pour décrire les images sans alternatives. Cela dit, c'est une méthode, bien qu'intéressante, pas parfaite, car l'IA, elle, ne sait pas (encore ?) savoir si une image est pertinente à décrire ou non ! Rien ne vaut le fait de bien développer vos sites pour le moment !
créé le 2023-09-01 à 11:18