Bordure qui se déplace et suit l’ordre logique des éléments de la page lorsque la touche de tabulation est enfoncée.
Usage
La cible de saisie est un repère visuel qui permet aux utilisateurs d'aisément naviguer sans souris.
Grâce à cette bordure les utilisateurs peuvent accéder par tabulation à tous les éléments de chaque page Web, y compris les liens, les champs de formulaire, les boutons et les commandes multimédias.
L'enchainement des éléments ciblés suit l’ordre logique de lecture c'est à dire généralement de gauche à droite et de haut en bas.
Dans une liste déroulante, les utilisateurs peuvent utiliser les touches fléchées pour naviguer sans déclencher une action.
Des liens d'accès rapides sont utilisés pour permettre à l'utilisateur d'accéder directement au contenu de la page lorsque les éléments (comme la navigation) se répétent.
Aperçu
Visuellement, la cible de saisie est présentée par un contour de 2 pixels. L'affichage de ce dernier dépends du composant.
Celui-ci peut posséder un décalage de 2 pixels par rapport au composant comme par exemple, sur un bouton. Mais, il peut aussi être précisément le contour du composant lorsque celui ci est dans un container comme pour un menu.
Couleur
Le token "background-focus ring" est employé en tant que couleur de mise au point. Cette teinte se distingue fortement de la couleur principale, de la couleur secondaire ainsi que des diverses teintes de fond.
Exemples
Icônes interactives
Onglets et navigations
Liens
Conseils
Lorsque vous allez créer des composants personnalisés pour votre projet (non pris en compte dans le système de design de la CNSA), plusieurs choses sont à se rappeler :
- Tout élément d'interface utilisateur avec lequel les utilisateurs peuvent interagir doit posséder une cible de saisie.
- Les styles du navigateur appliqués par défaut doivent être modifiés pour prendre en compte ceux du système de design. Ils risqueraient de ne pas représenter assez de contraster avec les composants de la CNSA.
- Assurez vous que la cible de saisie ne soit jamais masquée.