Les ajouts de la version 2.2 : apparence du focus et taille des cibles
Appliquez les critères apparus dans la dernière version.
Les ajouts de la version 2.2 : apparence du focus et taille des cibles est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Ce que la version 2.2 a apporté
WCAG 2.2 a ajouté neuf nouveaux critères de succès en 2023. Deux des plus utiles au quotidien pour les interfaces sont l’apparence du focus et la taille des cibles.
Focus non masqué
La nouvelle règle 2.4.11 (focus non masqué), de niveau AA, indique que l’élément ayant le focus ne doit pas être entièrement caché derrière un en-tête fixe ou une barre de cookies.
Pourquoi un focus masqué pose problème
Si une bannière fixe recouvre la commande ayant le focus, les utilisateurs au clavier ne savent plus où ils se trouvent. Ils doivent voir l’élément sur lequel ils viennent d’appuyer avec Tabulation.
Apparence du focus au niveau AAA
Le critère 2.4.13 (apparence du focus) est de niveau AAA. Il définit une surface minimale pour l’indicateur et un contraste de 3:1 afin que l’anneau de focus soit impossible à manquer.
Taille minimale des cibles
La règle AA 2.5.8 (taille minimale des cibles) exige que les cibles tactiles mesurent au moins 24 pixels CSS sur 24, ou qu’un espacement suffisant les entoure.
Pourquoi 24 pixels ?
Les petites cibles sont difficiles à toucher pour les personnes qui tremblent ou qui ont de grands doigts. Un minimum de 24px réduit les erreurs de toucher sans imposer partout un design encombrant.
L’exception liée à l’espacement
Une cible de moins de 24 px peut tout de même être conforme si un cercle de 24 px autour de son centre ne chevauche aucun élément voisin. L’espacement compense alors la petite taille.
Dimensionner une cible en CSS
Donnez aux petits boutons une taille minimale réelle afin qu’ils dépassent confortablement le seuil de 24 px.
button {
min-width: 24px;
min-height: 24px;
}Les liens intégrés sont exemptés
Les liens placés dans une phrase sont exemptés de la règle 2.5.8, car réduire le texte uniquement pour agrandir les cibles nuirait au confort de lecture.
Aide cohérente : 3.2.6
Un autre ajout de la version 2.2, le critère 3.2.6 (aide cohérente), de niveau A, maintient les liens d’aide et les coordonnées au même emplacement relatif sur toutes les pages.
Saisie redondante : 3.3.7
Le critère 3.3.7 (saisie redondante), de niveau A, indique de ne pas demander aux utilisateurs de saisir à nouveau des informations déjà fournies, sauf si cela est essentiel, comme pour un mot de passe.
Vérification rapide
Rappelez la taille minimale d’une cible tactile selon WCAG 2.2.
Récapitulatif : les ajouts de la version 2.2
La version 2.2 a ajouté des règles sur le focus et les cibles : gardez le focus visible, donnez aux cibles une taille de 24 px ou espacez-les suffisamment, et évitez les saisies redondantes. Ensuite : le glisser-déposer et l’authentification. 🎯
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Les ajouts de la version 2.2 : apparence du focus et taille des cibles » est-elle gratuite ?
Oui — le texte complet de « Les ajouts de la version 2.2 : apparence du focus et taille des cibles » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Les ajouts de la version 2.2 : apparence du focus et taille des cibles » ?
Appliquez les critères apparus dans la dernière version. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Les ajouts de la version 2.2 : apparence du focus et taille des cibles » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- A, AA, AAA : choisir le bon objectif
- Les ajouts de la version 2.2 : apparence du focus et taille des cibles
- Mouvements de glissement et authentification accessible
- Rédiger une déclaration de conformité défendable