Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung
Accessibilité
À quoi ressemble un cadre de mise au point qui se distingue vraiment?
Le cadre de mise au point montre les utilisateurs de clavier où ils sont. Le niveau AA (2.4.7) exige seulement qu'il soit visible; Un cadre mince et pâle le remplit. Le critère 2.4.13 du niveau AAA précise les mesures suivantes: Le cadre focal contient l'élément avec une ligne d'au moins 2 pixels CSS, et la zone qui change à la mise au point a un contraste d'au moins 3:1 entre les états focalisés et non focalisés.
Ce que le critère exige
Deux mesures, toutes deux mesurables. Premièrement, la zone: le cadre focal est au moins aussi grand qu'un contour de 2 pixels d'épaisseur autour de l'élément; Un pointage seul ou un cadre de 1 pixel ne suffit pas. Deuxièmement, le contraste: les pixels qui changent au focus diffèrent de l'état sans focus d'au moins 3:1. Un cadre bleu foncé sur un bouton bleu foncé tombe à travers, un cadre blanc avec l'ourlet foncé sur chaque fond existe.
Un cadre qui fonctionne sur n'importe quel contexte
Parce que les boutons peuvent être légers et sombres, un focus bicolore est réussi: un contour de 2 pixels dans une couleur audacieuse avec une distance de 2 pixels par rapport à l'élément (offset en ligne) et une ombre supplémentaire dans la contre-couleur. Ainsi, le contraste est maintenu sur des surfaces claires et sombres. Le focus par défaut du navigateur est souvent trop mince ou est retiré de la feuille de style avec le contour: aucun; Cette interdiction est la raison la plus courante de la concentration invisible.
C'est comme ça qu'on s'y prend
La mesure concentre chaque élément de contrôle, compare les pixels avant et après le focus, et mesure l'épaisseur et le contraste du changement. Cela rend le critère entièrement testable automatiquement; le test de niveau AA (focus visible) fournit les mêmes données. Le critère appartient à la catégorie AAA des connaissances; dans le rapport, l'épaisseur et le contraste par référence.
Exemples
Cadre focal mince et pâle
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Au moins 2 pixels de contour, et les pixels modifiés diffèrent de l'état non focalisé par 3:1. L'ombre blanche garde le contraste sur les surfaces sombres.
- Supprimer chaque contour: aucun de la feuille de style, qui ne définit pas immédiatement son propre focus.
- Définir un focus global avec:focus-visible: contour de 3 pixels, contour-offset de 2 pixels, dans une couleur 3:1 à l'arrière-plan.
- Ajoutez une ombre dans la contre-couleur afin que le cadre reste visible sur les surfaces claires et sombres.
- Passez par la page avec la touche onglet et vérifiez chaque état: menu, boutons, champs, liens dans le texte.
