Accessibilité site Internet : Ordre de tabulation logique

Blog

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>

Ressources mentionnées

Ces articles peuvent vous interesser

Comment structurer sa page web pour la rendre accessible ?

Les titres et sous-titres organisent le contenu de vos pages web. Ils sont importants pour ...

Accessibilité web : la navigation au clavier

La navigation au clavier La navigation au clavier est l’un des aspects les plus importants ...

Rendre son site Internet accessible : la sémantique HTML

En mai 2001, un article publié par Tim Berners-Lee (l’inventeur du World Wide Web), James Hendler et Ora Lassilain dans Scientific America publiait ...

Norme accessibilité web en France : Le RGAA Version 4.1

Norme accessibilité web RGAA : Référentiel Général d’Amélioration de l’Accessibilité  “L’accessibilité numérique consiste à rendre ...

Accessibilité site Internet : La page doit présenter un ordre de tabulation logique

De nombreux utilisateurs souffrant de handicap naviguent sur un site Internet à l’aide de leur ...

Votre site Internet est-il accessible ?

Vous souhaitez tester l’accessibilité de votre site Internet ? Une petit vérification rapide vous permettra ...

Qu’est-ce-que l’accessibilité web ?

Cet article a pour sujet l’accessibilite web. Lorsque les sites Web sont correctement conçus et ...
Back to top