De nombreuses personnes utilisent un clavier (ou un logiciel ou un matériel qui imite les fonctionnalités d'un clavier, comme un contacteur) comme principal moyen de navigation. Cela peut être dû à des préférences personnelles, à l'efficacité ou à un matériel défectueux.
Les personnes souffrant de limitations physiques temporaires, telles qu'une entorse du poignet ou une déficience motrice fine comme le canal carpien, peuvent choisir d'utiliser un clavier pour naviguer. Les utilisateurs malvoyants ou aveugles peuvent utiliser un clavier pour la navigation, en plus de leur logiciel de grossissement ou de lecteur d'écran. Toutefois, ils peuvent utiliser des commandes de raccourci clavier différentes de celles des utilisateurs voyants pour naviguer sur un écran.
Certaines personnes non handicapées peuvent également choisir de naviguer à l'aide d'un clavier.
La prise en charge du clavier pour toutes ces situations et ces handicaps est essentielle. Une grande partie de l'accessibilité au clavier est centrée sur la sélection. Le ciblage fait référence à l'élément à l'écran qui reçoit actuellement des entrées du clavier.
Dans ce module, nous nous concentrons sur la structure HTML et le style CSS pour le clavier et les éléments sélectionnables. Le module JavaScript fournit plus d'informations sur la gestion du focus et les frappes pour les éléments interactifs.
Ordre de mise au point
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é ordre de tabulation ou de navigation, est l'ordre dans lequel les éléments reçoivent la sélection. 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, en allant de gauche à droite. Toutefois, certaines langues se lisent de droite à gauche. Il se peut donc que l'ordre de mise au point soit différent pour la langue principale de la page.
Par défaut, l'ordre de sélection inclut les éléments HTML pouvant être sélectionnés naturellement, tels que les liens, les cases à cocher et les entrées de texte. Les éléments HTML pouvant être sélectionnés naturellement incluent la prise en charge intégrée de l'ordre des onglets et la gestion de base des événements de clavier.
Vous pouvez modifier l'ordre de sélection pour inclure tous les éléments qui ne reçoivent normalement pas la sélection, tels que les éléments HTML non interactifs, les composants personnalisés ou les éléments avec ARIA, et remplacer la sémantique de sélection naturelle.
tabindex
L'ordre de sélection commence par les éléments qui ont un attribut tabindex positif (le cas échéant) et passe du plus petit nombre positif au plus grand (comme 1, 2, 3). Il traite ensuite les éléments avec un index de tabulation de zéro en fonction de leur ordre dans le DOM. Tous les éléments dont la tabulation est négative 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 à l'ordre de focus naturel de la page en fonction de la façon dont ils apparaissent dans le DOM. Toutefois, contrairement aux éléments HTML sélectionnables naturellement, vous devez fournir une compatibilité supplémentaire avec le clavier pour qu'ils soient entièrement accessibles.
De même, si un élément peut normalement être sélectionné, mais qu'il est inactif (par exemple, un bouton qui ne fonctionne pas tant qu'un champ de saisie n'est pas renseigné), vous devez ajouter un tabindex négatif (tabindex="-1") à cet élément. L'ajout d'un tabindex négatif indique aux technologies d'assistance et aux claviers que ce bouton doit être supprimé de l'ordre de sélection naturel. Mais ne vous inquiétez pas : vous pouvez utiliser JavaScript pour rétablir la sélection sur l'élément si nécessaire.
Dans cet exemple, un attribut tabindex a été ajouté aux éléments qui ne sont pas naturellement sélectionnés. L'ordre des éléments a été manipulé à l'aide de tabindex pour illustrer l'impact qu'il peut avoir sur l'ordre de sélection. Voici un exemple de ce qu'il ne faut pas faire !
Ignorer les liens
La plupart des sites Web actuels comportent une longue liste de liens de menu dans l'en-tête principal de la page, qui est identique d'une page à l'autre. C'est idéal pour la navigation générale, mais cela peut empêcher les utilisateurs qui se servent uniquement d'un clavier d'accéder facilement au contenu principal du site Web sans avoir à utiliser la touche de tabulation plusieurs fois.
Pour ignorer des groupes de liens redondants ou inutiles, vous pouvez ajouter un lien de redirection. Les liens de redirection sont des liens d'ancrage qui redirigent vers une autre section de la même page à l'aide de l'ID de cette section, au lieu d'envoyer l'utilisateur vers une autre page du site Web ou une ressource externe. Les liens de redirection sont généralement ajoutés en tant que premier élément sélectionnable qu'un utilisateur rencontre lorsqu'il arrive sur un site Web. Ils peuvent être visibles ou masqués visuellement jusqu'à ce qu'un utilisateur y accède, en fonction de la conception.
Lorsqu'un utilisateur appuie sur la touche de tabulation et qu'un lien "Ignorer" actif est en place, il envoie le curseur du clavier au lien "Ignorer". L'utilisateur peut cliquer sur le lien de prévisualisation et ignorer la section d'en-tête et la navigation principale. S'il choisit de ne pas cliquer sur le lien de saut et de continuer à faire défiler le DOM à l'aide de la touche Tabulation, il sera redirigé vers l'élément suivant pouvant être sélectionné.
Comme tous les liens, il est important que le lien de désactivation inclue un contexte sur l'objectif du lien. L'ajout de l'expression "Passer au contenu principal" permet à l'utilisateur de savoir où il est redirigé via le lien. Vous avez le choix entre de nombreuses options de code lorsque vous fournissez un contexte supplémentaire à vos liens, comme aria-labelledby, aria-label ou en l'ajoutant au contenu textuel de l'élément <a>, comme illustré dans l'exemple.
Indicateur de mise au point
Comme vous venez de le découvrir, l'ordre de sélection est un aspect important de l'accessibilité au clavier. Il est également important de décider du style de ce focus. En effet, 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 essentiel pour informer les utilisateurs de leur position sur la page à tout moment. Cela est particulièrement important pour les utilisateurs voyants qui utilisent uniquement le clavier. Focus Not Obscured (Minimum) (Focus non masqué (minimum)) garantit que l'indicateur de focus n'est pas masqué par d'autres composants.
Style par défaut du navigateur
Aujourd'hui, chaque navigateur Web moderne possède un style visuel par défaut différent qui s'applique aux éléments pouvant être sélectionnés sur votre site Web ou dans votre application, certains étant plus visibles que d'autres. Lorsque l'utilisateur parcourt la page à l'aide des onglets, ce style est appliqué lorsque l'élément reçoit la sélection au clavier.
Si vous autorisez le navigateur à gérer le style de focus, il est important d'examiner votre code pour vérifier que votre thème ne remplace pas le style par défaut du navigateur. Un forçage est souvent écrit sous la forme "outline: 0" ou "outline: none" dans votre feuille de style. Ce tout petit extrait de code peut supprimer le style d'indicateur de focus par défaut du navigateur, ce qui rend très difficile la navigation des utilisateurs sur votre site Web ou dans votre application.
Non recommandé : pas de structure
a:focus { outline: none; /* don't do this! */ }
Recommandé : contour stylisé
a:focus { outline: auto 5px Highlight; /* for non-webkit browsers */ outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */ }
Styles personnalisés
Bien entendu, 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 avez une grande liberté de création.
La forme d'un indicateur de sélection peut prendre de nombreuses formes, qu'il s'agisse d'un contour, d'une bordure, d'une soulignement, d'une zone, d'un changement d'arrière-plan ou d'un 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 focus pour vous assurer qu'il est visible. Par exemple, lorsque la page a un arrière-plan blanc, vous pouvez définir l'indicateur de sélection du bouton sur un arrière-plan bleu. Lorsque la page a un arrière-plan bleu, vous pouvez définir le même style de focus de bouton sur un arrière-plan blanc.
Vous pouvez modifier le style de l'élément en fonction de son type. Par exemple, vous pouvez utiliser une ligne en pointillés pour les liens du corps, mais choisir une bordure arrondie pour un élément de bouton.
Il n'existe aucune règle concernant le nombre de styles d'indicateurs de focus sur une page. Toutefois, veillez à en utiliser un nombre raisonnable pour éviter toute confusion inutile.
Vérifier vos connaissances
Testez vos connaissances sur ARIA et HTML.
Quel exemple de style CSS :focus est le plus accessible sur un arrière-plan blanc ?
outline: 0.5rem solid yellow;background-color:black;text-decoration: dotted underline 2px blue;outline: none; text-decoration:none; background:none;À quoi sert un lien de prévisualisation ?