Guide pratique · IA & interfaces
7 min de lecture
Mis à jour le
Vérifie une interface lisible et utilisable au clavier
Mène une vérification bornée de la sémantique, du clavier, du focus, du contraste et du reflow avec des preuves reproductibles.
Réponse directe
Teste une tâche entière au clavier, inspecte les noms et états, mesure le contraste et vérifie l’agrandissement du texte et le reflow. Combine interactions réelles et résultats automatisés, puis note les échecs et les combinaisons non testées. Cette procédure bornée fournit des preuves pour cette tâche, pas une certification de conformité WCAG.
01
1. Choisis une tâche complète
Teste si une personne peut terminer une tâche concrète en voyant et comprenant chaque contrôle et état. Combine interactions manuelles, mesures et contrôles automatisés ; réussir cette procédure ne constitue pas une certification de conformité WCAG.
Prérequis : une version identifiée, un navigateur, un clavier, un outil de mesure du contraste et des données de test. Choisis un parcours : ouvrir les réglages, modifier une valeur, corriger une erreur, enregistrer et revenir à la page. Note URL, version, dimensions, zoom, système et technologie d’assistance utilisée. Inclus les états vide, chargement et erreur.
02
2. Vérifie ce que les contrôles communiquent
Inspecte d’abord la sémantique native : les boutons déclenchent des actions, les liens naviguent, les labels nomment les champs et les titres structurent le contenu. Vérifie les noms accessibles dans l’arbre d’accessibilité du navigateur, y compris les boutons à icône seule. Un rôle ARIA n’implémente pas le clavier.
Compare le nom lu ou exposé au texte visible. Contrôle les états obligatoire, invalide, sélectionné, développé et désactivé lorsqu’ils s’appliquent. Une erreur nécessite du texte et un lien avec son champ ; la couleur seule ne suffit pas. Pour un contrôle personnalisé, suis le pattern documenté et teste le rendu réel.
03
3. Termine la tâche sans pointeur
Pars de l’entrée de page et parcours la tâche avec Tab puis Maj+Tab. L’ordre doit suivre la lecture et les actions, avec un indicateur de focus visible que le contenu fixe ne masque pas. Active les liens avec Entrée et les boutons avec Entrée ou Espace. Utilise les flèches seulement quand le pattern du contrôle le prévoit.
Ouvre et ferme chaque surface temporaire. Dans une boîte de dialogue modale, vérifie l’entrée du focus, son maintien à l’intérieur puis son retour à un contrôle logique après fermeture ; teste Échap si la fermeture est prévue. Les autres surfaces ont leur propre contrat. Si le focus disparaît ou reste piégé, note la dernière touche et le contrôle, corrige la cause puis rejoue le parcours complet.
04
4. Mesure contraste et reflow
Mesure les paires réelles texte/fond, y compris erreurs, placeholders, survol et focus dans chaque thème pris en charge. Le contraste du texte au niveau AA demande généralement 4,5:1, ou 3:1 pour du grand texte, au moins 18 pt normal ou 14 pt gras. Vérifie les exceptions du critère ; n’arrondis pas un échec vers le haut. Les limites visuelles et indicateurs d’état nécessaires demandent généralement 3:1 avec les couleurs adjacentes selon le critère de contraste non textuel.
Teste l’agrandissement du texte à 200 % et le reflow à 320 pixels CSS de large, par exemple à 400 % de zoom depuis une fenêtre de 1280 pixels CSS. Vérifie que contenu et actions restent accessibles sans défilement dans deux directions, sauf contenu qui l’exige, comme un tableau de données. Inspecte libellés longs, erreurs et barres fixes ; corrige les coupures puis rejoue la tâche.
05
5. Garde des échecs reproductibles et des limites explicites
Lance une analyse automatisée d’accessibilité sur les mêmes états pour détecter les problèmes qu’elle sait repérer. Elle ne décide pas si l’ordre du focus est logique, si un label est utile ou si tout le parcours fonctionne avec une technologie d’assistance. Ajoute un passage manuel avec lecteur d’écran pour les combinaisons choisies, y compris les annonces après enregistrement et erreur.
Pour chaque défaut, note étapes, résultat attendu, résultat observé, contrôle concerné et capture ou mesure utile. Après correction, rejoue l’étape en échec et les transitions voisines. Sépare contrôles réussis, échoués et non testés. Cette revue bornée ne couvre pas chaque critère WCAG, appareil, handicap ou tâche ; une évaluation plus large reste distincte.
- Une analyse signale un nom manquant : inspecte le contrôle et vérifie le nom accessible corrigé.
- Un passage clavier révèle un piège : relève les touches et rejoue la séquence après correction.
- Une combinaison n’a pas été exécutée : note-la comme non testée et identifie le prochain contrôle manuel.
À conserver
Preuves à conserver
- 01La tâche entière aboutit au clavier avec un focus visible.
- 02Les mesures de contraste et observations de zoom/reflow identifient leurs états.
- 03Résultats automatisés, observations manuelles et périmètre non testé restent distincts.
- 04Les contrôles exposent des noms et états cohérents avec leur fonction visible.
- 05Fermer une surface temporaire restaure le focus selon son contrat comportemental.
- 06Chaque défaut corrigé est retesté avec les transitions voisines sur la version identifiée.
Sources primaires
Les affirmations techniques de ce guide sont reliées aux spécifications et documentations first-party.
- Easy Checks: a first review (nouvel onglet)W3C WAI · Référence primaire de la procédure ; les exemples et le parcours sont une rédaction originale.
- How to Meet WCAG 2.2 (nouvel onglet)W3C WAI · Référence primaire de la procédure ; les exemples et le parcours sont une rédaction originale.
- Contrast minimum (nouvel onglet)W3C WAI · Référence primaire de la procédure ; les exemples et le parcours sont une rédaction originale.
- Reflow (nouvel onglet)W3C WAI · Référence primaire de la procédure ; les exemples et le parcours sont une rédaction originale.
Continuer
Guides et outils associés
Comprendre → Reconnaître → Choisir → Comparer
Pack pour ton agent
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
Implémenter correctement
Applique « Vérifie une interface lisible et utilisable au clavier » pas à pas
# Applique le guide « Vérifie une interface lisible et utilisable au clavier » dans ton agent ## Objectif Teste une tâche entière au clavier, inspecte les noms et états, mesure le contraste et vérifie l’agrandissement du texte et le reflow. Combine interactions réelles et résultats automatisés, puis note les échecs et les combinaisons non testées. Cette procédure bornée fournit des preuves pour cette tâche, pas une certification de conformité WCAG. ## Prérequis - Inspecte le dépôt, la documentation et les conventions existantes. - Confirme que le besoin correspond au périmètre du guide : Mène une vérification bornée de la sémantique, du clavier, du focus, du contraste et du reflow avec des preuves reproductibles. - Préserve les décisions correctes déjà en place. ## Étapes du guide - 1. 1. Choisis une tâche complète — Teste si une personne peut terminer une tâche concrète en voyant et comprenant chaque contrôle et état. Combine interactions manuelles, mesures et contrôles automatisés ; réussir cette procédure ne constitue pas une certification de conformité WCAG. - 2. 2. Vérifie ce que les contrôles communiquent — Inspecte d’abord la sémantique native : les boutons déclenchent des actions, les liens naviguent, les labels nomment les champs et les titres structurent le contenu. Vérifie les noms accessibles dans l’arbre d’accessibilité du navigateur, y compris les boutons à icône seule. Un rôle ARIA n’implémente pas le clavier. - 3. 3. Termine la tâche sans pointeur — Pars de l’entrée de page et parcours la tâche avec Tab puis Maj+Tab. L’ordre doit suivre la lecture et les actions, avec un indicateur de focus visible que le contenu fixe ne masque pas. Active les liens avec Entrée et les boutons avec Entrée ou Espace. Utilise les flèches seulement quand le pattern du contrôle le prévoit. - 4. 4. Mesure contraste et reflow — Mesure les paires réelles texte/fond, y compris erreurs, placeholders, survol et focus dans chaque thème pris en charge. Le contraste du texte au niveau AA demande généralement 4,5:1, ou 3:1 pour du grand texte, au moins 18 pt normal ou 14 pt gras. Vérifie les exceptions du critère ; n’arrondis pas un échec vers le haut. Les limites visuelles et indicateurs d’état nécessaires demandent généralement 3:1 avec les couleurs adjacentes selon le critère de contraste non textuel. - 5. 5. Garde des échecs reproductibles et des limites explicites — Lance une analyse automatisée d’accessibilité sur les mêmes états pour détecter les problèmes qu’elle sait repérer. Elle ne décide pas si l’ordre du focus est logique, si un label est utile ou si tout le parcours fonctionne avec une technologie d’assistance. Ajoute un passage manuel avec lecteur d’écran pour les combinaisons choisies, y compris les annonces après enregistrement et erreur. ## Critères d’acceptation — Preuves à conserver - La tâche entière aboutit au clavier avec un focus visible. - Les mesures de contraste et observations de zoom/reflow identifient leurs états. - Résultats automatisés, observations manuelles et périmètre non testé restent distincts. - Les contrôles exposent des noms et états cohérents avec leur fonction visible. - Fermer une surface temporaire restaure le focus selon son contrat comportemental. - Chaque défaut corrigé est retesté avec les transitions voisines sur la version identifiée. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Les étapes viennent d’un guide publié et sourcé, pas d’une improvisation.
- La checklist transforme le conseil en critères vérifiables.
- Le périmètre déclaré évite d’étendre le guide au-delà de ses preuves.
À essayer ensuite
Ancre le guide dans le projet
# Ancre le guide dans le projet ## Objectif Transforme les étapes appliquées en conventions durables du dépôt. ## Contrôles - Relie chaque décision prise à l’étape du guide qui la justifie. - Ajoute la checklist aux revues concernées. - Note les cas hors périmètre pour les guides voisins. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:fd67b9b9a10e8097f45338069dc6ed3a8bb3ce2cd8fca2a69bfc197ba289e899
Diagnostiquer un problème
Diagnostique un écart au guide « Vérifie une interface lisible et utilisable au clavier »
# Diagnostique une application ratée du guide « Vérifie une interface lisible et utilisable au clavier » ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Rejoue les étapes dans l’ordre et note la première qui diverge : - 1. 1. Choisis une tâche complète — Teste si une personne peut terminer une tâche concrète en voyant et comprenant chaque contrôle et état. Combine interactions manuelles, mesures et contrôles automatisés ; réussir cette procédure ne constitue pas une certification de conformité WCAG. - 2. 2. Vérifie ce que les contrôles communiquent — Inspecte d’abord la sémantique native : les boutons déclenchent des actions, les liens naviguent, les labels nomment les champs et les titres structurent le contenu. Vérifie les noms accessibles dans l’arbre d’accessibilité du navigateur, y compris les boutons à icône seule. Un rôle ARIA n’implémente pas le clavier. - 3. 3. Termine la tâche sans pointeur — Pars de l’entrée de page et parcours la tâche avec Tab puis Maj+Tab. L’ordre doit suivre la lecture et les actions, avec un indicateur de focus visible que le contenu fixe ne masque pas. Active les liens avec Entrée et les boutons avec Entrée ou Espace. Utilise les flèches seulement quand le pattern du contrôle le prévoit. - 4. 4. Mesure contraste et reflow — Mesure les paires réelles texte/fond, y compris erreurs, placeholders, survol et focus dans chaque thème pris en charge. Le contraste du texte au niveau AA demande généralement 4,5:1, ou 3:1 pour du grand texte, au moins 18 pt normal ou 14 pt gras. Vérifie les exceptions du critère ; n’arrondis pas un échec vers le haut. Les limites visuelles et indicateurs d’état nécessaires demandent généralement 3:1 avec les couleurs adjacentes selon le critère de contraste non textuel. - 5. 5. Garde des échecs reproductibles et des limites explicites — Lance une analyse automatisée d’accessibilité sur les mêmes états pour détecter les problèmes qu’elle sait repérer. Elle ne décide pas si l’ordre du focus est logique, si un label est utile ou si tout le parcours fonctionne avec une technologie d’assistance. Ajoute un passage manuel avec lecteur d’écran pour les combinaisons choisies, y compris les annonces après enregistrement et erreur. ## Causes possibles - Une étape a été sautée ou exécutée hors ordre. - Le besoin réel sort du périmètre du guide. - Un critère de la checklist n’a jamais été vérifié. ## Corrections bornées - Reprends uniquement l’étape divergente et ce qui en dépend. - Documente l’écart si le périmètre du guide ne couvre pas le besoin. ## Vérification finale — Preuves à conserver - La tâche entière aboutit au clavier avec un focus visible. - Les mesures de contraste et observations de zoom/reflow identifient leurs états. - Résultats automatisés, observations manuelles et périmètre non testé restent distincts. - Les contrôles exposent des noms et états cohérents avec leur fonction visible. - Fermer une surface temporaire restaure le focus selon son contrat comportemental. - Chaque défaut corrigé est retesté avec les transitions voisines sur la version identifiée. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
- Prérequis · Le contexte réel du projet : dépôt, documentation et contraintes existantes
Pourquoi ça marche
- Le diagnostic rejoue des étapes ordonnées au lieu de chercher au hasard.
- Les corrections restent bornées à la première divergence réelle.
- La checklist sert de vérification finale reproductible.
À essayer ensuite
Préviens la prochaine dérive
# Préviens la prochaine dérive ## Objectif Fais de la première étape divergente un contrôle explicite du projet. ## Contrôles - Ajoute un contrôle ciblé sur l’étape qui a divergé. - Vérifie la checklist sur un second cas réel. - Documente la limite de périmètre rencontrée. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:593823ab183b713071489537a241faa613d52438dcb9a0296f7eade168c04760
Digest du Pack: sha256:f2008e4bb0540ea932473c6a0ce7bbd65006cf0e0b238ee4be5b22f2c4dee458