VARIANTE A
Un div cliquable
Un élément générique, sans rôle déclaré et sans tabindex.
<div id="command">
Ajouter au panier
</div>Expérience ouverte · HTML / ARIA · v1.0
Même apparence.
Trois réalités.
Trois façons d’écrire « Ajouter au panier ». Une même action. Que change le choix de l’élément HTML ?
Même apparence, trois implémentations HTML
A
Ajouter au panier
div + clickB
Ajouter au panier
div + role="button" + clickC
Ajouter au panier
button type="button" + clickDes défauts volontaires. Les variantes A et B ne constituent pas des modèles à reproduire. Elles restent incomplètes pour rendre la comparaison observable. Les commandes de cette page de présentation sont accessibles au clavier.
01 / L’expérience
Le code fait
la différence.
Chaque page repart d’un panier vide. L’environnement, le texte, le style et la fonction d’ajout sont communs. Seuls l’élément de commande et son attribut de rôle changent. Une activation ajoute une unité.
VARIANTE B
Un rôle ajouté
Le même div, avec role="button". Aucun comportement clavier ajouté.
<div id="command" role="button">
Ajouter au panier
</div>VARIANTE C
Un bouton natif
Un élément HTML prévu pour une commande, avec type="button".
<button id="command" type="button">
Ajouter au panier
</button>Extraits simplifiés : seule la classe CSS commune est omise. Le script partagé écoute click et incrémente le compteur. Il ne gère ni keydown, ni keyup, ni le focus.
02 / À vous de vérifier
Partez du même
point de départ.
Pour chaque essai, ouvrez la page isolée dans un nouvel onglet et placez le focus dans le document depuis la barre d’adresse. N’utilisez pas la souris pour atteindre la commande lors du test clavier.
- Suivre le focusAppuyez sur Tab pour atteindre « Voir le produit », puis continuez. La commande entre-t-elle dans le parcours ?
- Revenir en arrièreDepuis « Vider le panier », pressez Maj + Tab. Notez l’élément qui reçoit le focus.
- ActiverSi la commande est atteinte naturellement, essayez Entrée, puis Espace. Vérifiez chaque incrément.
- Séparer les essaisRepartez de zéro pour le clic, le clavier, le lecteur d’écran et l’agent. Conservez les échecs et les limites.
Si votre navigateur ou votre système limite la navigation clavier, consignez ce réglage et activez sa navigation complète avant de comparer. Un essai au lecteur d’écran utilise un autre mode de navigation et demande un protocole distinct.
03 / Les observations
Mesurer.
Puis interpréter.
Le tableau reprend uniquement les observations archivées. Le comportement attendu d’après les standards est présenté séparément dans la documentation. Aucun résultat de lecteur d’écran ou d’agent n’est déduit d’un test automatisé.
Par défaut : l’exécution la plus récente par date UTC, y compris en échec. À date égale, la dernière entrée du fichier est retenue.
Historique interactif indisponible tant que le script et les données ne sont pas chargés. Le relevé archivé ci-dessous reste consultable.
2026-10-01T05:33:02.114Z · firefox 155.0 · publication · Contrôles réussis. Playwright 1.63.0 ; canal bundled ; Node v22.12.0 ; darwin 25.3.0 arm64. 51/51 contrôles réussis. Révision testée : f38d21693c8f355db5692b9cfdc0f8b8aa102903357c8cf4e7b38ae7a02e93d1 (sources expérimentales et outillage, provenance v2).
| Variante | Clic | Tabulation | Entrée / Espace | Instantané ARIA ciblé |
|---|---|---|---|---|
| A | 0 → 1 → 2 → 3 | Non atteinte par Tab (parcours observé) | Entrée : Non testé — commande non atteinte par Tab ; Espace : Non testé — commande non atteinte par Tab | - text: Ajouter au panier |
| B | 0 → 1 → 2 → 3 | Non atteinte par Tab (parcours observé) | Entrée : Non testé — commande non atteinte par Tab ; Espace : Non testé — commande non atteinte par Tab | - button "Ajouter au panier" |
| C | 0 → 1 → 2 → 3 | Atteinte par Tab | Entrée : +1 ; Espace : +1 | - button "Ajouter au panier" |
La génération de cette présentation n’est pas une nouvelle mesure du comportement des variantes. Empreintes de la présentation et de l’archive utilisée.
Périmètre de l’outilUne représentation,
Une représentation,
pas une voix.
locator.ariaSnapshot() produit une représentation des rôles, noms et états selon Playwright. Ce relevé ne constitue ni une capture complète de l’arbre d’accessibilité natif, ni une transcription d’un lecteur d’écran. Cette expérience ne teste pas Playwright MCP.
Dans les configurations archivées du 1er octobre 2026, B et C produisent le même instantané ciblé sur #command. Cela ne signifie pas que les pages ont les mêmes comportements, ni que tous les agents les interprètent de la même façon.
Non testéLecteurs d’écran
Lecteurs d’écran
et agents IA.
VoiceOver / Safari, NVDA / Firefox et les essais avec un agent indépendant restent Non testé. Des protocoles sont prêts dans la documentation. Un script Playwright déterministe n’est pas un agent IA.
Une question reste ouverte
Réussir une action
suffit-il à la rendre accessible ?
Un agent peut-il réussir là où la tabulation échoue ? Cette démo fournit un terrain d’essai. Sans essai indépendant d’agent, elle ne fournit pas de réponse à cette question.
Elle ne mesure ni la conformité complète d’un site, ni son classement SEO, ni ses chances d’être cité par une IA.
Complément pratique du Socle accessibilité d’un site professionnel, dans la bibliothèque Edikka. La version de cet instrument est distincte de celle de la démo ; son catalogue sous CC BY 4.0 ne change pas la licence MIT de ce code.