Guide d’accessibilité pour développeur·euse web : lecteur d’écran, sémantique et navigation directe
Si vous débutez avec un lecteur d’écran en tant que développeur·euse, cet autre article peut vous apprendre les bases utiles pour bien démarrer avec NVDA (un lecteur d’écran reconnu), notamment à naviguer linéairement dans une page web.
La navigation linéaire est indispensable à connaître lors de l’utilisation d’un lecteur d’écran. mais elle a l’inconvénient de nécessiter de parcourir tous les éléments les uns après les autres pour atteindre ce que vous cherchez. Pour gagner du temps, une personne utilisant un lecteur d’écran pourra vouloir aller directement aux éléments de la page qui pourraient l’intéresser, comme par exemple sauter de titre en titre pour trouver plus rapidement le contenu recherché.
C’est une des raisons pour laquelle la sémantique est primordiale dans la conception d’une page web. Dans l’absolu, il serait possible d’utiliser uniquement des éléments neutres (div, span, …). Mais en donnant du sens à chacun des éléments de la page (en dehors des éléments purement techniques pour la mise en page), la navigation s’en retrouve grandement facilitée, que ce soit pour quelqu’un de valide ou quelqu’un en situation de handicap.
Par ailleurs, la bonne utilisation de la sémantique donne des superpouvoirs à celui ou celle qui a recours à un lecteur d’écran. En voici quelques exemples illustrés à travers l’utilisation du lecteur d’écran NVDA. A noter que toutes les commandes peuvent être exécutées en appuyant en même temps sur shift pour une navigation vers l’arrière (vers le haut de la page).
Naviguer entre les régions (ou landmarks)
HTML propose les régions suivantes dans sa spécification :
- header (en-tête de la page)
- footer (pied de page)
- nav (menu de navigation)
- main (contenu principal de la page)
- aside (information complémentaire)
Avec NVDA, il est possible de naviguer directement entre les régions de la page, simplement en un appui sur la touche d. Cela permet à la personne de pouvoir atteindre rapidement telle ou telle partie de la page, pour ensuite potentiellement affiner sa navigation.
A noter qu’en présence de plusieurs occurrences d’une même région, il est vivement recommandé d’ajouter un nom accessible à la région (via par exemple un attribut aria-label, ou aria-labelledby), pour que la compréhension de la page soit plus aisée. Par exemple, un·e utilisateur·trice de la page pourrait ne pas comprendre facilement quelle zone sert à quoi si la page contient deux zones main ou deux nav. Ajouter un nom accessible à chacune d’elle permet de mieux comprendre à quoi elles servent.
Naviguer de titre en titre
Parallèlement, il est possible via NVDA de parcourir les titres, les uns après les autres. Ici aussi, c’est une fonctionnalité intéressante pour aider à comprendre les différentes parties de la page et ainsi se rendre rapidement vers le contenu d’intérêt.
Le passage de titre en titre se fait via un appui sur la touche h.
Il est également possible de naviguer de titre en titre de même niveau, mais cette fonctionnalité peut être un peu difficile à appréhender. En effet, cette commande passera au titre suivant, même si un titre de niveau supérieur est intercalé entre le titre courant et le suivant. Par exemple, je peux passer d’un titre de niveau 2 à un autre de niveau 2, même s’il y a un titre de niveau 1 entre deux (et sans même m’en rendre compte). Pour parcourir les titres d’un niveau donné, un appui sur le chiffre correspondant au niveau exécutera la commande.
Attention, il s’agit des chiffres au-dessus des lettres du clavier, et non du pavé numérique.
Parcourir les liens
NVDA offre également la possibilité de naviguer entre les liens via un simple appui sur la touche k. Cette commande peut être pratique lorsqu’on cherche à se rendre à une section particulière du site, sans savoir au préalable où trouver le lien dans la page.
Naviguer entre les éléments d’un formulaire
La dernière fonctionnalité présentée ici, et non des moindres, offre une facilitation pour le remplissage d’un formulaire. En effet, l’utilisation de la touche f permet de passer d’élément de formulaire en élément du formulaire, que ce soit une zone de saisie, une liste déroulante, un bouton… Ce comportement diffère légèrement du parcours de la page avec la touche Tabulation, puisque certains éléments focusables seront sautés (tels que les liens).
Conclusion
Les différentes commandes dans cet article n’ont pas réellement pour vocation de faire de vous un·e expert·e de la navigation avec NVDA. Le but était avant tout de vous montrer qu’un lecteur d’écran peut être un outil puissant, et que quelques fonctionnalités de base peuvent aider une personne qui l’utilise à être plus rapide (et plus à l’aise) dans sa navigation, à condition que les pages HTML soient bien conçues. C’est une des raisons primordiales pour lesquelles il est important de bien respecter la sémantique lors du développement d’une page, afin que les personnes en situation de handicap puissent s’appuyer sur elle et gagner en confort d’utilisation (voire même tout simplement de pouvoir juste utiliser la page).
Par ailleurs, il aurait aussi été possible de mentionner l’existence de la fenêtre de Liste d’éléments, qui permet via NVDA de visualiser la structure du document selon les éléments d’intérêt, tels que les titres, liens, éléments de formulaire… Pour les plus curieux et curieuses, un appui sur NVDA + F7 vous permettra de le découvrir.
