Inspect the accessibility tree

Screen readers don’t look at your pixels. They read a data structure the browser builds from your HTML, called the accessibility tree. Every node in it has a role (what kind of thing it is), a name (what to call it), and often a value, some states like checked or expanded, and relationships to other nodes, like which label describes which field.

If something is missing from that tree, it doesn’t exist for assistive technology, no matter how it looks on screen.

Open the tree in Chrome

Let’s inspect the two versions of the Register control side by side. The flawed one is a div, the fixed one is a real button:

<div class="btn" onclick="submitRegistration()">Register</div>

<button type="submit">Register</button>

In Chrome DevTools, select the div in the Elements panel, then open the Accessibility tab next to Styles. The computed properties show:

Role: generic
Name: ""
Focusable: false

Now select the button:

Role: button
Name: "Register"
  from contents
Focusable: true

Same text, same look after CSS. Completely different tree. The button got a role, a name from its text, focusability, and Enter and Space activation for free. The div got nothing.

Listen to the difference

Turn on VoiceOver on a Mac with Command + F5, then move through the page with VO + Right Arrow (VO is Control + Option). Passing over the div you hear:

Register

Passing over the button you hear:

Register, button

That one extra word tells the user they can activate it. Without it, “Register” is just text floating in the page.

States come from the tree too

Add disabled to the real button while the form submits:

<button type="submit" disabled>Register</button>

The Accessibility pane now lists Disabled: true, and VoiceOver says “Register, dimmed, button”. One attribute updated three things: the visual style, the keyboard behavior and the announcement. That’s the payoff of fixing the source instead of the symptom.

Relationships

Select the email field on the repaired page and look for the “Labeled by” line in the pane. It points at the label element. That link is a relationship, and it’s what makes the field announce as “Email, edit text” rather than “edit text”. We build those relationships in the forms module. For now, know that the pane shows them.

The mistake this lesson prevents

The trap is to assume visible text plus CSS produces the meaning you intended. It doesn’t. A styled div can look exactly like a button and still be invisible as a control. When a screen reader behaves strangely, don’t guess. Select the element, read the computed name and role, and fix the source that produced them.

Try this on your own project: open the Accessibility pane on every clickable element of one page and write down each one whose role is generic. Those are your first repairs.