04.05 · Concept
The Page an Agent Sees: DOM, Screenshot, Accessibility Tree
Describe the three ways a browser agent perceives a page, and change a component so an agent can operate it - which is the accessibility audit restated.
Browser agents read pages through the DOM, rendered pixels, and the accessibility tree. The DOM exposes structure, the screenshot exposes visual context, and the accessibility tree exposes meaning and operable controls. Components become agent-friendly when they use native semantics, clear labels, keyboard behaviour, and explicit state rather than visual styling alone.
What this lesson answers
- how do browser agents see a web page
- DOM versus screenshot versus accessibility tree
- make custom components usable by browser agents
Notes
A browser agent can perceive a page through three different surfaces. The DOM is the structured document the browser builds from HTML, JavaScript, and state. A screenshot is the pixels a human would see after layout and styling. The accessibility tree is the simplified semantic interface exposed to assistive technologies, with roles, names, states, and relationships such as “button named Submit” or “textbox required.”
The useful mental model is that the DOM says what exists, the screenshot says what it looks like, and the accessibility tree says what it means and how it can be operated.
References
Common questions
- Why is a clickable div a problem for browser agents?
- A styled div may look like a button in the rendered page, but it may not expose button semantics, a usable name, keyboard interaction, or state. An agent can see that something looks clickable yet lack a reliable machine-readable way to know what it is, what it does, or how to operate it.
- Is making a page agent-ready the same as accessibility work?
- For interactive components, it is largely the same engineering discipline. Prefer native controls, label inputs and actions clearly, keep keyboard operation working, and expose state through semantics rather than appearance alone. These changes help assistive technology and also give browser agents a dependable interface to inspect and operate.
- Why does an agent need more than the DOM?
- The DOM gives structure, but not the full experience of a page after layout, styling, and interaction. Pixels can clarify layout and visual grouping, while the accessibility tree provides roles, names, states, and allowed actions. Combining these views makes agent behaviour more reliable on real interfaces.