Il arrive parfois que le texte d’ancrage visible, tel qu’imposé par la conception de l’interface utilisateur, ne soit pas très significatif pour les utilisateurs malvoyants. On pourrait utiliser l’attribut `aria-label`, l’attribut `title` ou même du texte hors écran sur les liens textuels. Mais quelle est la meilleure pratique compte tenu de la prise en charge actuelle par les technologies d’assistance ?
Comparaison du comportement des lecteurs d'écran pour les attributs « aria-label » et « title » sur les liens textuels
Liens utilisés pour ce test
- Different title and anchor text: Annual Report 2013 Markup: <a href=”#” title=”Download PDF”>Annual Report 2013</a>
- Identical title and anchor text: Annual Report 2013 Markup: <a href=”#” title=”Annual Report 2013″>Annual Report 2013</a>
- Aria-label present besides anchor text: Annual Report 2013 Markup: <a href=”#” aria-label=”Download PDF”>Annual Report 2013</a>
- Both Aria-label and title present besides anchor text: Annual Report 2013 Markup: <a href=”#” aria-label=”Download PDF” title=”2013- Annual Report”>Annual Report 2013</a>
La comparaison
| Lien | JAWS 15 | NVDA 2013.3 | VO sous OS X Lion | VO sur iOS (iPad) |
|---|---|---|---|---|
| A. Titre et texte d'ancrage différents : | Texte d'ancrage + titre | Texte d'ancrage + titre | Texte d'ancrage | Texte d'ancrage + titre |
| B. Titre et texte d'ancrage identiques : | Uniquement le texte d'ancrage | Texte d'ancrage + titre | Texte d'ancrage | Texte d'ancrage + titre |
| C. Étiquette « Aria » présente en plus du texte d'ancrage : | Label Aria | Texte d'ancrage | Texte d'ancrage + aria-label | Label Aria |
| D. La balise « Aria » et le titre apparaissent tous deux en plus du texte d'ancrage : | Étiquette Aria + titre | Texte d'ancrage + titre | Texte d'ancrage + aria-label | Étiquette Aria + titre |
Remarques :
- Pour JAWS, ce comportement est identique dans Firefox et Internet Explorer (Windows 7).
- NVDA n'a été testé qu'avec Firefox
- VoiceOver a été utilisé avec Safari sous OS X et iOS
- Les paramètres de niveau de détail par défaut ont été utilisés pour tous les lecteurs d'écran. Les liens de test ne reflètent pas le balisage à utiliser pour les liens de téléchargement de fichiers PDF (ou d'autres types de fichiers).
Conclusion :
- JAWS 15 offre la meilleure expérience utilisateur, suivi par VoiceOver sur iOS
- L'attribut « title » est lu par VoiceOver sous OS X lorsque l'utilisateur vérifie explicitement la présence d'un texte d'aide sur l'élément (VO+Maj+h). Cela revient à vérifier la présence d'un attribut « title » sur un lien avec JAWS (ou Window-Eyes).
- Les développeurs de NVDA s'efforcent d'améliorer l'expérience utilisateur lorsqu'un lien contient un attribut `aria-label`, comme indiqué dans le fil de discussion intitulé « Concernant le calcul du nom accessible pour l'attribut `aria-label` dans les liens ? », qui a en partie inspiré la rédaction de cet article.
L’attribut `aria-label` et le titre sont tous deux pris en compte dans l’algorithme de calcul du texte alternatif, le titre ayant la priorité la plus faible. L’attribut `aria-label` est privilégié, même par rapport au texte d’ancrage, pour déterminer le nom accessible d’un lien. Dans les cas où un texte différent du texte d’ancrage doit être affiché pour aider les utilisateurs malvoyants, l’attribut `aria-label` constitue le meilleur choix. Lorsque le nom du lien (c'est-à-dire le texte d'ancrage ou l'« aria-label ») doit être complété par un texte explicatif, l'attribut « title » est plus approprié. Cela permet de réduire le recours à la méthode CSS de texte hors écran pour fournir ce texte complémentaire destiné à aider les utilisateurs non voyants. Il convient de noter que ni l'« aria-label » ni l'attribut « title » ne sont accessibles aux utilisateurs qui naviguent uniquement au clavier ; toutefois, l'attribut « title » s'affiche sous forme d'info-bulle lorsque l'on passe la souris sur l'élément.
Mise à jour :
Les résultats obtenus avec NVDA 2014 sont désormais meilleurs. Les résultats dans les situations B, C et D ci-dessus sont donc différents :
- NVDA ignore le titre s'il est identique au texte d'ancrage
- NVDA lit l'attribut « aria-label » et ignore le texte d'ancrage
Mise à jour 2020 :
Depuis la dernière mise à jour de cet article en décembre 2015, certains changements sont intervenus concernant l'adoption et l'utilisation des navigateurs par les utilisateurs de lecteurs d'écran :
- Chrome est désormais plus largement utilisé, en plus de Firefox
- La prise en charge de Microsoft Edge s'est considérablement améliorée, ce qui a entraîné une hausse de son utilisation
- Plateforme mobile : Chrome avec TalkBack sur un appareil Android est la deuxième meilleure alternative après VoiceOver et Safari sur un appareil iOS
Référence : WebAIM : Enquête auprès des utilisateurs de lecteurs d'écran n° 8 (2019)
C'est pourquoi, à l'aube de cette nouvelle année, les lecteurs d'écran et navigateurs suivants ont fait l'objet de nouveaux tests dans le cadre de cette mise à jour. Les exemples utilisés ici sont les mêmes que ceux présentés dans l'article original publié il y a plus de cinq ans.
Navigateurs sur un ordinateur portable sous Windows 10
- Chrome 79 et Chrome 78
- Firefox 71 et Firefox 68.3.0 ESR
- Internet Explorer 11
- Microsoft Edge
Tests sur mobile :
- VoiceOver et Safari sur un iPhone 11 sous iOS 13.3
- TalkBack 8.1 avec Chrome sur un Pixel sous Android 10
Résultats
Les lecteurs d'écran affichent de manière cohérente et correcte l'attribut `aria-label`, qui remplace le texte d'ancrage, aussi bien sur la plateforme Windows 10 que sur les appareils mobiles (iOS et Android). Cela démontre une bonne prise en charge de la technique WCAG « ARIA8 – Utilisation de l'attribut `aria-label` pour les liens », qui repose sur le fait que le texte de l'attribut `aria-label` remplace le texte d'ancrage.
Résultats avec JAWS 2020 / JAWS 2019
- JAWS se comporte de la même manière sur Chrome, Firefox et Internet Explorer : le titre identique du cas B est ignoré.
- Le seul problème constaté concerne Microsoft Edge : JAWS ne parvient tout simplement pas à lire l'attribut « title » des quatre liens.
Résultats avec NVDA
- Avec Internet Explorer, NVDA ne fait pas apparaître l'attribut « title » pour aucun des liens.
- NVDA lit le même texte de titre (cas B) que ce soit avec Chrome ou Edge. L'expérience utilisateur avec Firefox est meilleure, comme cela avait déjà été mis à jour en 2015.
Résultats sur les appareils mobiles
- Aucun changement dans le fonctionnement de VoiceOver.
- TalkBack répète le texte du titre à l'identique avec Chrome sur le Pixel sous Android 10
En somme, les seules anomalies à résoudre concernent l'affichage de l'attribut « title » lors de l'utilisation d'Edge et d'IE 11 avec JAWS et NVDA respectivement. Il est toutefois peu probable qu'une amélioration soit apportée à la combinaison IE 11 et NVDA.
