De nombreux utilisateurs souffrant de handicap naviguent sur un site Internet à l’aide de leur clavier. Pour améliorer la navigation sur la page, celle-ci doit présenter un ordre de tabulation logique.
Comment tester l’ordre de tabulation d’une page manuellement ?
Pour vérifier si l’ordre de tabulation de votre page est bien logique, il est important d’essayez de parcourir la page à l’aide des tabulations. L’ordre dans lequel les éléments sont focalisés doit viser à suivre l’ordre DOM pour Document Object Model.
Notre service : Accessibilité web – Rendre votre site Internet accessible
Comment cela marche-t-il ?
L’ordre de tabulation doit suivre l’ordre de lecture, de gauche à droite, du haut vers le bas de votre page.
Êtes-vous en mesure d’accéder à tous les contrôles de la page ? Sinon, vous devrez peut-être utiliser tabindex pour améliorer la focalisation des commandes. La règle générale est que tout contrôle avec lequel un utilisateur peut interagir ou fournir une entrée doit viser à être focalisable et afficher un indicateur de focalisation. Si un utilisateur de clavier ne peut pas voir ce qui est ciblé, il n’a aucun moyen d’interagir avec la page.
Comment réparer un ordre de tabulation incorrect ?
Si l’ordre de tabulation semble incorrect, vous devez réorganiser les éléments dans le DOM pour rendre l’ordre de tabulation plus naturel.
Si vous ne parvenez pas à accéder à tous les contrôles interactifs de la page, la première solution consiste à remplacer les contrôles personnalisés par des alternatives HTML standardisées.
Par exemple, remplacez un <div>agissant comme un bouton par <button>. L’utilisation d’éléments HTML intégrés peut grandement améliorer l’accessibilité de votre site et réduire considérablement votre charge de travail.
Si vous créez des composants interactifs personnalisés sans équivalent HTML standardisé, utilisez l’attribut tabindex pour vous assurer qu’ils sont accessibles au clavier. Par example :
<div tabindex= »0″>Focus me with the TAB key</div>