AI agents increasingly look at your page as an image, not just as code, and vision-language models misread common UI patterns in predictable ways. The carousel is the worst offender: a vision model sees only the visible slide and misses everything behind it, so the four products in your rotating hero become one product to the model. Tabs, hover-reveals, and modals fail the same way, content present in the code but not in the captured view. This is how vision-language models read a UI, which patterns trap them, and how to design so both the code reader and the image reader see the whole page.
There is a second way AI now reads your page, and most optimization ignores it. Alongside the text crawlers that parse your HTML, vision-language models look at rendered screenshots of your page and interpret them as images, the way agentic browsing tools navigate a site visually. This matters because a vision model does not see your code; it sees what is painted on the screen at the moment of capture. Anything not visually present in that captured frame does not exist to it, no matter how cleanly it sits in your HTML.
This creates a failure mode invisible to text-based AEO. You can have perfect HTML, clean schema, and extractable text, and still be misread by a vision model because your visual presentation hides content behind interaction. The carousel is the clearest example, and once you see the pattern, you see it everywhere in modern UI.
How a vision-language model reads a page
A vision-language model takes an image, a rendered screenshot of your page, and interprets what is visually present: layout, text that is painted on screen, the relationships between visible elements. It is remarkably good at understanding a page the way a human glancing at it would. And that is exactly the limitation: like a human glancing at a single screenshot, it sees only what is displayed in that frame. It does not scroll through interaction states; it reads the snapshot.
This differs fundamentally from a text crawler, which parses the full HTML including content that is in the DOM but not currently displayed. The text crawler can see all four carousel slides because all four are in the code. The vision model sees one, because only one is painted. When an agent uses vision to understand your page, the content you hid behind interaction is content it never encounters, and it reasons about your page as if that content does not exist.
The carousel: four becomes one
The hero carousel is the canonical trap. You rotate four products, four value propositions, or four customer logos through a single visual slot, and to a human clicking through, all four register over time. To a vision model capturing the page, only the slide showing at capture exists. Your four products become one product. Your four key messages become one message. Three-quarters of the content you put in your most prominent position is invisible to the image reader.
This is uniquely damaging because the carousel usually holds your most important content, that is why it is in the hero. You have taken your highest-priority messages and arranged them so a vision model can see only one of them, effectively at random depending on capture timing. A competitor who displays their four value propositions as four visible elements gets all four read; you get one. The carousel does not just hide content, it hides your best content in your most important location.
The same trap in tabs, hovers, and modals
Once you see the pattern, the other offenders are obvious. Tabbed content shows one tab and hides the rest behind clicks, so a vision model reads the active tab and misses every other tab's content, your specifications, your other use cases, your FAQ answers beyond the first. Hover-reveals hide content until a mouse hovers, an interaction a vision model capturing a static frame never performs, so hover-revealed content is simply absent. Modals and popups that contain real content are invisible unless they happen to be open at capture, which they usually are not.
The unifying principle is that any pattern which hides content behind a state change, a slide rotation, a tab click, a hover, a modal open, is a pattern that hides content from a vision model reading a single captured state. The content is in your code, so a text crawler finds it, which is exactly why this failure is invisible to text-based AEO testing. You can pass every text-crawler check and still be misread by the vision reader, because the two see different things. This is the visual cousin of the empty-shell problem: there the content is missing from the raw HTML, here it is missing from the rendered frame, and both make real content invisible to a class of reader.
How to design for both readers
The fix is to ensure your important content is visually present in the default rendered state, not hidden behind interaction. This does not mean abandoning carousels, tabs, and modals entirely; it means not relying on them as the sole home for content that matters for understanding your page. The principle is the same one that runs through all of AEO: keep the design, add the readable layer.
For a hero carousel, consider displaying the key value propositions as visible elements below or alongside the rotating visual, so the substance is painted in the default frame while the carousel adds motion for humans. For tabbed content, ensure the most important information is either in the default-visible tab or also presented in a visible summary, so the vision model captures it regardless of which tab is active. For hover-reveals and modals, never let them be the only place critical content lives. The test is simple: take a screenshot of your page in its default state and ask whether everything important is visible in it. If a vision model would miss something that matters, redesign so the default frame contains it. This pairs with using semantic disclosure patterns correctly, since how you implement reveal-on-interaction affects both the code reader and, increasingly, the image reader.
Why this matters more every month
The contrarian point is that text-based AEO, the discipline of getting your HTML and schema right, is necessary but no longer sufficient, because a growing share of AI interaction with your site happens through vision. Agentic browsing tools navigate visually. Multimodal models look at pages. The image reader is not a future concern; it is already reading your site, and it is reading the painted frame, not the code. Optimizing only for the text crawler leaves you exposed to a reader that is becoming more important, not less.
The whole-page-visible principle is the response: design so that the most important content is present in the default rendered state, readable by both the crawler parsing your code and the vision model reading your screenshot. The carousel trap and its relatives are not edge cases; they are among the most common UI patterns on the modern web, which means most sites are misreading-prone by default. Auditing your page as an image, literally looking at what a single screenshot contains, is a check most teams have never run, and it surfaces content-hiding patterns that no text-based audit would catch.
Sources
- OpenAI, vision and multimodal models: how vision-language models interpret images including page screenshots. platform.openai.com
- Anthropic, Claude vision capabilities: how Claude reads and reasons about images. docs.claude.com
- W3C, accessibility of interactive content: standards for content hidden behind interaction states. w3.org
- Website AI Score, client-side rendering empty shell: the text-crawler cousin of the vision-reader trap. View article
- Website AI Score, semantic HTML disclosure: implementing reveal patterns that both readers handle. View article
