Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung
Accessibilité
Pourquoi un élément concentré ne devrait-il jamais être caché?
Quiconque passe par une page avec le clavier doit voir où se trouve le focus. Barres d'en-tête adhésives, bannières de cookies et fenêtres de chat sur le contenu; Le focus atterrit en dessous et est invisible. Le niveau AA (2.4.11, nouveau dans WCAG 2.2) exige que l'élément ciblé demeure au moins partiellement visible. Le critère de niveau AAA 2.4.12 exige: entièrement visible, aucun pixel obscurci.
Ce que le critère exige
Lorsqu'un élément reçoit une mise au point du clavier, aucune partie de celui-ci n'est derrière aucun autre contenu généré par l'auteur: pas d'en-tête ou de pied de page collants, pas de bannière de cookies, pas de bouton de chat, pas de fenêtre de référence. En changeant de focus, le navigateur défile seulement jusqu'à ce que l'élément entre dans la zone visible; Il ne sait rien de ceux qui sont au-dessus. Le côté doit donc s'assurer lui-même que la surface sous une bande adhésive reste dégagée pendant le défilement.
Mise en œuvre
La propriété CSS scroll-pading sur le conteneur scroll réserve autant d'espace que les bandes adhésives sont élevées; le navigateur fait ensuite défiler les éléments focalisés sous la barre. Les fenêtres situées au-dessus du côté capturent le focus (focus reste dans la fenêtre) ou se ferment lorsque le focus entre dans le côté. Un bouton de chat dans le coin reste petit ou se déplace en se concentrant sur un élément ci-dessous.
C'est comme ça qu'on s'y prend
La mesure passe par la page avec la touche de l'onglet, mesure la partie visible de chaque élément focalisé et se compare aux éléments adhésifs; Partiellement visible pour le niveau AA, entièrement visible pour AAA. La même mesure fournit les deux valeurs. Le critère appartient à la catégorie AAA dans la connaissance; le rapport contient la part cachée par point de référence.
Exemples
Champ focalisé moitié sous le bouton chat
.chat { position: fixed; right: 0; bottom: 0; width: 320px; height: 120px; }
/* das letzte Formularfeld liegt zur Hälfte darunter */.chat { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; }
html { scroll-padding-bottom: 88px; }Au niveau AA, une partie de l'élément ciblé doit être obscurcie, et aucun pixel sur AAA.
- Réglez le haut et le bas du rouleau à la hauteur de votre aine adhésive.
- Permettre aux bannières de cookies et aux fenêtres de référence de capturer le focus jusqu'à ce qu'ils soient fermés.
- Passez par chaque modèle avec la touche onglet et observez le cadre de mise au point; Elle ne doit disparaître nulle part.
- Gardez les boutons flottants (chat, haut) petits et à une distance du bord.
