Sélection du clavier

De nombreuses personnes utilisent un clavier ou un autre logiciel ou matériel qui imite le la fonctionnalité d'un clavier, comme un contacteur, comme moyen principal la navigation. Personnes souffrant d'une limitation physique temporaire, comme une entorse au poignet ou de handicaps moteurs fins tels que le canal carpien, ainsi que certaines personnes n'ayant pas handicapées, peuvent choisir d'utiliser un clavier pour naviguer sur une page pour des raisons personnelles la préférence, l'efficacité ou le matériel en panne.

Les utilisateurs malvoyants ou aveugles peuvent utiliser un clavier pour naviguer avec leur logiciel d'agrandissement ou leur lecteur d'écran. Toutefois, elles peuvent utiliser différentes des commandes de raccourci clavier pour naviguer sur un écran qu'un utilisateur voyant.

La prise en charge du clavier pour toutes ces situations et ces handicaps est essentielle. A une grande partie de l'accessibilité du clavier est centrée sur la mise au point. La sélection fait référence à l'élément à l'écran reçoit actuellement des entrées du clavier.

Dans ce module, nous nous concentrerons sur la structure HTML et le style CSS clavier et éléments sélectionnables. La Le module JavaScript comprend d'autres des informations sur la gestion du focus et les combinaisons de touches pour les éléments interactifs.

Ordre de mise au point

Les éléments auxquels un utilisateur du clavier peut accéder sont appelés sélectionnables éléments. Ordre de ciblage, également appelé tabulation ou ordre de navigation, est l’ordre dans lequel les éléments reçoivent le focus. L'ordre de focus par défaut doit être logique, intuitif et correspondre à l'image l'ordre 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 partant de gauche à droite. Cependant, certaines langues se lisent de droite à gauche. Par conséquent, la langue principale de la page peut nécessiter un ordre de focus différent.

Par défaut, l'ordre de sélection inclut des éléments HTML naturellement sélectionnables, tels que des liens, des cases à cocher et des entrées de texte. Les éléments HTML sélectionnables 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 de sélection afin d'inclure tous les éléments qui ne être sélectionnés, comme des éléments HTML non interactifs, des composants personnalisés ou avec ARIA qui remplace les la sémantique de focalisation naturelle.

Index de tabulation

L'ordre de focus commence par les éléments qui ont une valeur positive index tabulaire (le cas échéant) et se déplace du plus petit nombre positif vers le le plus grand (1, 2, 3, etc.). Il passe ensuite à travers les éléments avec un index de tabulation de à zéro selon leur ordre dans le DOM. Tous les éléments dont l'index de tabulation est négatif sont supprimées de l'ordre de mise au point naturelle.

Lorsqu'un index de tabulation de zéro (tabindex="0") est appliqué aux éléments normalement non sélectionnables, ils sont ajoutés à l'ordre de focus naturel de la page selon la façon dont ils apparaissent dans le DOM. Cependant, contrairement aux éléments HTML sélectionnables naturellement, Fournir une prise en charge supplémentaire du clavier pour qu'ils soient entièrement accessibles.

De même, si l'un de vos éléments est normalement sélectionnable, mais qu'il inactif (par exemple, un bouton qui reste inopérant jusqu'à ce qu'un champ de saisie soit rempli) vous devez ajouter une tabulation négative (tabindex="-1") à cet élément. Ajout... une tabulation négative signale aux technologies d'assistance et aux claviers que cela le bouton doit être retiré de l'ordre de mise au point naturel. Mais ne vous inquiétez pas, vous pouvez utilisez JavaScript pour replacer le focus sur l'élément si nécessaire.

Dans cet exemple, un attribut tabindex a été ajouté aux éléments qui n'ont pas reçoivent naturellement l'attention. L'ordre des éléments a été manipulé en utilisant tabindex pour illustrer son impact sur l'ordre de mise au point. Il s'agit d'un exemple de ce qu'il ne faut pas faire !

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Ignorer les liens

Aujourd'hui, la plupart des sites Web ont une longue liste de liens de menu dans l'en-tête principal de la page cohérentes d'une page à l'autre. C'est idéal pour la navigation générale, mais peut rendre il est difficile pour les personnes qui se servent uniquement d'un clavier d'accéder facilement à la principale sans avoir à utiliser la touche de tabulation plusieurs fois.

Pour éviter les groupes de liens redondants ou inutiles, vous pouvez ajouter ignorer le lien. Les liens d'ancrage sont des éléments ancrés qui renvoient vers une autre section de la même page, à l'aide de l'icône au lieu de rediriger l'utilisateur vers une autre page du site Web ressource. Les liens d'ancrage sont généralement ajoutés en tant que premier élément sélectionnable qu'un utilisateur rencontrera en arrivant sur un site Web et peut être visible ou visuellement masquée jusqu'à ce qu'un utilisateur y accède, en fonction de ce que la conception requiert.

Lorsqu'un utilisateur appuie sur la touche de tabulation et qu'un lien "Ignorer" actif est en place, il envoie le curseur du clavier sur le lien "Ignorer". L'utilisateur peut cliquer sur le lien "Ignorer" au-delà de la section d’en-tête et de la navigation principale. S'ils choisissent de ne pas cliquer d'ignorer le lien et de continuer à utiliser la touche de tabulation dans le DOM, ils sont envoyés sélectionnable.

Comme pour tous les liens, le lien "Ignorer" doit inclure des informations sur le l'objectif du lien. Si vous ajoutez l'expression "Passer au contenu principal", permet à l'utilisateur de savoir où le lien les mène. Vous avez le choix entre de nombreuses options de code fournir du contexte supplémentaire à vos liens, aria-labelledby, aria-label, ou en l'ajoutant au contenu textuel de l'élément <a>, comme illustré dans l'exemple.

<ph type="x-smartling-placeholder">

</ph>

Indicateur de mise au point

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

Un indicateur de mise au point visible est un outil essentiel pour informer les utilisateurs de leur position à tout moment sur . C'est particulièrement important pour les personnes voyantes qui ne disposent que d'un clavier.

Style par défaut du navigateur

Aujourd'hui, tous les navigateurs Web modernes ont un style visuel par défaut différent qui s'applique aux éléments sélectionnables de votre site Web ou application, d'autres plus facilement visibles. que d'autres. Lorsque l'utilisateur accède à la page, ce style est appliqué comme reçoit l'élément d'interface actif au clavier.

Si vous autorisez le navigateur à gérer le style de focus, il est important de vérifier votre code pour vérifier que votre thème ne remplace pas les paramètres par défaut du navigateur stylisation. 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 focus par défaut du navigateur à l'aide d'un style d'indicateur, qui rend très difficile la navigation des utilisateurs de votre site Web ou 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 entendu, vous pouvez aller au-delà du style de navigateur par défaut et créer un indicateur de mise au point qui complète votre thème. Lors de la création d'un ciblage personnalisé vous disposez d'une grande liberté de création !

Une forme d'indicateur de focus peut prendre plusieurs formes, qu'il s'agisse d'un contour, d'une bordure, souligné, une zone, un changement d'arrière-plan ou tout autre changement stylistique évident qui ne se base pas uniquement sur la couleur pour indiquer que le curseur 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, si l'arrière-plan d'une page est blanc, vous pouvez définir le sur fond bleu. Si un bouton bleu vous pouvez appliquer le même style de focus à un arrière-plan blanc.

Vous pouvez modifier le style de l'élément sélectionné en fonction du type d'élément. Par exemple : vous pouvez utiliser un soulignement en pointillés pour les liens dans le corps du texte, mais choisir une bordure arrondie pour un élément de bouton.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Il n'existe aucune règle concernant le nombre de styles d'indicateur de focus que vous avez définis page, mais assurez-vous de le limiter à un nombre raisonnable pour éviter la confusion.

Conclusion

Pour qu'un site Web ou une application soit considéré comme accessible, tout ce qui peut être accessibles avec une souris l'est également avec un clavier. Ce module axé sur l'aspect visuel de l'accessibilité au clavier, en particulier l’ordre et les indicateurs de mise au point.

Testez vos connaissances

Tester vos connaissances sur ARIA et HTML