Original post by Kasper Kulikowski and Omkar More
30-second rundown
Key learnings:
- Agents read a semantic map of your page, not your pixels. If a
<div>only looks like a button, the machine sees a<div>. Make the accessibility tree, the DOM, and the visual layout tell the same story. - Use real
<button>and<a>tags, addforto labels, setcursor: pointer, and keep critical controls bigger than 8 square pixels and clear of transparent overlays. - Every meaningful action needs a visible result. An action that fires silently is invisible to the agent, so it assumes nothing happened.
- Keep your layout stable. Screenshot-driven agents get lost when key controls wander between pages.
- None of this is a confirmed ranking lever. Google said “consider,” not “must.” The real reason to do it is that it is identical to the accessibility work you already owed, now with the dominant search vendor behind it.
This week: On your highest-traffic page, right-click your main call-to-action and choose Inspect to open Chrome DevTools, then open the Accessibility tab in the Elements sidebar and read the role and name it reports. Click through your navigation links and form fields the same way. Anything that comes back as “generic,” a bare <div>, or a blank name is invisible to the agent in exactly that spot, and that is your fix list.
Coming 3 months: Run one audit for two visitor classes at once. Replace styled <div> buttons with real <button> elements across your conversion-critical pages, link every label to its input, set cursor: pointer on clickables, and clear the ghost overlays and sub-pixel targets out of any critical path.
Then sign up for the WebMCP early preview, Google’s proposed standard for direct agent-to-website interaction, so you are shaping how machines transact with your site before your competitors even notice the door exists.
Kasper Kulikowski and Omkar More wrote this thing for web.dev, and the premise lands like a wrench dropped on a tile floor: your website was built for human eyes, and now something with no eyes at all is trying to check out.
The AI agent is not admiring your hover states or your fluid motion. It is hunting for the button, and half the time it cannot find the thing. Your beautiful site is functionally broken for the newest visitor crawling through your front door.
1. The Machine Doesn’t Look at Your Site. It Triangulates a Map of It
An agent perceives your page through three channels at once:
- a screenshot run through a vision model,
- the raw HTML and DOM,
- and the accessibility tree, which is the browser’s semantic distillation of roles, names, and states.
The accessibility tree is the high-fidelity map, the one that ignores the visual noise of CSS and shows only what is actually interactive, while the screenshot is the expensive vision pass that reads layout and position.
Modern agents cross-reference all three, so when your DOM holds a <div> that CSS has dressed up as a button, the accessibility tree still reports a <div> and the costume does not survive the reading.
Your only job is to make the signals agree, or the machine will improvise, and improvisation is where checkout flows go to die.
2. Semantic HTML Is Not Virtue Signaling. It Is Load-Bearing Infrastructure
Use <button> and <a> instead of tarted-up <div> and <span>, and when you genuinely cannot, bolt on role and tabindex so the tree knows what it is holding.
Give every <label> a for attribute matching its field’s id, such as <label for="email"> paired with <input id="email">, so the agent can bind the label to the right input instead of guessing from proximity. Set cursor: pointer on anything clickable, which the agent reads as “this is meant to be used,” a cue Google calls a strong signal for actionability.
Keep interactive elements larger than 8 square pixels, and no, that is not a typo, eight, because below that threshold visual analysis filters the element out like a speck of dust. Kill any transparent overlay or ghost element sitting on top of a real control, since the agent discards nodes it thinks are covered.
One more that is easy to forget: every action must produce a visible change in the interface, because a button that fires silently is, to the machine, a button that did nothing.
3. Stability Is a Feature, and Your Layout Will Not Sit Still
An agent navigating by screenshot walks into pure chaos when your furniture keeps moving. An Add to Cart button that lands in a different spot for every product category is not a design flourish, it is a navigation failure with a countdown timer on it.
Google’s advice is blunt: the actions that matter should sit in consistent, visible locations across the site. Agents, like exhausted humans at midnight, do better when nobody has rearranged the room.
Every single fix on this list is the same list accessibility advocates have been begging for since long before anyone taught a robot to shop: clean semantic structure, labeled inputs, stable layouts, targets big enough to hit.
Web Content Accessibility Guidelines (WCAG) already asks for interactive targets of at least 24 by 24 pixels for human fingers, and Google is just aiming the same principle for machine eyes.
Worth saying plainly, though, that Google framed all of this as “consider following,” not law, and tied none of it to rankings, so nobody is promising you a search boost.
The audit you skipped for a decade just got a new sponsor, and this one signs Google’s paychecks.
