Retour à la démonstrationEnglish

HTML / ARIA · Playwright MCP · Lighthouse · 2026-10-08

Trois clics réussis. Un seul arrêt de tabulation.

Mesures complémentaires du 8 octobre 2026 : appels réels de Playwright MCP, audits Lighthouse et tests du parcours clavier. Les trois variantes conservent leurs défauts volontaires.

Contrôle complémentaire : MCP 0.0.83, représentations et focus

Résultats

Le tableau peut défiler horizontalement.

Trois variantes, deux séries Lighthouse et un parcours clavier
VarianteClic MCPAccès par TabLighthouse : originalLighthouse : couleur ajustéeAudit agent-accessibility-tree
A — div0 → 1Sauté95/100100/100Réussi
B — div role="button"0 → 1Sauté96/100100/100Réussi
C — button0 → 1Atteint95/100100/100Réussi

Les fichiers d’origine sont conservés. Le contre-essai de contraste ne change que le fond du carnet (#687b40 devient #647640) ; le contre-essai de curseur repart de l’original et ajoute .command { cursor: default; }. Les deux changements sont séparés.

Appels MCP

browser_snapshot fournit les lignes ci-dessous, puis browser_click utilise la référence reçue. Le compteur passe de 0 à 1 pour chaque variante. Les références sont locales à chaque session. Le script sélectionne la cible : aucun modèle autonome ne décide de l’action.

A
- generic [ref=e14] [cursor=pointer]: Ajouter au panier

B
- button "Ajouter au panier" [ref=e14] [cursor=pointer]

C
- button "Ajouter au panier" [ref=e14] [cursor=pointer]

Avec cursor: default, l’annotation [cursor=pointer] disparaît ; la référence et le clic fonctionnel restent présents dans les trois variantes.

Tests clavier

Le test envoie deux Tab depuis une page neuve, exige le focus sur le bouton, puis active Entrée ou Espace et attend un compteur égal à 1. Deux tests réussissent sur C ; deux échouent sur A et deux sur B, dans chacune des deux séries. Les rapports conservent les huit échecs et les quatre réussites. Les processus des tests A/B terminent avec le code 1.

keyboard.spec.cjs · playwright.config.cjs

Un test en échec peut être le résultat attendu d’une expérience. Il reste un échec du comportement demandé.

Scores Lighthouse

L’alerte de contraste porte sur NOTES, dessiné sur le carnet. Lighthouse rapporte 4,36:1 dans l’original. Après le seul changement de couleur, les trois scores deviennent 100/100 et les barrières clavier de A/B restent observées. L’audit agent-accessibility-tree réussit dans les six rapports ; les deux audits applicables de la catégorie réussissent (arbre d’accessibilité et stabilité de mise en page), tandis que les cinq autres sont non applicables. Ce résultat ne couvre pas le parcours Tab.

Pourquoi 96 pour B et 95 pour C ? L’échec de contraste pèse 7 sur un total applicable de 129 pour A/C. B ajoute quatre audits ARIA réussis, de poids total 28 : (157 − 7) / 157 ≈ 95,54 %, contre (129 − 7) / 129 ≈ 94,57 %. Le score affiché est arrondi.

La prise de focus des contrôles (focusable-controls) figure parmi les contrôles manuels, hors score automatisé.

Lighthouse 13.5.0 : agent-accessibility-tree.js

Méthode et sources

Environnement mesuré

Sources figées au commit ae880251a7e8b40ceaed41e4eca2b7b82137d762.

Reproduire les mesures · measure.mjs · package-lock.json · measurements.json · Empreintes de ce dossier

git clone https://github.com/edikkaweb/html-aria-agent-demo.git
cd html-aria-agent-demo/preuves/2026-10-08
npm ci
npm run measure

Node.js 22.19 minimum et Google Chrome sont nécessaires. Les nouvelles sorties sont enregistrées dans runs/DATE, sans remplacer les rapports publiés. Voir le README pour le test clavier qui termine avec une erreur sur A/B.

Rapports bruts

Sources d’origine

Couleur du carnet ajustée

MCP

Limites

Un passage par condition, Chrome sur macOS, trois pages simples. Les mesures ont été exécutées localement sur les sources figées, puis publiées ici. Aucun essai de lecteur d’écran ou d’agent autonome ; aucune conclusion de conformité complète. Publier ces fichiers ne constitue pas une nouvelle campagne sur le site en ligne.