La tabulation, la navigation au clavier, est une fonctionnalité clé de l’accessibilité web qui permet aux utilisateurs de naviguer entre les éléments interactifs d’une page web à l’aide de la touche Tab de leur clavier. Cette fonctionnalité est particulièrement utile pour les personnes à mobilité réduite qui ne peuvent pas utiliser une souris ou qui préfèrent naviguer à l’aide du clavier. Cependant, par défaut, l’ordre de tabulation est déterminé par l’ordre de balisage des éléments HTML, ce qui peut ne pas toujours être optimal du point de vue de l’accessibilité. C’est là que l’attribut tabindex entre en jeu. L’attribut « tabindex » est un attribut HTML qui permet aux développeurs web de spécifier l’ordre de tabulation des éléments sur une page. Il permet de personnaliser l’ordre dans lequel les éléments reçoivent le focus lors de la navigation au clavier. En utilisant judicieusement l’attribut « tabindex », les développeurs peuvent améliorer l’accessibilité de leurs pages web en permettant aux utilisateurs de naviguer de manière plus efficace et prévisible à l’aide du clavier.
Dans la suite de cet article, nous allons explorer comment utiliser l’attribut « tabindex » pour optimiser l’ordre de tabulation et offrir une expérience utilisateur inclusive sur votre site web. Nous aborderons également les bonnes pratiques à suivre pour garantir une utilisation appropriée de cet attribut et assurer la conformité aux normes d’accessibilité web.
Navigation au clavier
La problématique
La navigation sur un site Web peut être difficile pour les personnes souffrants de handicap et qui ont des difficultés à utiliser une souris ou un dispositif de pointage en raison d’un handicap physique, tel qu’une déficience motrice ou visuelle, ainsi que des personnes âgées.
Solution
Pour ces utilisateurs, la navigation au clavier est une solution efficace pour accéder aux contenus en ligne. Cependant, la navigation au clavier nécessite que les sites Web soient conçus de manière à permettre une navigation cohérente et efficace, en utilisant des conventions de navigation clavier standard et en évitant les pièges de conception qui peuvent créer des obstacles pour les utilisateurs en situation de handicap.
Exemple concret
La navigation au clavier est possible sur le site de la commune de Hasparren. Le site est entièrement navigable au clavier : de son menu principal à ses formulaires en ligne.
Un utilisateur de clavier peut naviguer a l’aise des touches suivantes :
- La touche Tab permet de se déplacer d’un élément interactif à l’autre dans l’ordre prévu par le code HTML de la page.
- La touche Maj + Tab : permet de se déplacer d’un élément interactif à l’autre en sens inverse.
- La touche Entrée : permet d’activer l’élément interactif sélectionné (par exemple, cliquer sur un bouton ou suivre un lien).
- La touche Espace : permet d’activer l’élément interactif sélectionné (par exemple, cocher une case à cocher).
- Etc…
Cette méthode de navigation facilite l’accès aux informations, aux formulaires et aux fonctionnalités d’un site Web pour les personnes qui ne peuvent pas utiliser une souris.
L’ordre de tabulation
Qu’est ce que l’ordre de tabulations?
L’ordre de tabulation est l’ordre dans lequel les éléments interactifs d’une page web sont accessibles en utilisant la touche Tab du clavier.
Il est important pour assurer une navigation clavier cohérente et efficace pour les utilisateurs qui ne peuvent pas utiliser la souris ou ont des difficultés à utiliser la souris.
En fournissant un ordre de tabulation logique et cohérent, la navigation est facilitée pour les utilisateurs de lecteurs d’écran.
Cet ordre est généralement défini par l’ordre dans lequel les éléments apparaissent dans le code HTML de la page, mais il peut être modifié à l’aide de la balise « tabindex ».
Exemple concret
L’ordre de tabulation du site de la commune de Hasparren est le suivant :
- Choix ou refus des cookies : est une fonctionnalité qui permet aux utilisateurs de décider s’ils souhaitent accepter ou refuser les cookies du site.
- Liens d’évitement : sont des liens qui permettent aux utilisateurs de passer directement au contenu principal de la page, en sautant les éléments de navigation et autres contenus répétitifs.
- 1er élément du menu principal du site : est généralement l’élément de menu le plus utilisé du site.
- Etc…
En organisant l’ordre de tabulation de cette manière, le site web assure une navigation claire et efficace pour tous les utilisateurs.
La balise tabindex
La balise « tabindex » est une balise HTML qui permet à un élément HTML de recevoir le focus. Il a besoin d’une valeur de zéro ou d’un nombre négatif pour fonctionner de manière accessible. Source : https://www.a11yproject.com/posts/how-to-use-the-tabindex-attribute/
Lorsque « tabindex » a une valeur positive ou 0, il est possible d’atteindre l’élément avec la touche TAB du clavier.
L’attribut tabindex a trois utilisations distinctes
tabindex= »1″(ou tout nombre supérieur à 1) définit une tabulation explicite ou un ordre de navigation au clavier. L’élément peut être atteint avec la touche Tab
tabindex= »0″permet aux éléments autres que les liens et les éléments de formulaire de recevoir le focus du clavier. Cela ne change pas l’ordre de tabulation, mais place l’élément dans le flux de navigation logique, comme s’il s’agissait d’un lien/bouton sur la page.
tabindex= »-1″permet à des éléments autres que des liens et des éléments de formulaire de recevoir un focus « programmatique », ce qui signifie que le focus peut être défini sur l’élément via un script. Source : https://webaim.org/techniques/keyboard/tabindex
Remarque concernant tabindex= »0″. Si l’élément est focalisable par défaut, c’est a dire si l’élément peut être sélectionné avec la touche Tab par défaut lorsque la page Web est chargée. Par exemple, les éléments HTML tels que les liens et les boutons sont focusables par défaut. Il n’est pas besoin de tabindex du tout, mais si vous réutilisez un élément comme <span>ou <div>, c’est tabindex= »0″, le moyen le plus naturel de l’inclure dans l’ordre de tabulation.
Il est important de mentionner qu’il est plus facile d’utiliser un élément HTML focalisable. Par exemple, lorsque vous choisissez d’utiliser un <button>ou <input type= »checkbox »>, le focus et l’interaction du clavier sont gérés automatiquement par le navigateur.
Remarque sur tabindex= »1″, une valeur positive impose un ordre de tabulation sur le contenu qui ne ressemble en rien à l’ordre de tabulation attendu.
Définir un ordre de tabulation
Il n’est pas nécessaire de définir un ordre de tabulation manuellement. Utilisez plutôt des éléments interactifs appropriés ( a pour les liens, button pour les boutons, etc.) et placez-les dans l’ordre de lecture du document.
Conclusion
L’attribut « tabindex » est un outil puissant pour améliorer l’accessibilité des pages web en permettant aux utilisateurs de naviguer efficacement à l’aide du clavier. En personnalisant l’ordre de tabulation des éléments, les développeurs web peuvent offrir une expérience utilisateur fluide et inclusive. Cependant, il est important de suivre les bonnes pratiques et de se conformer aux normes d’accessibilité web lors de l’utilisation de l’attribut « tabindex ». Veillez à tester régulièrement l’accessibilité de votre site web et à prendre en compte les besoins des utilisateurs ayant des capacités différentes pour garantir une expérience en ligne accessible à tous. En intégrant judicieusement l’attribut « tabindex » dans vos projets de développement web, vous contribuez à créer un Internet plus inclusif et accessible pour tous les utilisateurs.
Lectures complémentaires