Controls hidden from AI agents but still usable

Why it matters

An AI agent acting in a browser for someone finds what it can use in the page's accessibility tree. Google says browser agents work partly by "interpreting the accessibility tree", and Chrome's checks for agents include "Visibility: Confirming that content is not hidden from the accessibility tree while being interactive." A link or button marked aria-hidden="true" is exactly that: a person can click it, and an agent can't see it.

The commonest case is the # link beside a heading, which an agent rarely needs: that is why this is a notice. When the hidden control is the only way to do something, the agent can't do it.

We judge only a link or control that is itself marked aria-hidden: one inside a hidden container is nearly always a closed menu that a stylesheet hides, which the HTML alone can't show. The accessibility pack has the same check for people who use screen readers; with both packs on you hear it once.

Sources: Chrome: agentic browsing scoring, Google's guide to generative AI features in Search, WCAG 2.2, 4.1.2 Name, Role, Value.

How to fix it

Hide it from everyone or from no one: tabindex="-1" beside aria-hidden on what is decoration, inert on a closed menu, and no aria-hidden at all on what people are meant to use.

<h2 id="pricing">Pricing <a href="#pricing" class="anchor" aria-hidden="true" tabindex="-1">#</a></h2>

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<h2 id="pricing">Pricing <a href="#pricing" class="anchor" aria-hidden="true">#</a>
</h2>

Notice1 link or control is marked aria-hidden="true" yet usable, so an AI agent reading the accessibility tree can't see it: a.anchor.

fail-heading-anchor

<nav class="menu" aria-hidden="true">
<a href="/">Home</a>
</nav>
<span aria-hidden="true">★</span>
<input type="checkbox" class="peer hidden" aria-hidden="true">
<div inert>
<a href="/" aria-hidden="true">Home</a>
</div>
<div class="d-none">
<a href="/x" aria-hidden="true">X</a>
</div>
<dialog>
<a href="#" aria-hidden="true">Close</a>
</dialog>
<details>
<summary>More</summary>
<a href="/y" aria-hidden="true">Y</a>
</details>
<fieldset disabled>
<button type="button" aria-hidden="true">Go</button>
</fieldset>

PassedNothing an agent can't see is left usable (3 hidden elements).

pass-decoration

Example page

<nav class="menu" aria-hidden="true">
<a href="/">Home</a>
</nav>
<span aria-hidden="true">★</span>
<input type="checkbox" class="peer hidden" aria-hidden="true">
<div inert>
<a href="/" aria-hidden="true">Home</a>
</div>
<div class="d-none">
<a href="/x" aria-hidden="true">X</a>
</div>
<dialog>
<a href="#" aria-hidden="true">Close</a>
</dialog>
<details>
<summary>More</summary>
<a href="/y" aria-hidden="true">Y</a>
</details>
<fieldset disabled>
<button type="button" aria-hidden="true">Go</button>
</fieldset>

<h2 id="pricing">Pricing <a href="#pricing" class="anchor" aria-hidden="true" tabindex="-1">#</a>
</h2>
<button type="button" disabled aria-hidden="true">Buy</button>

PassedNothing an agent can't see is left usable (2 hidden elements).

pass-taken-out