Accessibilité du Web : Des liens hypertextes compréhensibles

Durée = 5:45 min Niveau = débutant / expert Handicap concerné = visuel

Description

Les liens hypertextes sont des éléments essentiels à la navigation mais s’avèrent également être une façon efficace de découvrir le contenu d’une page pour une personne aveugle.

Certaines aides techniques, comme le logiciel de revue d’écran utilisé par Isabelle dans cette vidéo, offrent des possibilités de navigation grâce aux liens présents sur la page. Encore faut-il que leurs intitulés soient clairs…

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

Voici les sous titres en version texte de la vidéo pédagogique sur les liens hypertextes (notez que le texte en italique correspond à la voix de la synthèse vocale utilisée par Isabelle):

Isabelle: démonstration de liens non accessible

Je suis donc étudiante en histoire et comme n’importe quel étudiant, je vais sur un site de cours en ligne pour consulter mes cours. Donc le moyen le plus simple et direct d’y arriver c’est d’afficher une liste de liens qui sera lue par la synthèse, comme ceci : liste liens, boîte de dialogue, liste de liens quitter… un de trente neuf, utiliser les touches fléchées pour vous déplacer à un item donc voilà, quand ma boîte de dialogue est ouverte, la synthèse me dit le nombre de liens, en l’occurence 39. Je suis sur le premier et je descends dans la liste de liens grâce à mes flèches, comme ceci : inc, inc, inc, inc, inc et je m’aperçois que plusieurs liens sont nommés de la même manière, la synthèse me dit "INC" à chaque fois, donc "INC" mais ça ne m’apprend rien de plus sur le contenu exact du lien en fait, donc je ne peux pas en faire grand chose, donc je continue pour voir si par hasard il y a un lien un peu plus explicite plus bas inc, inc, inc, forum, messagerie, forum Je tombe sur deux liens qui sont très explicites : un où il y a marqué "messagerie", l’autre "forum", donc cela me dit exactement à quoi ils correspondent chapitre, chapitre, chapitre Et ensuite j’arrive sur différents liens dénommés chapitre, mais pareil, cela ne me dit pas l’intitulé du chapitre, donc je ne peux pas vraiment accéder au chapitre que je voudrais très facilement, donc je clique sur l’un d’entre eux par hasard en espérant tomber sur le bon et en espérant pouvoir lire mon cours, donc voilà. entrez, cadre droit,deux cadres et dix-sept liens,cadre droit, fin du cadre droit

Isabelle: démonstration de liens accessible

Voilà nous venons de voir un site qui n’était pas très accessible au niveau des liens, heureusement pour nous, il en existe d’autres beaucoup plus accessibles, comme je vais vous montrer tout de suite : contrôle O, WWW. 3, 8, R, entrez, édition identifiant, édition identifiant, 9%, 100%, service en ligne Conseil Général de l’Isère Je viens d’ouvrir le site du Conseil Général de l’Isère. Maintenant je vais ouvrir ma boîte de dialogue qui va m’afficher la liste des liens : liste des liens, boîte de dialogue, liste de liens, entreprises, 14 de 60, archives départementales, bibliothèque départementale, patrimoine, culture, environnement MDPAD comme vous l’entendez et comme vous le voyez, les liens sont textuels, donc nous savons immédiatement à quoi nous avons à faire. Par exemple, je vais aller visiter la bibliothèque départementale bibliothèque départementale Je clique sur le lien intitulé bibliothèque "entrée" 3%, 100%, ?? bibliothèque départementale de l’Isère Je vais donc essayer d’accéder au catalogue en ligne. "C" Conseil Général, "C" Contact, "C" Catalogue Et effectivement, il y a bien un lien textuel qui me dit tout de suite "catalogue" donc je peux cliquer dessus comme n’importe qui, voilà ! Entrée, 14%, 100%, 7 liens, catalogue de la bibliothèque Voilà, le catalogue est ouvert sans aucune difficulté.

Tutoriel: créer des liens accessibles

Des liens hypertextes sont des éléments essentiels à la navigation mais s’avèrent également être une façon efficace de découvrir le contenu d’une page pour une personne aveugle. Certaines aides techniques comme le logiciel de revue d’écran utilisé par Isabelle, offrent la possibilité d’afficher la liste de la totalité des liens présents sur la page. Si les intitulés de ces liens ne sont pas clairement compréhensibles, ils deviennent inutilisables pour les internautes non voyants. Ainsi, nous prendrons soin d’éviter les intitulés qui, pris en dehors de leur contexte, ne fournissent pas une information claire. Nous avons également vu dans ce film l’exemple de la multiplication de liens portant un même intitulé, mais pointant vers des destinations différentes. Pour être un outil efficace de navigation, tous les liens portant le même intitulé, doivent obligatoirement pointer vers la même cible. L’intitulé d’un lien hypertexte doit être clairement compréhensible. Il contraint un maximum de 80 caractères, accent et espace comptant chacun pour un caractère. Au delà de 80 caractères, le temps de découverte d’une page deviendrait rapidement très long, notamment pour des internautes utilisant des afficheurs "braille". Lorsqu’il n’est pas possible de rendre compréhensible un lien par son seul intitulé, il est recommandé d’utiliser l’attribut title sur l’élément A pour apporter d’avantage de précision. Cet exemple de compte-rendu de séance proposé sur le site Web du Conseil Régional du Languedoc-Roussillon illustre parfaitement nos propos. L’intitulé du lien est : version PDF (137,37 Ko) L’attribut title comporte des indications beaucoup plus précises : version PDF de la délibération n° CR 07/01.001 - Apprentissage Evolution de l’offre de formation dans les centres de formation d’apprentis. La plupart des aides techniques choisiront la formation la plus complète en se basant sur le nombre de caractères. Aussi, le contenu de l’attribut titel devra être plus long que l’intitulé du lien sans, toutefois excéder 120 caractères.

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