Vue d’ensemble

La plupart des personnes connaissent plus ou moins le alt texte. D’ailleurs, il n’existe pas de manière indépendante dans le code un élément « alt texte ». Pour être techniquement correct, c’est l’attribut alt de la balise img. Mais la problématique ne porte pas sur son nom mais sur sa fonction. Regardons ce que cela signifie d’avoir un bon alt texte.

L’importance de l’alternative textuelle

Actuellement, un des plus grands problèmes d’accessibilité sur le Web est l’absence d’alternative textuelle pour les graphiques et les images. Les personnes aveugles ont souvent recours à des lecteurs d’écran ou à des plages braille qui leur permettent de lire le texte sur les pages Web. Quand ces technologies d’assistance « lisent » les images sans alt texte, elles sont incapables de transmettre leur sens.

Quand un lecteur d’écran « lit » une image sans attribut alt, il y a plusieurs choses qui peuvent arriver :

1. Il peut simplement éviter l’image comme si elle n’était même pas présente sur la page.
2. Il peut trouver du texte qui lui correspond d’une manière ou d’une autre comme le nom du fichier image et le lit à la place de l’alternative textuelle.

Le comportement exact du lecteur d’écran varie selon les marques de lecteurs d’écran et du code de la page Web. Mais quoi qu’il en soit, ce type de résultat final n’est pas souhaitable : soit l’utilisateur n’est pas informé du contenu de l’image, soit il obtient un texte probablement inutile.

Exemple : avec un alt texte

Ecoutons à présent un enregistrement de Home Page Reader 3.0 de la même image. Cette fois-ci, elle a un alt texte. Par conséquent, nous pouvons entendre la différence.

Sélectionnez un format pour l’enregistrement : Wav | Mp3 | RealMedia | Transcription textuelle (anglais)

Voici l’image que nous venons d’écouter :

L’ajout d’une alternative textuelle permet aux utilisateurs de lecteurs d’écran d’avoir la même information que ceux qui peuvent voir l’image.

Comment ajouter un alt texte

Regardons un autre exemple d’image :

Le code HTML pour cette image est le suivant :

Vous pouvez taper le code exactement comme vous le lisez au-dessus dans un éditeur de texte ou vous pouvez utiliser les logiciels comme Dreamweaver, FrontPage ou GoLive pour réaliser la même chose. Dans Dreamweaver, le alt texte est ajouté via la fenêtre Properties comme montrée dans l’image ci-dessous :

Dans FrontPage de Microsoft, vous cliquez 2 fois sur l’image pour ouvrir la fenêtre de dialogue Picture Properties Vous tapez alors l’alternative textuelle dans le champ Text sous Alternative representations.

Les autres éditeurs ont des fonctionnalités similaires pour ajouter uen alternative textuelle. Consulter les instructions de la documentation sur comment ajouter un attribut alt.

A présent que nous avons une meilleure idée de l’attribut alt et comment il est simple d’ajouter un attribut alt à une image, parlons de ce que devrait contenir l’attribut alt.

Comment utiliser les images

Les images sur les sites Web sont utilisées de 3 manières :

1. pour véhiculer un contenu important.
2. pour attirer l’attention sans véhiculer un vrai contenu.
3. pour pointer vers d’autres zones du site ou vers d’autres sites.

Le alt texte le plus approprié pour une image dépend de comment l’image est utilisée. En fait, la même image peut être utilisée pour différentes raisons dans des circonstances différentes et chaque usage de cette image a une alternative textuelle différente. Gardez la règle suivante à l’esprit :

Avec cette idée en tête, l’information la plus importante à véhiculer dans une alternative textuelle d’une image cliquable est la destination du lien.

Transmettre le but de l’image

Les images qui contiennent du contenu important

Si une image ou un graphique contient de l’information qui est important dans le contexte du site Web, alors l’attribut alt doit fournir ce contenu d’une manière qui soit consistente avec le but de l’image. Souvenez-vous que le but de l’image n’est pas nécessairement le même que l’apparence de l’image.

Exemple 1

Par exemple, le site du CD de formation WebAIM utilise des images pour sa navigation principale telle que le montre l’image ci-dessous.

Ces images ressemblent à des onglets sur des dossiers de fichiers. Certains de ces onglets sont marrons et d’autres sont bleus. Quand l’onglet est sélectionné, il devient blanc. Une partie du texte est en majuscules, une partie est en minuscules. Tous ces détails sont importants pour l’aspect et la convivialité du site Web, mais pour quelqu’un qui ne peut pas voir, ils sont le plus souvent dénués de pertinence. L’aspect important de ces graphiques est qu’ils pointent vers d’autres zones du site. Avec cela à l’esprit, je voudrais donner une alternative textuelle qui traduit le fait que l’utilisateur peut cliquer sur l’image pour aller dans une autre zone du site. Dans ce cas, la destination du lien serait Track 2 de la formation, qui est la zone pour les coordinateurs. Le alt texte le plus approprié pour cette image est le suivant :

« Track 2: Coordinators.« 

Dans ce cas, le alt text correspond exactement au texte de l’image. Dans la plupart des cas où il y a du texte dans des images, c’est la meilleure solution. Ne vous inquiétez pas du fait que vous n’avez pas décrit l’image. Indiquez à l’utilisateur le but de l’image, pas son apparence.

Exemple 2

Regardons de nouveau le portrait de Silvia :

Cette image particulière pourrait être utilisée de différentes manières, avec différents buts. Voici quelques scénarios possibles :

• Un professeur en école primaire crée un site Web pour expliquer la différence entre les peintures, dessins et sculptures. Elle inclut plusieurs exemples différents de chaque type d’art. Dans le texte de la page elle-même, elle décrit les différences entre ces trois médias. Elle utilise le portrait de Silvia comme l’un des 4 exemples de tableaux. L’un des alt texte possible dans ce cas serait « Une peinture d’une jeune femme ». C’est sans doute suffisant, tant que l’enseignant a suffisamment décrit ce qu’est une peinture dans le document lui-même.
• Un membre d’une famille fait une liste de personnes de sa famille avec leurs portraits. Étant donné que toutes les images sont des portraits, un alt texte serait « Silvia Alvarez ».
• Un instructeur d’art dans une école secondaire crée un site Web présentant les différents types de peintures. Il utilise la peinture comme un exemple d’un portrait, et explique dans le texte de la page ce qu’est un portrait. Un alt texte pourrait être « Portrait ».
• Un historien de l’art crée un catalogue des différents portraits d’artistes. Son but est de montrer des portraits de divers artistes. Le alt texte pourrait inclure des informations pertinentes pour les historiens de l’art, telles que le titre de l’œuvre d’art, le nom de l’artiste, le support, et la date. Le alt texte pourrait dire « Silvia Alvarez, huile sur toile, de Paul Bohman, 2002″.

Nous pourrions continuer avec différents scénarios mais je pense que vous avez compris. Il n’existe pas un alt texte unique pour une image. Tout dépend du contexte et du but de l’image. C’est à l’auteur d’apprécier ce qu’il doit écrire.

Précision et concision

Les alternatives textuelles pour les images doivent être aussi précises et succinctes que possible. Assurez-vous que votre alt texte transmet tous les renseignements importants se rapportant au but de son image, mais ne surchargez pas les utilisateurs avec des alt texte trop longs. Les lecteurs d’écran ou les dispositifs braille lisent toujours le alt texte, ce qui peut entraîner que les pages chargées en images soient longues à lire. Si vous avez besoin d’une description plus détaillée de l’image, vous devez ajouter un attribut longdesc à l’image.

alt texte vide

Les images décoratives

Le Web est devenu un environnement graphique dans lequel les développeurs ajoutent souvent des images dans leurs pages simplement pour renforcer l’attrait visuel du site. Par exemple, l’image ci-dessous pourrait être utilisée pour créer un coin arrondi sur une page.

Les images dans cette catégorie ne véhiculent pas d’information vers l’utilisateur; elles sont simplement utilisées à des fins décoratives. Ces images n’ont pas de valeur pour quelqu’un qui ne peut pas voir la page. Le bon code HTML pour ce type d’image est ce qui est souvent appelé l’attribut alt vide ou nul, écrit de la manière suivante : alt="". Cela se prononce : alt égale guillemet guillemet, sans espace au milieu. Le code source de l’image dans cet exemple est le suivant :

<img src="corner.gif" width="84" height="90" alt="" />

Les lecteurs d’écran ignorent les images avec des alt texte vides, ce qui est exactement ce que nous voulons dans ce cas. Vous pouvez vous demander pourquoi il est nécessaire de spécifier un alt texte vide. Peut-être, pensez-vous préférable de ne pas mettre du tout l’attribut alt ? C’est une bonne question, mais la réponse est que le alt texte manquant est pire que le alt texte vide car certains lecteurs d’écran lisent alors le nom du fichier de l’image, ce qui peut être déroutant à l’écoute. Quand vous ajoutez un alt texte vide, les lecteurs d’écran sautent l’image sans rien lire.

Dreamweaver MX permet à l’auteur de créer des alt texte vides avec la boîte de Properties.

Malheureusement, de nombreux autres éditeurs HTML ne vous permettent pas de créer des attributs alt vides via l’interface graphique. Vous devez alors modifier votre code source HTML directement. Pour ce faire, recherchez l’image dans le code et ajouter des alt="" à la balise img.

Les images transparentes et de positionnement

Les développeurs utilisent souvent des images transparentes et de positionnement pour créer un espace entre les éléments sur une page. Bien que les utilisateurs voyants ne voient pas les images transparentes, elles peuvent être visibles pour les personnes utilisant des navigateurs texte ou des lecteurs d’écran. Vous devez ajouter un attribut alt="" vide à toutes les images transparentes et de positionnement.

Les images redondantes

Parfois, les développeurs Web ajoutent un alt texte à une image qui est exactement le même que le texte à côté de l’image comme dans l’exemple ci-dessous :

Dans des cas comme celui-ci, vous devez ajouter un alt texte vide pour que les utilisateurs de lecteurs d’écran n’aient pas à entendre deux fois la même information. Le lecteur d’écran JAWS dirait : « graphique, étudiants internationaux; graphique, étudiants internationaux » lors de la lecture de cette section, ce qui peut prêter à confusion ou du moins être gênant.

Les images map

Images map côté client

Tous les outils de développement Web côté client permettent de créer des images map côté client, plutôt que côté serveur. Comme son nom l’indique, les images map côté serveur nécessitent des scripts sur le serveur, alors que du côté client elles sont traitées uniquement dans le navigateur du client. Sauf si vous avez délibérément choisi de créer une image map côté serveur, vous n’aurez probablement jamais besoin d’en créer une. Les images map côté client peuvent être accessibles, alors qu’elles ne le peuvent pas côté serveur.

Les images map côté client demandent un alt texte à la fois pour l’image et pour ses zones. Regardons l’exemple suivant (Remarque : aucun des liens de cette image map ne pointe quelque part) :

Il n’y a qu’une seule image ci-dessus, mais il y a 5 zones. Chacune de ces zones conduit à un autre emplacement dans le site Web, il est donc nécessaire de transmettre cette information de navigation pour chacun de ces liens. Le alt texte de ces zones devrait être exactement le même que le texte dans l’image. Le alt texte pour les zones est HOME, Products, Services, Contact us et Index. Maintenant, nous avons le alt texte pour les zones, mais qu’en est-il de l’image elle-même ? En dehors des zones, cette image ne véhicule pas d’information. Le alt texte le plus approprié pour l’image est alt texte vide. Voici le code pour l’image et pour ses zones :

<img src= »imagemap.jpg » alt= »" width= »199″ height= »303″ border= »0″ usemap= »#Map »> <map name= »Map »>
<area shape= »rect » coords= »7,9,191,54″ href= »#maps » alt= »HOME »>
alt= »Products »>
<area shape= »rect » coords= »7,127,190,172″ href= »#maps » alt= »Services »>
<area shape= »rect » coords= »6,186,190,229″ href= »#maps » alt= »Contact us »>
<area shape= »rect » coords= »7,245,189,289″ href= »#maps » alt= »Index »>
</map>

Les images utilisées comme images map n’auront pas toutes un alt texte vide. L’auteur doit décider du meilleur alt texte.

Important

Une chose à garder à l’esprit lors de la création d’images map côté client est que les lecteurs d’écran lisent l’ordre littéral du code HTML. Des outils tels que Dreamweaver souvent ne mettent pas la balise area à côté de la balise img. Les balises area qui contiennent le alt texte pour les zones, apparaissent parfois dans des positions diverses dans le code loin de l’endroit où la zone est visualisée dans le navigateur. Dans ce cas, les lecteurs d’écran liront le alt texte complètement hors contexte. Cela peut être très déroutant pour les utilisateurs de lecteurs d’écran. Si vous utilisez Dreamweaver ou autres outils WYSIWIG, n’oubliez pas de regarder le code HTML. Si nécessaire, couper et coller les balises area justes après la balise img.

Images map côté serveur

Comme il n’y a pas moyen de rendre accessibles les images map côté serveur, le plus simple consiste à ne pas les utiliser. Cependant, certaines personnes s’inquiètent du fait que les images map côté client ne peuvent pas créer des formes géométriques, et alors ils utilisent des images map côté serveur. La vérité est que les images map côté client peuvent prendre n’importe quelle forme tant que le développeur a la patience de créer toutes les coordonnées des zones. Voici un exemple d’image map côté client, avec des zones géométriques inhabituelles, juste pour montrer que cela est réalisable (Remarque : aucun des liens ne mènent nulle part).

De fait, il n’y a aucune raison de créer des images map côté serveur.

Les images d’arrière-plan

Si vos images d’arrière-plan véhiculent une information texte importante ou une indication visuelle, vous devez changer votre code HTML afin que l’image soit dans le code avec un alt texte approprié.