Fixer le comportement que la retouche doit préserver
Une suggestion générée arrondit les coins du bouton « Afficher l’aide » dans un article WordPress. La forme vous convient. Le bouton répond toujours à un clic et le panneau apparaît. En parcourant la page avec Tab, vous passez pourtant de « Préparer le matériel » à « Lire les étapes » sans atteindre le bouton. Dans l’exemple, la suggestion a ajouté tabindex="-1" au même endroit que le style. Le navigateur de la recette continue d’accepter le clic, tandis que la tabulation saute la commande.
Le besoin était de modifier l’apparence. Le bouton devait rester atteignable et activable sans souris. Écrivez ce résultat avant d’évaluer la proposition. Le contrôle porte sur trois moments distincts. Le focus arrive sur le bouton. Entrée ou Espace permet d’ouvrir l’aide. Après fermeture, la lecture reprend au bon endroit. Si le focus n’arrive pas sur la commande, un essai d’activation qui commence avec un clic ne couvre pas le même parcours. Le clic peut placer le focus sur un élément que la touche Tab ne rencontre plus.
L’aide de la recette est un petit panneau HTML affiché au-dessus de la page, avec une seule phrase fictive sur le matériel fourni. Le composant utilise les attributs natifs du navigateur. Il ne constitue ni un menu de navigation ni une fenêtre modale qui impose de terminer une action avant de revenir à la page. L’intérêt du panneau est de donner un résultat visible à l’activation du bouton. Le défaut étudié se produit dès l’accès au bouton, avant l’ouverture de l’aide.
Une proposition de style peut mêler plusieurs sortes de modifications. Regardez les déclarations CSS et les attributs HTML séparément. Une bordure, un rayon ou un espacement appartiennent à l’apparence. Une propriété comme tabindex intervient dans la navigation au clavier. Gardez ce partage dans le relevé de relecture. Vous pourrez valider l’apparence tout en refusant l’écart de fonctionnement, même si les deux changements se trouvent sur une seule ligne.
Préparer un bouton et deux repères dans une copie
Dans une instance de travail, créez un article fictif consacré à un atelier. Ajoutez un bloc HTML personnalisé avec un lien de repère avant le bouton, le bouton d’aide et un lien de repère après. Les repères peuvent mener à deux paragraphes du même article. Ils permettent de savoir si l’ordre de lecture s’est interrompu au milieu du groupe. La recette utilise « Préparer le matériel » avant et « Lire les étapes » après. Le libellé du bouton et la phrase affichée restent identiques dans tous les états.
Gardez une révision saine ou une copie du bloc avant de tester la proposition. Notez le texte attendu du bouton, l’identifiant du panneau et les deux repères. Pour pouvoir faire une comparaison, enregistrez le test sur la même page de travail et faites une copie de chaque état du balisage. Vous aurez besoin de distinguer la proposition brute de la version corrigée. Si les deux sont enregistrées dans un seul fichier qui se remplace à chaque essai, la différence à expliquer risque de disparaître.
Dans l’état de départ, le bouton est un élément HTML button doté d’un type et d’une cible de panneau. Il entre dans l’ordre de tabulation ordinaire du navigateur sans attribut ajouté. Le panneau est fermé au chargement. Rechargez l’aperçu comme un visiteur, puis vérifiez le premier trajet avant toute retouche. Notez les éléments réellement atteints. Si le bouton est déjà absent de ce trajet, documentez cette difficulté et cherchez sa cause avant d’attribuer le défaut à la suggestion.
Les deux repères encadrent le test, mais la page peut avoir des liens avant eux, par exemple dans l’en-tête. N’essayez pas de fixer un nombre universel de pressions depuis le début de la page. Tabulez jusqu’au premier repère, puis comptez le trajet entre les deux. Cela rend le test répétable dans un autre thème. Pour une commande dans un formulaire, un onglet ou une liste qui utilise des flèches, vérifiez le fonctionnement prévu de ce composant. Le témoin fourni porte sur un bouton autonome.
Reproduire la différence sans placer le focus à la main
Ouvrez le rendu de référence dans un nouvel onglet. Sans utiliser la souris dans le document, avancez avec Tab jusqu’à « Préparer le matériel ». Appuyez de nouveau sur Tab. Le bouton doit recevoir le focus. La pression suivante mène à « Lire les étapes ». Repartez de ce dernier repère et faites le trajet inverse avec Maj+Tab. Le bouton doit également être atteint dans ce sens. Vérifiez que l’indicateur de focus vous permet de savoir où vous êtes. Si vous hésitez, l’inspection de l’élément actif aide à distinguer un focus mal visible d’une commande sautée.
Faites le même trajet dans la copie avec la proposition. En partant du premier repère, la pression suivante arrive directement sur « Lire les étapes ». En sens inverse, elle revient au premier repère sans passer par le bouton. Le panneau est encore fermé. Reprenez ensuite un essai séparé à la souris. Le clic sur « Afficher l’aide » ouvre le panneau. Vous avez alors isolé une différence entre l’accès par tabulation et l’action du bouton une fois qu’il est utilisé.
Évitez d’utiliser une commande de test qui place directement le focus sur le bouton puis envoie Entrée. Elle permet de vérifier une activation depuis un focus déjà établi. Dans cet exemple, elle peut masquer le saut entre les deux repères. Même remarque pour un clic suivi d’une touche. Pour éprouver l’accès, partez d’un état frais et conservez la suite réelle des éléments atteints. Le vérificateur fourni envoie les touches dans le navigateur et lit l’élément actif après chaque pression.
Si le focus atteint le bouton mais que vous ne le voyez pas, la priorité est de retrouver son indicateur. Si le bouton reçoit le focus et que les touches n’ouvrent rien, examinez plutôt l’activation et la cible. Ces symptômes peuvent coexister. Décidez lequel est présent dans la copie avant de corriger. Dans le témoin, l’accès séquentiel seul est cassé et le bouton fonctionne toujours au pointeur.
Relier le saut à l’attribut ajouté
Comparez le bouton de référence et celui que WordPress sert au visiteur. Dans les outils de développement, utilisez l’inspection pour trouver l’élément dont le texte est « Afficher l’aide ». Relevez son type, sa cible et l’éventuel attribut tabindex. Dans l’état défectueux, le bouton porte tabindex="-1". La cible est toujours le panneau dont l’identifiant est a03-info. Les deux liens voisins sont restés en place. Le changement de style se trouve sur la même balise, mais son rayon de bordure et son espacement n’expliquent pas le saut.
Une valeur négative indique que le navigateur peut écarter l’élément de la navigation séquentielle. Elle peut être utile à un composant qui déplace le focus explicitement ou qui a sa propre navigation interne. Ici, il s’agit d’un bouton autonome attendu dans la séquence Tab. Aucune autre commande ne donne accès à l’aide dans la copie. Revenir au comportement natif du bouton suffit donc. Si vous examinez un composant qui gère lui-même les flèches ou le focus, identifiez son fonctionnement avant de retirer une valeur négative.
Vérifiez où l’attribut est produit. Si le bloc HTML le contient après enregistrement et que le navigateur le reçoit, vous pouvez isoler l’écart dans le bloc. Si la proposition brute le contient mais que le rendu ne le reprend pas, conservez cette différence dans votre relevé. Un filtre peut avoir retiré une partie du code. Si l’attribut apparaît seulement dans le navigateur, examinez le modèle ou le script qui le pose. Le bloc de l’article n’est alors qu’un point de départ pour retrouver la source.
Le fragment suivant montre le bouton corrigé et sa cible. Dans un article réel, gardez les identifiants déjà associés au composant. Si le même bloc est dupliqué dans la page, contrôlez que chaque identifiant de panneau reste unique. Un problème de cible produirait un autre symptôme. Le bouton pourrait être atteint au clavier mais n’ouvrirait pas l’aide attendue.
<button type="button" popovertarget="a03-info"
style="border-radius:8px;padding:8px 12px">Afficher l’aide</button>
<div id="a03-info" popover="auto">
<p>Le matériel de démonstration est fourni.</p>
</div>Conserver la retouche visuelle et rétablir la tabulation
Repartez de la référence et reprenez seulement les déclarations de style approuvées. Si vous travaillez déjà sur une copie où la suggestion est enregistrée, retirez l’attribut ajouté au bouton et gardez sa cible, son texte et les styles attendus. Enregistrez la copie puis rouvrez le bloc. Contrôlez aussi le rendu visiteur. Le navigateur doit recevoir un bouton natif sans valeur négative. Il n’est pas nécessaire d’ajouter un ordre chiffré pour forcer cette position. Le bouton retrouve sa place entre les deux repères dans le document.
Ouvrez la page corrigée dans un état frais. Rejouez la séquence dans les deux sens et notez le focus sur le bouton. Une fois arrivé au bouton par Tab, appuyez sur Entrée. Vérifiez le texte affiché. Fermez le panneau avec Échap et regardez où le focus se trouve. Faites le même essai avec Espace. Après fermeture, Tab doit de nouveau rejoindre « Lire les étapes ». Ces résultats décrivent le petit panneau de la recette. Pour un autre composant, fixez le parcours attendu après fermeture selon les actions que le lecteur doit encore accomplir.
Contrôlez la retouche visuelle à part. Dans notre copie, le rayon calculé reste à huit pixels après retrait de tabindex. Sur un site de travail, vérifiez l’apparence réelle et la visibilité du focus avec les styles habituels. Le vérificateur désactive les scripts de page et bloque les feuilles de style du thème pour isoler les interactions natives. Il mesure l’ordre et l’ouverture du panneau. Il ne permet pas d’établir que tous les styles du site laissent apparaître le focus.
Si le bouton existe dans un modèle partagé, vérifiez l’étendue du changement avant d’enregistrer. Une correction du modèle peut toucher plusieurs pages. Sur votre copie, contrôlez une autre page qui utilise le même composant et une page qui utilise un bouton indépendant. Si vous ne pouvez pas isoler l’ajout, gardez le bouton sain et reportez la retouche visuelle. Le dossier de relecture doit permettre de savoir à quel emplacement la suggestion s’appliquait.
Revenir au bloc sain et reprendre les mêmes contrôles
Pour annuler l’essai, restaurez la révision qui contient le bouton de référence ou remettez le fragment sauvegardé. Une restauration complète peut effacer d’autres modifications du document. Comparez la révision au brouillon courant si plusieurs personnes ont travaillé sur la page. Quand le défaut concerne une seule balise, remettre l’ancienne balise suffit si le reste du composant n’a pas changé. Si le bouton vient d’un modèle ou d’un bloc synchronisé, rétablissez le réglage dans cette source et contrôlez ses occurrences.
Sur la page restaurée, refaites le trajet avant et arrière, activez l’aide avec les touches, fermez-la puis avancez jusqu’au dernier repère. Dans la recette, la révision a rétabli le corps de l’article et le fragment HTML à l’identique. Les ouvertures au clavier et au clic se comportent comme au départ. Le rayon ajouté appartient à l’état corrigé et disparaît dans l’état restauré. Ces deux états ont donc le même parcours clavier tout en répondant à deux décisions éditoriales différentes.
Gardez la trace de la proposition et du correctif même après restauration. Notez l’attribut en cause, la page de test et les éléments atteints. Pour une personne qui relit, « le bouton fonctionne » peut seulement signifier que le clic fonctionne. La suite des éléments et les touches utilisées rendent la preuve assez précise pour rejouer la comparaison.
Remettre une preuve que l’équipe peut rejouer
Dans la fiche de contrôle, indiquez l’endroit exact où se trouve le bouton. Relevez le nom de la page, le bloc ou le modèle et les deux repères qui encadrent la commande. Inscrivez l’ordre avant et après la retouche. Ajoutez le résultat du clic séparément de celui du clavier. La personne qui reprend le dossier pourra constater la régression sans connaître l’outil qui a fourni la suggestion. Elle saura aussi quel changement visuel était réellement demandé.
Avant de réutiliser la retouche sur d’autres boutons, choisissez une occurrence avec la même fonction et une autre qui joue un rôle différent. Une action dans un groupe d’onglets n’a pas forcément la même règle de focus qu’un bouton d’aide isolé. Dans chaque cas, vérifiez ce qui doit rester atteignable depuis la page. Demandez ensuite à la personne qui relit de refaire la séquence sans partir d’un clic. Elle doit pouvoir atteindre le bouton, ouvrir le contenu attendu et reprendre le parcours après fermeture.
Consignez les différences de navigateur si elles font partie du site que vous maintenez. Un panneau natif peut dépendre de la prise en charge du navigateur et de sa configuration. Si le public doit pouvoir consulter une information essentielle même lorsque le panneau ne s’ouvre pas, placez cette information à un endroit accessible dans la page. Ce choix appartient à la présentation du contenu. La vérification de la retouche reste centrée sur le changement mesuré entre les quatre états de la copie.
