De nombreuses personnes utilisent un clavier (ou un logiciel ou matériel qui imite la fonctionnalité d'un clavier, comme un contacteur) comme principal moyen de navigation. Cela peut être dû à une préférence personnelle, à l'efficacité ou à un matériel défectueux.
Les personnes souffrant de limitations physiques temporaires, comme une entorse au poignet ou des troubles de la motricité fine comme le syndrome du canal carpien, peuvent choisir d'utiliser un clavier pour naviguer. Les utilisateurs ayant une déficience visuelle ou aveugles peuvent utiliser un clavier pour naviguer, en combinaison avec un logiciel de loupe ou de lecteur d'écran. Toutefois, ils peuvent utiliser des commandes de raccourci clavier différentes de celles d'un utilisateur voyant pour naviguer sur un écran.
Certaines personnes sans handicap peuvent également choisir de naviguer à l'aide d'un clavier.
La compatibilité avec le clavier pour tous ces handicaps et circonstances est essentielle. Une grande partie de l'accessibilité au clavier est axée sur le focus. Le focus fait référence à l'élément de l'écran qui reçoit activement les entrées du clavier.
Dans ce module, nous nous concentrons sur la structure HTML et le style CSS pour les éléments de clavier et les éléments pouvant recevoir le focus. Le module JavaScript contient plus d' informations sur la gestion du focus et les frappes pour les éléments interactifs.
Ordre du focus
Les éléments vers lesquels un utilisateur de clavier peut naviguer sont appelés éléments pouvant recevoir le focus. L'ordre du focus, également appelé ordre de tabulation ou de navigation, est l'ordre dans lequel les éléments reçoivent le focus. L'ordre du focus par défaut doit être logique, intuitif et correspondre à l'ordre visuel d'une page.
Pour la plupart des langues, l'ordre du focus commence en haut de la page et se termine en bas, en allant de gauche à droite. Toutefois, certaines langues se lisent de droite à gauche. La langue principale de la page peut donc justifier un ordre de focus différent.
Par défaut, l'ordre du focus inclut les éléments HTML pouvant recevoir le focus naturellement, tels que les liens, les cases à cocher et les entrées de texte. Les éléments HTML pouvant recevoir le focus naturellement incluent la prise en charge intégrée de l'ordre de tabulation et la gestion de base des événements de clavier.
Vous pouvez mettre à jour l'ordre du focus pour inclure tous les éléments qui ne reçoivent pas normalement le focus, tels que les éléments HTML non interactifs, les composants personnalisés ou les éléments avec ARIA, et remplacer la sémantique naturelle du focus.
Tabindex
L'ordre du focus 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 (par exemple, 1, 2, 3). Il passe ensuite par les éléments avec un tabindex de zéro en fonction de leur ordre dans le DOM. Tous les éléments avec un tabindex négatif sont supprimés de l'ordre naturel du focus.
Lorsqu'un tabindex
de zéro (tabindex="0") est appliqué à des éléments normalement non focusables, ils sont
ajoutés à l'ordre naturel du focus de la page en fonction de leur apparence
dans le DOM. Toutefois, contrairement aux éléments HTML pouvant recevoir le focus naturellement, vous devez
fournir une prise en charge supplémentaire du clavier
pour qu'ils soient entièrement accessibles.
De même, si vous avez un élément normalement focusable, mais
inactif (par exemple, un bouton qui ne fonctionne pas tant qu'un champ de saisie n'est pas rempli
), 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 naturel du focus. Mais ne vous inquiétez pas, vous pouvez utiliser JavaScript pour ajouter à nouveau le focus à l'élément si nécessaire.
Dans cet exemple, un attribut tabindex a été ajouté aux éléments qui ne reçoivent pas naturellement le focus. L'ordre des éléments a été manipulé à l'aide de tabindex pour illustrer la puissance qu'il peut avoir sur l'ordre du focus. Voici un exemple de ce qu'il ne faut pas faire.
Ignorer les liens
Aujourd'hui, la plupart des sites Web comportent une longue liste de liens de menu dans l'en-tête principal de la page, qui est cohérente d'une page à l'autre. C'est idéal pour la navigation générale, mais cela peut rendre difficile l'accès facile au contenu principal du site Web pour les utilisateurs qui n'utilisent que le clavier sans avoir à appuyer plusieurs fois sur la touche Tabulation.
Pour ignorer des groupes de liens redondants ou inutiles, vous pouvez ajouter un lien d'ancrage. Les liens d'ancrage sont des liens qui renvoient à 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 d'ancrage sont généralement ajoutés comme premier élément pouvant recevoir le focus qu'un utilisateur rencontre lorsqu'il arrive sur un site Web. Ils peuvent être visibles ou masqués visuellement jusqu'à ce qu'un utilisateur appuie sur la touche Tabulation, en fonction de la conception.
Lorsqu'un utilisateur appuie sur la touche Tabulation et qu'un lien d'ancrage actif est en place, le focus clavier est envoyé vers le lien d'ancrage. L'utilisateur peut cliquer sur le lien d'ancrage et passer la section d'en-tête et la navigation principale. S'il choisit de ne pas cliquer sur le lien d'ancrage et de continuer à appuyer sur la touche Tabulation dans le DOM, il sera envoyé vers l'élément suivant pouvant recevoir le focus.
Comme pour tous les liens, il est important que le lien d'ancrage inclue un contexte sur son objectif. L'ajout de l'expression "Passer au contenu principal" permet à l'utilisateur de savoir où le lien le mène. Vous pouvez choisir parmi de nombreuses options de code lorsque vous
fournissez un contexte supplémentaire à vos liens, tels que
aria-labelledby,
aria-label, ou en l'ajoutant
au contenu textuel de l'élément <a>, comme illustré dans l'exemple.
Indicateur de focus
Comme vous venez de l'apprendre, l'ordre du focus 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 du focus 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. Ceci est particulièrement important pour les utilisateurs voyants qui n'utilisent que le clavier. Focus non masqué (minimum) garantit que l'indicateur de focus n'est pas masqué sous 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 recevoir le focus sur votre site Web ou votre application. Certains sont plus visibles que d'autres. Lorsqu'un utilisateur appuie sur la touche Tabulation pour parcourir la page, ce style est appliqué lorsque l'élément reçoit le focus clavier.
Si vous autorisez le navigateur à gérer le style du focus, il est important de vérifier votre code pour vous assurer 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 morceau de code peut supprimer le style par défaut de l'indicateur de focus du navigateur, ce qui rend la navigation sur votre site Web ou votre application très difficile pour les utilisateurs.
Approche déconseillée : pas de contour
a:focus { outline: none; /* don't do this! */ }
Approche recommandée : 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 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 avez beaucoup de liberté pour être créatif.
La forme d'un indicateur de focus peut prendre de nombreuses formes : contour, bordure, soulignement, case, changement d'arrière-plan ou autre modification stylistique évidente qui ne repose pas uniquement sur la couleur pour indiquer que le focus du 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, lorsqu'une page a un arrière-plan blanc, vous pouvez définir l'indicateur de focus 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 de focus en fonction du type d'élément. Par exemple, vous pouvez utiliser un soulignement 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'indicateur de focus que vous pouvez avoir sur une page, mais veillez à ce qu'il reste raisonnable pour éviter toute confusion inutile.