Accessibility for humans is visibility for AI
Semantic HTML beats div-soup
Semantic HTML uses elements that carry meaning: header, nav, main, section, article, aside, footer, h1 through h6, p, ul, ol, li, table, figure, figcaption. Each tells the browser, assistive technology, search engine, and AI agent something about the role of the content inside it. A page built mostly out of generic div elements forces every reader — human and machine — to infer the structure from CSS classes and visual layout. AI agents do neither well. The retrofit is not glamorous, but converting a single page from div-soup to semantic HTML usually adds nothing to its rendered appearance and significantly improves how AI systems summarise it.
Heading hierarchy is a free outline
An h1 is the single page title. h2 elements are top-level sections. h3 elements are subsections of those. The hierarchy should never skip a level (no h2 directly inside an h4) and a page should usually carry at least three headings. Vercel's agent-readability spec calls this out explicitly: pages with three or more h1-h3 elements produce better embeddings for retrieval and let agents extract specific sections relevant to a user's query. The heading outline is a structural summary that can be parsed in milliseconds; an agent that finds it skips most of the rendering work.
ARIA labels and alt text fill in what humans see and machines miss
ARIA — Accessible Rich Internet Applications — is a small vocabulary of attributes that describe interactive elements. aria-label='Add to cart' tells a screen reader, a search engine, and an agent what a button does, even when the visible label is just an icon. Likewise, alt text on images describes what is in the image to anyone who cannot see it: visually impaired users, agents, and any system that has not yet rendered the image. The discipline of writing useful ARIA labels and alt text is the same discipline as writing for an agent: literal, specific, complete.
Text-to-HTML ratio is a quiet but real signal
A page where 95% of the bytes are framework JavaScript, tracking pixels, and empty wrappers, and only 5% are visible text content, is harder for agents to parse. Vercel recommends a text-to-HTML ratio above 15%; sites well below that threshold tend to be filtered out as low-signal. The fix is not to write more text but to ship less HTML: remove unused class names, defer non-critical scripts, server-render the main content, and avoid wrapping every word in a div. A clean page with 800 words of useful text and a lean shell will outperform a 3,000-word page buried inside a 6 MB framework bundle.
Concrete patterns from Google's agent-UX guide
Google's web.dev team has a short list of design patterns that help all three channels an agent uses. Prefer real button and a elements rather than styled divs and spans. Agents recognise the semantic versions immediately, and treat custom-rolled equivalents as untrusted unless a role and tabindex are set. Set cursor:pointer on anything clickable; agents read it as a strong actionability signal. Use the for attribute on label elements to link them to inputs, so an agent can match the label string to the field it controls. Keep interactive elements visible and larger than roughly 8 square pixels, since the vision model filters smaller hit areas. Avoid transparent or ghost overlays that cover interactive elements. Keep layouts stable across similar pages so a screenshot-comparing agent does not lose track of a familiar control. Most of this is routine accessibility work that also happens to help machines.
If you turned off all CSS and JavaScript on your home page and read what was left, would it tell a stranger what your business does, who it serves, and what to do next?