The accessibility tree

Every browser builds a second representation of the page it displays: a tree of roles and names, meant for assistive technology. A screen reader uses it to say “button, Sign in” rather than describing pixels.

It is not something Diwall invents. It is already there, in every page you have ever opened, and it happens to be exactly what a language model needs.

What it looks like

diwall-shot --url http://localhost:8765/demo_som_en.html --a11y --mode fast \
  --guide-version 1.3

- banner:
  - strong: Admin panel
  - navigation:
    - link "Dashboard":
      - /url: "#a"
    - link "Sites":
      - /url: "#b"
- main:
  - heading "Sign in" [level=2]
  - textbox "User name":
    - /placeholder: operator
  - textbox "Password":
    - /placeholder: ••••••••
  - combobox "Environment":
    - option "production" [selected]
    - option "staging"
  - button "Sign in"
  - button "Cancel"

Run on the fixture shipped with Diwall: 1 099 ms, no screenshot at all. --mode fast returns the tree and nothing else — no PNG, no image analysis.

What it carries that an image does not

Look at what that extract states outright, and that no screenshot could:

Roles. button, textbox, combobox, heading [level=2]. Not “a rectangle with rounded corners” — what the element is.

Destinations. link "Dashboard" followed by /url: "#a". Where it goes, before clicking.

States. option "production" [selected]. Which choice is active right now.

Structure. What belongs to the banner, what belongs to the main content, what nests under what. An image flattens all of this into one plane.

A screenshot shows you what a page looks like. The tree tells you what it is.

It is often enough on its own

Four pages, three requests, keyword found with its surrounding context — and no vision model called at any point.

That was a real exercise: find a keyword on a public site without knowing which page holds it. --a11y only. The word turned up inside a <strong>, and the tree gave the context around it.

The tree is self-sufficient for a whole class of work:

• searching for text or a tag
• navigating by links, since every href is there
• checking that an element is present
• discovering how a page is organised

A vision model becomes necessary only when the target has no accessible semantic representation — a clickable image, a graphical zone, a canvas. That is a real category, and it is smaller than people expect.

Why this matters beyond Diwall

A page with a well-built accessibility tree is legible to a screen reader, to a search engine, and to an agent — the same tree serves all three. A page that paints its buttons with <div> and styles them into looking clickable is opaque to all three at once.

The tree is not an accessibility feature that happens to help machines. It is the page’s structure, made explicit. Whoever writes the page decides whether that structure exists.

See the same page three ways →

In short

• The browser builds this tree for every page, for assistive technology.
• It carries roles, destinations, states and structure — an image carries none.
• --a11y --mode fast returns it without a screenshot, in about a second.
• Reach for a vision model only when there is nothing semantic to read.