Sélection du clavier

De nombreuses personnes utilisent un clavier ou un autre logiciel/matériel imitant les fonctionnalités d'un clavier, tel qu'un commutateur, comme moyen de navigation principal. Les personnes souffrant de limitations physiques temporaires, comme l'entorse du poignet ou les déficiences motrices fines comme le canal carpien, ainsi que certaines personnes non handicapées, peuvent choisir d'utiliser un clavier pour naviguer sur une page en raison de préférences personnelles, de l'efficacité ou du matériel défectueux.

Les utilisateurs malvoyants ou non-voyants peuvent utiliser un clavier pour la navigation, associé à leur logiciel d'agrandissement ou de lecteur d'écran. Cependant, pour naviguer sur un écran, ils peuvent utiliser des commandes de raccourci clavier différentes de celles d'un utilisateur voyant.

La prise en charge du clavier pour tous ces handicaps et circonstances est essentielle. L'accessibilité du clavier est en grande partie centrée sur la mise au point. La sélection fait référence à l'élément à l'écran qui reçoit actuellement les entrées du clavier.

Dans ce module, nous nous concentrerons sur la structure HTML et le style CSS pour le clavier et les éléments sélectionnables. Le module JavaScript contient plus d'informations sur la gestion de la sélection et les combinaisons de touches pour les éléments interactifs.

Ordre de priorité

Les éléments auxquels un utilisateur de clavier peut accéder sont appelés "éléments sélectionnables". L'ordre de sélection, également appelé par onglet ou ordre de navigation, correspond à l'ordre dans lequel les éléments sont sélectionnés. L'ordre de sélection par défaut doit être logique, intuitif et correspondre à l'ordre visuel d'une page.

Pour la plupart des langues, l'ordre de sélection commence en haut de la page et se termine en bas, et se déplace de gauche à droite. Cependant, comme certaines langues sont lues de droite à gauche, la langue principale de la page peut nécessiter un ordre de sélection différent.

Par défaut, l'ordre de sélection inclut des éléments HTML sélectionnables naturellement, tels que des liens, des cases à cocher et des entrées de texte. Les éléments HTML sélectionnables de façon naturelle incluent la prise en charge de l'ordre de tabulation intégré et la gestion de base des événements de clavier.

Vous pouvez mettre à jour l'ordre de sélection pour inclure tous les éléments qui ne sont normalement pas sélectionnés, tels que les éléments HTML non interactifs, les composants personnalisés ou les éléments avec des éléments ARIA qui remplacent la sémantique de sélection naturelle.

Index de tabulation

L'ordre de sélection commence par les éléments ayant un attribut tabindex positif (s'il y en a) et passe du plus petit nombre positif au plus grand (par exemple, 1, 2, 3). Il passe ensuite par les éléments avec un tabindex nul en fonction de leur ordre dans le DOM. Tous les éléments avec un tabindex négatif sont supprimés de l'ordre de mise au point naturel.

Lorsqu'un tabindex de zéro (tabindex="0") est appliqué à des éléments normalement non sélectionnables, ils sont ajoutés dans l'ordre de sélection naturel de la page, en fonction de la manière dont ils apparaissent dans le DOM. Toutefois, contrairement aux éléments HTML sélectionnables naturellement, vous devez prévoir une compatibilité supplémentaire avec le clavier pour qu'ils soient entièrement accessibles.

De même, si l'un de vos éléments est normalement sélectionnable, mais inactif (par exemple, un bouton inopérant tant qu'un champ de saisie n'est pas rempli), vous devez ajouter un index de tabulation négatif (tabindex="-1") à cet élément. L'ajout d'un index de tabulation négatif indique aux technologies d'assistance et aux claviers que ce bouton doit être supprimé de l'ordre de mise au point naturel. Mais ne vous inquiétez pas : vous pouvez utiliser JavaScript pour replacer le curseur sur l'élément si nécessaire.

Dans cet exemple, un attribut tabindex a été ajouté aux éléments qui ne sont pas naturellement ciblés. L'ordre des éléments a été manipulé à l'aide de tabindex pour illustrer la puissance qu'il peut avoir sur l'ordre de mise au point. C'est un exemple de ce qu'il ne faut pas faire !

Ignorer les liens

La plupart des sites Web actuels ont une longue liste de liens de menu dans l'en-tête principal de la page, cohérents d'une page à l'autre. Cette approche est idéale pour la navigation générale, mais elle peut empêcher les utilisateurs de claviers d'accéder facilement au contenu principal du site Web sans avoir à utiliser la touche de tabulation plusieurs fois.

Pour éviter les groupes de liens redondants ou inutiles, vous pouvez ajouter un lien à ignorer. Les liens d'ancrage sont des liens d'ancrage qui redirigent l'utilisateur vers une autre section de la même page, sous l'ID de cette section, au lieu de rediriger l'utilisateur vers une autre page du site Web ou une ressource externe. Les liens d'ancrage sont généralement ajoutés en tant que premier élément sélectionnable qu'un utilisateur rencontre lorsqu'il accède à un site Web. Ils peuvent être visibles ou masqués visuellement jusqu'à ce que l'utilisateur y accède via un onglet, en fonction de ce que la conception l'exige.

Lorsqu'un utilisateur appuie sur la touche de tabulation et qu'un lien "Ignorer" actif est en place, le curseur est placé sur le lien "Ignorer". L'utilisateur peut cliquer sur le lien d'ancrage et passer au-delà de la section d'en-tête et de la navigation principale. S'il choisit de ne pas cliquer sur le lien "Ignorer" et de continuer à appuyer sur la touche de tabulation dans le DOM, il est redirigé vers l'élément sélectionnable suivant.

Comme pour tous les liens, il est important que ce lien contienne des informations contextuelles sur l'objectif du lien. L'ajout de l'expression "Passer au contenu principal" permet à l'utilisateur de savoir où le lien le redirige. Vous pouvez choisir parmi de nombreuses options de code lorsque vous fournissez du contexte supplémentaire pour vos liens, comme aria-labelledby ou aria-label, ou lorsque vous les ajoutez au contenu textuel de l'élément <a>, comme illustré dans l'exemple.

Indicateur de mise au point

Comme vous venez de l'apprendre, l'ordre de sélection est un aspect important de l'accessibilité du clavier. Il est également important de décider du style de cet élément focal. Car même si l'ordre de sélection est excellent, comment un utilisateur peut-il savoir où il se trouve sur la page sans le style approprié ?

Un indicateur de focus visible est un outil essentiel pour informer un utilisateur de sa position à tout moment sur la page. Ce point est particulièrement important pour les personnes qui ne font appel qu'à un clavier voyant.

Style par défaut du navigateur

Aujourd'hui, chaque navigateur Web moderne a un style visuel par défaut différent qui s'applique aux éléments sélectionnables de votre site Web ou de votre application. Certains sont plus facilement visibles que d'autres. Ce style est appliqué lorsque l'utilisateur parcourt la page à l'aide du clavier.

Si vous autorisez le navigateur à gérer le style de sélection, il est important de vérifier votre code pour vérifier que votre thème ne remplace pas le style par défaut du navigateur. Un remplacement est souvent écrit sous la forme "outline: 0" ou "outline: none" dans votre feuille de style. Ce petit extrait de code peut supprimer le style de l'indicateur de sélection par défaut du navigateur, ce qui complique considérablement la navigation des utilisateurs sur votre site Web ou dans votre application.

a:focus {
  outline: none; /* don't do this! */
}

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

Styles personnalisés

Bien sûr, vous pouvez aller au-delà du style de navigateur par défaut et créer un indicateur de focus personnalisé qui complète votre thème. Lorsque vous créez un indicateur de focus personnalisé, vous êtes libre d'être créatif !

La forme de l'indicateur de mise au point peut prendre de nombreuses formes, qu'il s'agisse d'un contour, d'une bordure, d'un soulignement, d'une zone, d'un changement d'arrière-plan ou de tout autre changement stylistique évident qui ne repose pas uniquement sur la couleur pour indiquer que le clavier est actif sur cet élément.

Vous pouvez modifier le style d'un indicateur de mise au point pour vous assurer qu'il n'est pas perdu en arrière-plan. Par exemple, lorsqu'une page a un arrière-plan blanc, vous pouvez définir l'indicateur de mise au point du bouton sur un arrière-plan bleu. Lorsque la page a un arrière-plan bleu, vous pouvez définir ce même style de sélection du bouton sur un arrière-plan blanc.

Vous pouvez modifier le style de l'élément sélectionné en fonction de son type. Par exemple, vous pouvez souligner en pointillés pour les liens du corps de la page, mais choisir une bordure arrondie pour un élément de bouton.

Il n'existe aucune règle concernant le nombre de styles d'indicateur de mise au point sur une page. Toutefois, assurez-vous de le limiter à un nombre raisonnable pour éviter toute confusion inutile.

Conclusion

Pour qu'un site Web ou une application soit considéré comme accessible, tout élément accessible à l'aide d'une souris doit également être accessible avec un clavier. Ce module s'est concentré sur l'aspect visuel de l'accessibilité du clavier, en particulier l'ordre et les indicateurs de mise au point.

Testez vos connaissances

Tester vos connaissances sur ARIA et le langage HTML