Qu’est ce que cela signifie vraiment qu’un site soit navigable au clavier

La navigation efficace est vitale pour un site Web fonctionnel, mais tout le monde n’utilise pas Internet de la même manière. Alors que la plupart des visiteurs font défiler le mobile ou cliquez avec une souris, de nombreuses personnes n’utilisent que leurs claviers. Jusqu’à 10 millions d’adultes américains Avoir le syndrome du canal carpien, qui peut provoquer une douleur lors de la maintenance d’une souris, et les problèmes de vision peuvent rendre difficile la suite d’un curseur. Par conséquent, vous devriez garder votre site clavier navigable pour atteindre l’attrait universel et l’accessibilité.

Comprendre la navigation au clavier

La navigation au clavier permet aux utilisateurs de s’engager avec votre site Web uniquement via la saisie du clavier. Cela comprend l’utilisation de raccourcis et la sélection d’éléments avec le Languette et Entrer Clés.

Il y a plus de 500 raccourcis clavier Parmi les systèmes d’exploitation et les applications spécifiques que votre public peut utiliser. Les standard pour la navigation sur le Web incluent Ctrl + F pour trouver des mots ou des ressources, Changement + Flèche Pour sélectionner le texte, et Ctrl + Languette pour se déplacer entre les onglets du navigateur. Bien que ce soit en grande partie les responsabilités des sociétés de logiciels derrière le navigateur ou le système d’exploitation spécifique, vous devriez toujours les considérer.

Navigation à bouton unique est un autre morceau de navigabilité du clavier. Les utilisateurs peuvent se déplacer entre les éléments cliquables avec le Languette et Changement touches, utilisez le Flèche touches pour faire défiler, appuyer Entrer ou Espace pour «cliquer» sur un lien et quitter Échap.

Le Page d’accueil du Washington Post va plus loin. Pressage Languette Prise en surbrillance des éléments cliquables comme il se doit, mais la première appuye sur le bouton fait apparaître un lien vers l’instruction d’accessibilité du site en premier. Les utilisateurs peuvent naviguer au-delà, mais y compris il souligne comment la conception comprend comment La navigabilité du clavier est une question d’accessibilité.

Vous devez comprendre comment les gens peuvent utiliser ces contrôles afin que vous puissiez construire un site qui les facilite. Ces options de navigation sont généralement standard, donc tout écart ou manque de fonctionnalité se démarquera. Assurer la navigabilité du clavier, en particulier en termes d’activation de ces raccourcis et de contrôles spécifiques, vous aidera à répondre à ces attentes et à éviter de détourner les utilisateurs.

Pourquoi la navigation au clavier est importante dans la conception Web

La navigabilité du clavier est cruciale pour plusieurs raisons. Plus particulièrement, cela rend votre site plus accessible. Aux États-Unis seuls, Plus d’une personne sur quatre ont un handicap et de nombreuses conditions de ce type affectent l’utilisation de la technologie. Par exemple, les déficiences motrices rendent difficile pour quelqu’un d’utiliser une souris standard, et les utilisateurs ayant des problèmes de vision nécessitent généralement une utilisation du clavier et du lecteur d’écran.

Au-delà de la prise en compte de divers besoins d’utilisation, l’activation d’une gamme plus large de méthodes de contrôle rend un site pratique. L’utilisation d’un clavier plutôt qu’une souris est plus rapide lorsqu’elle fonctionne comme elle devrait et peut se sentir plus à l’aise. Considérant comment les travailleurs dépensent Près d’un tiers de leur semaine de travail À la recherche d’informations, les obstacles à l’efficacité peuvent être très perturbateurs.

Ne pas échouer dans ces domaines peut entraîner des complications légales. Des réglementations comme le ACHERCANS WARCHATS ACT nécessitent l’accessibilité technologique. Alors que l’Ada n’a pas de règles contraignantes Pour ce qui constitue un site Web accessible, il mentionne spécifiquement la navigation au clavier dans ses conseils non contraignants. Ne pas soutenir de telles fonctionnalités ne signifie pas nécessairement que vous risquerez de faire face à des sanctions légales, mais les tribunaux peuvent utiliser ces normes pour informer leur décision sur la question de savoir si votre site est raisonnablement accessible.

En 2023, Kitchenaid fait face à un recours collectif pour ne pas répondre à ces normes. Les demandeurs ont allégué que le site de l’entreprise ne prenait pas en charge le texte ALT ou la navigation par clavier, ce qui le rend inaccessible aux utilisateurs ayant des déficiences visuelles. Bien que l’affaire se soit finalement installée à l’amiable, c’est un rappel de la répercussions juridiques et financières potentielles de la négligence de l’inclusivité.

En dehors de la loi, un site inaccessible présente préoccupations éthiquescar il montre un traitement préférentiel pour ceux qui peuvent utiliser une souris, même si c’est involontaire. Même sans action en justice, la reconnaissance publique de ce biais peut entraîner une baisse des visiteurs et une image publique contaminée.

Éléments d’un site navigable par clavier

Heureusement, assurer navigabilité du clavier est une pratique de conception de l’expérience utilisateur simple. Étant donné que la navigation est standard entre les OS et les navigateurs, les sites accessibles au clavier utilisent quelques éléments cohérents.

Indicateurs de mise au point

L’accessibilité Web à l’esprit indique que les sites doit fournir un indicateur visuel d’éléments actuellement au point lorsque les utilisateurs appuyent Languette. Les indicateurs de mise au point sont généralement une boîte simple autour de l’icône en surbrillance.

Ce sont des standard dans CSS, mais certains designers les cachent, alors évitez d’utiliser outline:0 ou outline:none pour limiter leur visibilité. Vous pouvez également augmenter le contraste ou modifier la couleur de l’indicateur dans CSS.

Le Page d’accueil de CNN Breaking News est un bon exemple de Un indicateur de mise au point fort. Pressage Languette évoque immédiatement la boîte, ce qui est suffisamment audacieux pour voir facilement et même utilise une bordure blanche lorsque cela est nécessaire pour se démarquer contre les éléments du site noir ou foncé.

Ordre d’onglet logique

L’ordre dans lequel l’indicateur de mise au point se déplace entre les éléments est également important. D’une manière générale, en appuyant sur le Languette La clé devrait le déplacer de gauche à droite et de haut en bas – de la même manière que les gens lisent en anglais.

Quelques erreurs peuvent faire obstacle. Boutons désactivés perturber le flux de navigation du clavier En sautant un élément sans explication ou en la mettant en surbrillance sans la rendre cliquable. De même, une interface où les icônes ne tombent pas dans un ordre prévisible de gauche à droite, de haut en bas rendra difficile le mouvement de l’onglet logique.

Le Location de véhicules Sutton Maddock Le site est un bon exemple de ce qu’il ne faut pas faire. Lorsque vous appuyez LanguetteL’indicateur de mise au point passe de «Contact» au lien Facebook avant de revenir sur le lien Twitter. Il commence à droite et se déplace à gauche lorsqu’il passe à la ligne suivante – l’ordre opposé de ce qui semble naturel.

Skip Navigation Links

Les liens de sauts sont également essentiels. Ces éléments interactifs permettent aux utilisateurs de clavier de passer à un contenu spécifique sans touches répétées. N’oubliez pas que ces sauts doivent être l’une des premières zones mises en évidence lorsque vous appuyez Languette Ils fonctionnent donc comme prévu.

Le Page d’accueil du groupe HSBC A quelques liens de navigation à saut. Pressage Languette Arrête trois options, permettant aux utilisateurs de sauter rapidement à la partie du site les intéresse.

Éléments interactifs accessibles au clavier

Enfin, tous les éléments interactifs sur un site de clavier navigable doivent être accessibles via frappeurs. Tout ce que les gens peuvent cliquer ou faire glisser avec un curseur devraient également prendre en charge la navigation et l’interaction. L’activation est aussi simple que de laisser les utilisateurs sélectionner tous les éléments avec le Languette ou Flèche touches et appuyez-les avec Espace ou Entrer.

De manière appropriée, ce Arizona State University Page sur l’accessibilité au clavier Présente bien ce concept. Tous les menus déroulants sont possibles à ouvrir en naviguant vers eux via Languette et pressant Entrerles utilisateurs n’ont donc pas besoin d’une souris pour interagir avec eux.

Comment tester la navigabilité du clavier

Après avoir conçu un UX accessible au clavier, vous devez le tester pour vous assurer qu’il fonctionne correctement. La façon la plus simple de le faire est d’explorer le site uniquement avec votre clavier. Le graphique ci-dessous décrit les critères à rechercher lors de la détermination si votre site est légitimement navigable par clavier.

Le Directives d’accessibilité du contenu Web Décrivez deux règles de test Pour vérifier la navigabilité du clavier:

1. Le premier garantit que tous les éléments interactifs sont accessibles via le Languette clé,
2. Le deuxième vérifie la fonctionnalité de défilement du clavier.

Utilisez les deux normes pour revoir votre UX avant de créer un site en direct.

Les problèmes typiques incluent l’incapacité de mettre en évidence les éléments Languette clé ou des choses qui ne tombent pas dans un ordre naturel. Vous pouvez découvrir les deux problèmes en essayant d’accéder à tout avec votre clavier. Cependant, vous préférez peut-être effectuer un audit de navigabilité via un tiers. De nombreuses entreprises privées offrent ces services, mais vous pouvez également Utilisez le Bureau of Internet Accessibility Pour un audit WCAG de base.

Rendez le clavier de votre site navigable aujourd’hui

La navigabilité du clavier vous garantit à tous les besoins et préférences pour une conception de site Web inclusive et accessible. Bien qu’il soit simple à mettre en œuvre, il est également facile à manquer, alors rappelez-vous ces principes lors de la conception de votre UX et testez votre site.

WCAG fournit plusieurs techniques que vous pouvez utiliser pour répondre aux normes d’accessibilité au clavier et améliorer l’expérience de vos utilisateurs:

Suivez ces directives et utilisez les règles de test de WCAG pour créer un site accessible. N’oubliez pas de le revérifier chaque fois que vous ajoutez des éléments ou changez votre UX.

De plus, considérez les lectures recommandées suivantes pour en savoir plus sur les claviers et leur rôle dans l’accessibilité:

La convivialité est une meilleure pratique de l’industrie qui démontre votre engagement envers l’inclusivité pour tous. Même les utilisateurs sans handicap apprécieront une navigation de clavier intuitive et efficace.

(YK)