VARIANT A
A clickable div
A generic element, with no declared role and no tabindex.
<div id="command">…</div>Open experiment · HTML / ARIA
Same appearance.
Three realities.
Three ways to write “Add to cart”. One action. What changes when you choose a different HTML element?
Same appearance, different HTML
A
Add to cart
div + clickB
Add to cart
div + role="button" + clickC
Add to cart
button type="button" + clickAn English guide to the original experiment. The isolated variants and archived observations remain in French. “Ajouter au panier” means “Add to cart”; “Voir le produit” means “View product”; “Vider le panier” means “Empty cart”. This guide introduces no new measurement.
01 / The experiment
The code makes
the difference.
Every page starts with an empty cart. The environment, wording, styling and click handler are shared. Only the control element and its role change. Variants A and B are deliberately incomplete examples.
VARIANT B
An added role
The same div with role="button". No keyboard behaviour is added.
<div role="button">…</div>VARIANT C
A native button
An HTML element designed for commands, with type="button".
<button type="button">…</button>Simplified excerpts. The shared script listens for click and increments the counter. It does not manage keydown, keyup or focus.
02 / Check for yourself
Use the same
starting point.
Open each isolated variant and enter the document from the address bar. Do not use the mouse to reach the control during a keyboard trial. On Safari/macOS, enable full keyboard navigation before comparing.
- Follow focusPress Tab to reach “Voir le produit”, then continue. Does the control enter the tab sequence?
- Go backwardsFrom “Vider le panier”, press Shift + Tab. Record which element receives focus.
- ActivateIf the control is reached naturally, try Enter and then Space. Check each increment.
- Separate the trialsStart afresh for pointer, keyboard, screen reader and agent trials. Preserve failures and limitations.
03 / Evidence and scope
Inspect what
was observed.
The French results page displays the archived observations and their environment. Keyboard checks and Playwright ARIA snapshots are distinct from screen-reader or independent AI-agent trials.
Tool scopeA representation,
A representation,
not a voice.
locator.ariaSnapshot() reports roles, names and states according to Playwright. It is neither a complete native accessibility-tree capture nor a screen-reader transcript. Matching snapshots do not establish matching behaviour.
Not testedScreen readers
Screen readers
and AI agents.
VoiceOver / Safari, NVDA / Firefox and independent agent trials remain untested in the published archive. A deterministic Playwright script is not an AI agent. This experiment does not establish whole-site accessibility, SEO rankings or AI citation performance.
An open question
Does completing an action
make it accessible?
This experiment provides a test environment. Without independent agent trials, it does not answer whether an agent can succeed where keyboard navigation fails.