Tab-Based Layouts and Why Agents Miss Hidden Content

Product pages love tabs. Click "Description" and you see a paragraph about the item. Click "Specifications" for the tech details. Click "Reviews" for what customers think. Click "Shipping" for delivery information. A tidy UI pattern that keeps long pages compact. Also a pattern that hides 75% of the page content from AI agents.

The Default Tab Is All Agents See

Most tab implementations work the same way. The default tab panel is visible. Every other panel has display: none or isn't rendered into the DOM at all. An AI agent loading the page reads the HTML and finds one panel of content. The tabs exist as clickable elements, but their associated panels are either hidden or absent.

We tested 80 product pages across major e-commerce sites. On 61 of them, tab content beyond the default panel was completely absent from the initial HTML. The agent could see there were tabs labelled "Specs," "Reviews," and "FAQ," but clicking those tabs required JavaScript interaction, and the content behind them existed nowhere in the page source.

For a shopping agent asked to "find a laptop with at least 16GB RAM and USB-C ports," the specifications are exactly what it needs. Those specs sit behind an inactive tab. The agent reads the description tab, finds marketing copy about "stunning performance," and has nothing concrete to work with.

Two Flavours of Hidden

Tab implementations break down into two categories, and both cause problems.

CSS-hidden tabs render all tab panel content in the HTML, then use display: none to hide inactive panels. This is the better approach. An agent parsing raw HTML can still find the hidden content. But agents using browser automation tools that check element visibility will skip these panels because they aren't "visible" in the viewport. The content exists in the DOM but is treated as invisible.

JS-rendered tabs load panel content only when a tab is clicked. The HTML for inactive panels doesn't exist until the user interacts. An agent parsing the DOM finds nothing. Even an agent running a headless browser would need to click each tab, wait for content to load, and read the newly rendered HTML. On a site with five tabs per product and 200 products, that's 1,000 extra click-and-wait interactions.

The ARIA Clue Agents Miss

Well-built tab components use ARIA attributes: role="tablist" on the container, role="tab" on each tab, and role="tabpanel" on each panel. The aria-selected attribute marks the active tab. The aria-controls attribute links each tab to its panel.

These attributes tell an agent that hidden content exists and which tab controls which panel. That's useful information, but only if the panel HTML is actually present. When tabs use lazy loading, the ARIA attributes point to panel IDs that don't yet exist in the DOM. The signpost is there; the destination isn't.

What Actually Fixes This

Render all tab content in the HTML. The simplest fix. Put every panel's content in the page source. Use CSS to show only the active panel. JavaScript handles the tab switching behaviour. Agents reading the HTML get everything. Humans see the neat tabbed layout. Search engines index the full content too. This is the same principle behind structuring HTML so agents can parse it.

Add structured data. Product schema markup (Product type in JSON-LD) can include specifications, reviews, and other details that live behind tabs. An agent that reads schema.org markup gets the data without interacting with the UI at all.

Use <details> and <summary> as an alternative. Native HTML disclosure elements are a surprisingly good replacement for tabs in many cases. The content exists in the DOM regardless of open/closed state. Agents can read it. Screen readers handle it well. No JavaScript required.

Don't hide critical information. If product specifications, pricing tiers, or return policies are essential to a purchase decision, they shouldn't require interaction to access. Agents and humans both benefit from seeing key details without clicking around. Test your site's agent compatibility to find out how much content agents actually see on your pages.