Discussion :

[laurentSc]

Bonjour,

mon souci est résumé par le titre de cette discussion. En fait, si je fais des liens de ce type :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" title="essai accessibilité">essai accessibilité</a>

le lecteur d'écran de mon interlocuteur non-voyant lui dit "lien", ce qui n'est pas très explicite. (je ne sais pas quel navigateur, il utilise). Comment faire ?

[Invité]

Bonjour,

• Balise <a>
• Accessibilité des liens : utilisation correcte de l’attribut Title

N.B. un copain développeur aveugle utilise Jaws.

[laurentSc]

Justement mon interlocuteur aveugle utilise aussi jaws. Y a donc moyen de faire mieux. Mais comment ?

[Invité]

... si je fais des liens de ce type ....

Laurent,
On commence à bien te connaître....

Montre un VRAI code, que tu as effectivement TESTE avec ton ami.
Un copier-coller tel quel du fichier utilisé.

[laurentSc]

Pas le temps de faire mieux tout de suite mais le site testé est
http://vercorshandisport.org/html5te...il/accueil.php et les liens sont par exemple les 2 flèches sous le calendrier

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<ul class="calendar-line">
  <li><a href="/html5test/accueil/accueil.php?m=4&amp;y=2018" title="vers 4 2018 ">&lt;&lt;</a></li>
  <li><a href="/html5test/accueil/accueil.php?m=6&amp;y=2018" title="vers 6 2018 ">&gt;&gt;</a></li>
</ul>

[Invité]

• https://www.handi-pratique.com/acces...te-liens-title

Quand et comment utiliser le titre d’un lien ?

On constate que les lecteurs d’écran ne transcrivent pas le contenu des liens de la même manière :
certains choisissent de lire le titre du lien lorsque celui-ci est plus grand, d’autres favorisent l’intitulé, aucune action n’est possible de la part du Webmaster ou du rédacteur pour faire passer l’un ou l’autre des éléments en priorité.

Ça doit donc dépendre du lecteur d’écran utilisé (?).

Il faut que tu POUSSES plus loin tes recherches et TESTS :
As-tu essayé avec d'AUTRES liens, au title plus EXPLICITE, plus LONG, plus DESCRIPTIF, plus..... ??

[laurentSc]

Bonsoir,
j'ai compris quel était le problème et pu le résoudre : le lecteur d'écran utilise l'intitulé du lien donc si cet intitulé est uniquement composé d'un dessin (ici c'était 2 chevrons), il est perdu. J'ai donc remplacé les chevrons par du texte et il n'y a plus de problème.

[AdmChiMay]

Bonjour,

Tu dis 2 chevrons ? Puis-je en déduire que c'est un lien-image (ie, constitué seulement d'une image) ?
Chez nous, on supprime le title, ce qu'il faut savoir est dans l'alternative de l'image (et rien du tout dans l'intitulé). Et Jaws avale bien l'info.

cf disic.

[laurentSc]

Non, en fait ce n'est pas un lien image et à la place de image, j'aurais peut-être du dire symbole html (&lt; et &gt; )

[Stellar7]

Alors il va falloir que tu places deux éléments dans ton intitulé, chacun dans son span :
- span 1 : il est vide, mais il possède un style qui insère l'élément à afficher, que cet élément soit une image ou un caractère/texte. Pour l'outil d'aide (Jaws, p.ex.), c'est un truc vide, donc il s'en fiche, pas de restitution.
- span 2 : contient l'intitulé, mais avec un style qui le rend invisible à l'affichage à l'écran (p.ex. en le déplaçant de 9999px sur le côté). Pour l'outil d'aide il y a quelque chose à lire/dire, et si tu désactives les styles, le message est bien là, marqué en clair.

Il parait que les frameworks style bootstrap/angular gèrent pas mal de choses côté accessibilité, mais je ne suis pas le spécialiste pour en dire plus. Si tu gères à la mano, cela reste simple à faire.