How Assistive Technology Reads Your Page

Open Ticketly with your screen turned off. That sounds like a stunt, but it is what Samir does every working day, and it is the fastest way to understand what your code really sends to the people using it. Before you fix anything, you need a clear picture of how assistive technology (AT) gets information out of a web page.

The accessibility tree

Assistive technologies don’t look at your pixels. The browser takes the DOM, combines it with CSS, and builds a second, simpler tree: the accessibility tree. Each node in it has a few properties:

• a role: button, link, heading (level 2), textbox, checkbox, list, generic;
• a name: the text that identifies it, such as “Book now”;
• states and values: checked, expanded, disabled, the current text in an input.

The browser hands that tree to the operating system’s accessibility API, and the screen reader, magnifier or voice control software reads it from there.

Here is part of Ticketly’s event card, and what the tree contains for it:

<h3>Harbour Lights: Friday</h3>
<div class="btn" onclick="book('fri')">Book now</div>
<button type="button" onclick="book('sat')">Book now</button>

heading "Harbour Lights: Friday" (level 3)
generic
  text "Book now"
button "Book now"

The div shows the same text, but its role is generic. A screen reader reads “Book now” as a sentence, with no hint that it does anything, and it can’t be reached with the Tab key. You can inspect this yourself: in Chrome or Edge DevTools, select an element and open the Accessibility pane; Firefox has a dedicated Accessibility Inspector tab.

Four ways people operate Ticketly

Screen readers (NVDA and JAWS on Windows, VoiceOver on Apple devices, TalkBack on Android) turn the tree into speech or braille. Users rarely listen to a page top to bottom. In WebAIM’s 2026 survey, 67.8% of screen reader users said their first move on a long page is to jump between headings. They also pull up lists of links, landmarks and form fields. Your structure is their table of contents.

Screen magnifiers (Windows Magnifier, macOS Zoom, ZoomText) enlarge a small region that follows the focus or pointer. Maha, a designer on my team, works at 400%: she sees about a sixteenth of the screen at once. Anything that happens far from her focus, like a toast in the opposite corner, didn’t happen as far as she is concerned.

Switch access users press one or two physical switches. The software steps through focusable elements, and a switch press activates the current one. If an element isn’t focusable, it can’t be reached at all. Switch users depend on the same keyboard operability you will build in Section 3.

Voice control (Voice Control on macOS and iOS, Dragon on Windows) lets people say “click Book now” or “show numbers”. The software matches spoken words against accessible names. When a button reads “Book seats” on screen but has aria-label="cta-primary", the words Dina says don’t match the name and nothing happens. WCAG calls this Label in Name: the accessible name must contain the visible text.

Showing it to the tree, not the eye

Two patterns cover most cases on Ticketly.

When a visual cue carries meaning that has no text, add text that only the tree sees. Ticketly marks a sold-out date with a strike-through and grey colour. A screen reader announces “SAR 180” and Samir happily tries to buy it. Add a visually-hidden note:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

<p class="price sold">SAR 180 <span class="visually-hidden">(sold out)</span></p>

When an element is decorative, hide it from the tree. Ticketly puts a small calendar icon before every date. Inline SVGs can be announced as “image” or “graphic”, which is noise. aria-hidden="true" removes them:

<p class="date"><svg class="icon" aria-hidden="true" viewBox="0 0 16 16">…</svg> 12 June, 8 pm</p>

The tree is the contract between your code and every AT. Next you will see the standard that defines what that contract must include: WCAG 2.2.