Lors de la conception d'un site web, l'accessibilité numérique est un aspect crucial pour garantir que tous les utilisateurs, y compris ceux ayant des déficiences visuelles, puissent accéder aux informations de manière équitable. Ces informations peuvent être textuelles, issues d'une vidéos, d'une image, ou même d'un audio de type podcast.
Suite à un cours instructif sur l'accessibilité numérique dispensé par Caroline PRETOT, j'ai choisi d'approfondir ma compréhension, en me penchant spécifiquement sur la question des images. Ce choix s'impose étant donné que les images jouent un rôle central dans notre quotidien, que ce soit lors de la navigation sur divers sites, sur les réseaux sociaux, ou même lors de la consultation des journaux numériques pour rester informé sur l'actualité.
Ainsi, dans cet article, je mettrai l'accent sur la manière de rendre les images accessibles, en particulier en utilisant des alternatives textuelles. Cette approche est essentielle pour permettre aux personnes aveugles d'interpréter les images présentes sur les sites web.
Alternative textuelle : Une nécessité pour tous
Les personnes déficientes visuelles utilisent des dispositifs de lecture d'écran ou des plages braille pour accéder à l'information sur le web. Pour rendre les images compréhensibles, une alternative textuelle, également appelée "alt text", doit être intégrée à chaque image. L'alternative textuelle remplace l'image dans des contextes où les images ne sont pas perceptibles, comme lors de l'utilisation de lecteurs d'écran, de navigateurs avec images désactivées, ou dans des conditions de basse connexion.
Comment ça marche ?
Techniquement, chaque image doit être dotée d'un attribut HTML "alt" destiné à recevoir le texte alternatif. L'omission de cet attribut est une erreur de programmation, car en l'absence de celui-ci, le lecteur d'écran lit le nom du fichier, ce qui peut constituer une nuisance. L'alternative textuelle doit être concise, idéalement ne dépassant pas 80 caractères, et en texte brut, sans liens ni enrichissements typographiques.
Afin que tu comprennes mieux, voici un exemple qui illustre mes propos.
Ces captures d'écran proviennent toutes de mon site que j'ai codé.
Comme indiqué précédemment, l'attribut "alt" que tu vois ci-dessus décrit de manière simple mais explicite l'image à gauche. Cet attribut est essentiel, en particulier pour les utilisateurs ayant un handicap visuel. Lorsqu'ils déplacent le curseur de la souris sur un élément, le lecteur d'écran lit à voix haute le contenu associé à cet élément, dans ce cas précis, le texte "Image de dés superposés". Cette approche assure une expérience plus inclusive en fournissant des informations détaillées sur le contenu visuel, facilitant ainsi la compréhension pour tous les utilisateurs, indépendamment de leurs capacités visuelles.
Quelle Alternative Textuelle pour Quelle Image ?
Il est crucial de différencier les types d'images pour déterminer l'alternative textuelle appropriée.
Les images décoratives
Les images purement décoratives, telles que les éléments graphiques rythmant la page, doivent avoir une alternative textuelle vide. Cela indique aux lecteurs d'écran que l'image est purement esthétique et peut être ignorée.
Illustrons cela avec un exemple concret : sur le site d'Apple, nous pouvons voir ci-dessous que les petits logos sont accompagnés d'un attribut "alt" vide. Cette stratégie est délibérée, car ces images sont purement décoratives. Les retirer n'aurait aucun impact sur la diffusion des informations souhaitées par Apple. Cette approche discernée permet de différencier clairement entre les images décoratives et informatives, contribuant ainsi à une expérience de navigation plus fluide pour tous les utilisateurs.
Source : Image issue d'une capture d'écran du site Apple et de l'outil A11y.
Les images informatives
Les images qui véhiculent une information, comme un schéma ou une affiche d'événement, nécessitent une alternative textuelle précise, décrivant l'information contenue dans l'image sans perte de sens.
Observons l'exemple ci-dessous où Le Monde a consciencieusement respecté la mise en page des images informatives en utilisant des attributs "alt" explicites. Du côté droit, les alternatives textuelles des photos sont bien détaillées et claires, permettant ainsi aux personnes ayant des déficiences visuelles de saisir l'intérêt des images, leur contexte, ainsi que toute information pertinente. Cette approche démontre l'engagement envers l'accessibilité numérique, garantissant une expérience inclusive pour tous les lecteurs.
Source : Image issue d'une capture d'écran du site Le Monde et de l'outil A11ly.
Les images informatives complexes
Les images complexes, telles que les graphiques ou diagrammes, doivent avoir une alternative textuelle concise accompagnée d'une description détaillée accessible depuis la même page ou via un lien externe.
Prenons l'exemple ci-dessous pour illustrer ce point. Sur le site Koena, une image riche en informations essentielles est présentée. Contrairement à une image purement décorative, celle-ci revêt un caractère informatif. En raison de sa complexité et de la multitude d'informations qu'elle contient, il n'est pas possible de résumer l'intégralité de ces informations dans l'attribut "alt" de l'image. C'est pourquoi toutes les données pertinentes de l'image ont été consciencieusement fournies en dessous de celle-ci. Cette approche vise à accompagner les personnes ayant un handicap visuel, en leur fournissant des informations détaillées pour une compréhension complète.
Source : Image issue d'une capture d'écran du site Koena.
L'optimisation des images pour une accessibilité plus complexe
Outre l'ajout d'alternatives textuelles, l'optimisation des images est cruciale pour améliorer l'accessibilité. Réduire le poids des images favorise un chargement plus rapide des pages, bénéficiant aux utilisateurs, en particulier à ceux avec une connexion faible. Des outils en ligne, tels que compressimages.io ou tinypng.com, facilitent cette optimisation.
Pourquoi rendre son site accessible ?
Un site web accessible ne profite pas seulement aux personnes en situation de handicap. Il améliore le référencement, anticipe les changements futurs et contribue à une meilleure e-réputation. L'accessibilité touche un large public, des personnes âgées aux utilisateurs avec des connexions limitées, c'est un sujet bien plus important que l'on ne pense alors mettons-y du notre pour une société bien plus équitable !
En Résumé
Cet article aborde l'importance cruciale de l'accessibilité numérique dans la conception de sites web, mettant particulièrement l'accent sur la rendre des images accessibles par le biais d'alternatives textuelles. Explorant les différentes catégories d'images, telles que décoratives, informatives et complexes, le texte souligne l'attribution nécessaire d'un attribut "alt" à chaque image pour faciliter la compréhension par les lecteurs d'écran utilisés par les personnes déficientes visuelles. Ajouté à cela l'article aborde l'optimisation des images pour une expérience utilisateur améliorée, en recommandant des outils de compression en ligne.
Pour en savoir plus :
Orange. Web develop - Non-textual content. Disponible sur :
[consulté le 12/11/2023]
AcceDe Web. Utiliser les images de manière accessible. Disponible sur :
[consulté le 12/11/2023]
Comments