Audit de mise en page
layout-audit.mjs (situé à côté de ce fichier) pilote une page à plusieurs largeurs et mesure le DOM. Il signale
uniquement ce qu'une personne qualifierait de défaut de mise en page ; l'accessibilité est une question distincte qu'il ne pose pas.
node ~/.claude/skills/layout-audit/layout-audit.mjs --base=http://localhost:3000 --routes=/,/pricing
Options : --routes (séparées par des virgules, défaut /), --widths (défaut 1440x900,390x844), --auth=user:pass
pour l'authentification Basic, --shots=<dir> pour également écrire une capture d'écran par route et largeur, --json pour différer les exécutions.
Playwright est issu de l'installation globale de @playwright/cli, donc aucun projet ne gagne de dépendance.
Vérifications
| Vérification | Ce que cela signifie |
|---|---|
viewport-overflow | Un élément dépasse le bord de la fenêtre d'affichage – la page défile horizontalement |
clipped-text | Une boîte coupe son propre texte sans points de suspension et sans titre, rendant le texte inaccessible |
collapsed-text | Un élément contient du texte mais n'a pas de hauteur – il apparaît comme un espace vide |
overlapping-text | Deux boîtes de texte sont dessinées sur les mêmes pixels |
tiny-text | Texte trop petit pour être lu sur un téléphone |
Travailler avec le résultat
- Exécutez-le sur une version construite, pas sur un serveur de développement en cours d'édition. Le rechargement à chaud laisse des styles à moitié appliqués.
- Regroupez les résultats par élément avant de corriger quoi que ce soit. Un en-tête partagé répété sur dix routes est un défaut, pas dix, et le nombre dans le rapport n'est pas la charge de travail.
- La troncature avec des points de suspension et un titre est un motif, pas un défaut – l'outil l'exclut déjà. Si un résultat indique qu'une boîte coupe du texte, le texte est véritablement inaccessible.
- Un résultat répété sur une classe d'élément est une décision de conception. La taille de police sur toute une surface, ou une couleur, appartient au propriétaire du design ; rapportez les chiffres et laissez-le choisir plutôt que de modifier la palette au passage.
- Une capture d'écran capture encore ce qu'aucune règle n'énonce. Prenez
--shotset regardez les pages que les règles ont déclarées propres, en particulier la largeur téléphone. - Une exécution propre ne dit rien sur le téléphone d'une personne. WebKit de Playwright avec un profil iPhone n'est pas Safari sur un iPhone. Lorsqu'un défaut signalé sur téléphone ne se reproduit pas, dites-le plutôt que de signaler que cela fonctionne, puis demandez l'appareil ou supprimez carrément le mécanisme suspecté.
- Prouvez qu'une règle se déclenche avant de faire confiance à un zéro. Plantez le défaut sur une page de test, exécutez les vérifications dessus, et observez la règle le signaler. Un clip au niveau de la page en particulier fait échouer les comparaisons naïves de largeur sur chaque page.