Accessibilité du Web : Des images liens accessibles

Durée = 4:27 min Niveau = débutant / expert Handicap concerné = visuel

Description

Lorsqu’une image est utilisée comme lien, il est encore plus important de bien renseigner l’image sur l’action qu’elle engage. Jean réalise dans cette vidéo une petite démonstration des problèmes que les images-liens peuvent créer pour une personne utilisant une aide technique…

Tutoriel vidéo

Traduction espagnole réalisée par Lucas Bride Traduction chinoise réalisée par Lianhui Zhou Traduction anglaise réalisée par Ruth Woodrow

 

Contribuez à la traduction

Contribuez à la diffusion de cette vidéo pédagogique à l’international en traduisant les sous titres de cette vidéo :

  1. Téléchargez le fichier sous titres français, espagnol, chinois ou anglais au format SRT
  2. Envoyez par email le fichier sous titres au format SRT traduit à l’équipe Access-Key

 

Sous titres

Jean: démonstration d’un site non accessible

Et maintenant je vais m’intéresser à un autre site, celui du Musée Océanographique de Monaco "Le titre est : Musée Océanographique de Monaco Microsoft Internet Explorer - Musée Océanographique de Monaco visitez lien graphique drapeauf, lien graphique drapeaua, lien graphique drapeauit Fondé en 1910 par le Prince Albert 1er de Monaco, le Musée Océanographique est un lieu exceptionnel entièrement dédié à la mer.". En dehors de la présentation générale j’ai entendu qu’il y avait des liens, donc j’ouvre mes liens : "liste de liens, boîte de dialogue, liste de liens, drapeauit, trois de trois, utilisez les… drapeaua, drapeauf". Je me retrouve en face de cette alternative, j’ai trois liens qui sont en fait des images je suppose, on m’a dit qu’il y avait des images et ce sont des drapeaux : drapeauf, drapeaua, drapeauit, j’en conclus que c’est le drapeau français qui donne l’indication de l’usage de la langue française, de même A anglaise et It italienne, mais c’est de la pure déduction, il aurait été souhaitable que les titres de ces images soient un peu plus explicites. Voilà, donc je vais choisir le français : "drapeaua, drapeauf, "entrée", sommaire" et je vais pouvoir accéder ainsi au sommaire du site du Musée Océanographique.

Jean: démonstration d’un site accessible

Maintenant, sur un autre site, celui du Languedoc Roussillon : "le titre est : Conseil Régional Languedoc Roussillon CRLR Microsoft Internet Explorer" Je vais chercher sur le site du Conseil Régional de Languedoc Roussillon le portail de la formation permanente. Si j’étais voyant une image m’enverrait directement sur cette page mais je sais parce qu’on me l’a dit que cette image était renseignée et donc quand je vais faire ma recherche de titre comme suit : "liste de liens, boîte de dialogue, liste de liens, valider, plan du site alt +3, "P", protéger l’environnement, "P", portail de la formation professionnelle en Languedoc Roussillon, nouvelle fenêtre" Voilà je trouve donc ce lien : "portail de la formation professionnelle en Languedoc Roussillon, nouvelle fenêtre, 26 de 60" qui correspond à une image sur la page de titre et donc je peux rentrer dans ma nouvelle page "entrée", la formation professionnelle et l’apprentissage en Languedoc Roussillon Microsoft Internet Explorer" Voilà, il est donc important de bien renseigner chaque image en précisant sur le titre de quelle image il s’agit sinon on ne peut pas agir dessus.

Tutoriel: renseigner les images qui remplissent le rôle de lien

Pour les images qui remplissent le rôle de lien, en l’absence d’un attribut Alt correctement renseigné, le logiciel de lecture d’écran se base sur le nom du fichier pour nommer l’image. Ici, nous retrouvons le nom des trois images auxquelles Jean est confrontées : Drapeauf. drapeaua. drapeauit. Pour chaque image qui remplit le rôle de lien, le texte contenu dans l’attribut alt de l’élément graphique doit donner la fonction du lien. Ainsi, pour chacun de ces drapeaux qui indique la langue des différentes versions du site, plutôt que d’indiquer dans l’attribut alt drapeau français ou drapeau italien, il est préférable d’indiquer "version française du site" ou "version italienne du site". Si l’image faisant office de lien inclus du texte l’alternative doit, au minimum, contenir le contenu textuel exact inscrit dans l’image. Des informations complémentaires pourront être apportées mais le contenu exact doit y être indiqué. Concernant le lien rendu opérationnel au moyen de la balise A href, il est nécessaire de le commenter au moyen de l’attribut title. Ici, l’attribut title devrait lui aussi comporter l’indication "version française du site". Si le lien s’ouvre dans une nouvelle page, l’attribut title devra alors comporter l’indication : version française du site et entre parenthèse, nouvelle fenêtre.

Logo de l'Université Nice Sophia Antipolis  Logo de l'Université de Haute Alsace    Logo de la Fondation Orange