# What a Screen Reader Hears
A screen reader announces each part of a page by its role, its name and its state, all read from your HTML, and the developer tools show you exactly what it will say.
Journeyman · HTML · Web Development · Updated October 31, 2026
## After this lesson you can
- Describe how a screen reader announces an element by its role, its name and its state
- Work out an element's accessible name from its text, its label or its alt text
- Explain why a div styled to look like a button doesn't work as one
## Key takeaways
- The browser builds an accessibility tree from your HTML, and a screen reader reads the page from it.
- Each part of the page is announced by its role (what it is), its name (what it's called) and its state (what it's doing now).
- An element's accessible name comes from its text, its label or its alt text.
- A div styled as a button has no button role, can't be reached with Tab and ignores Enter, so for many people it isn't a button at all.
- The Accessibility pane in the developer tools shows each element's role, name and state.
A bug report comes in: "On the checkout page, my screen reader says *button, button, button* and nothing else." Or a teammate asks why the screen reader skips the "Buy tickets" button completely. To fix either one, you need to know what a screen reader actually hears when it meets your page. This lesson shows you, and once you've heard it, you'll never look at HTML the same way again.
## The page, read aloud
Think of a museum's audio guide. You don't see the paintings through it: you hear "Room 3. Painting. *Sunflowers*, by Vincent van Gogh." It tells you what kind of thing is in front of you, what it's called, and anything you need to know about it right now.
A **screen reader** does that for a web page. While the browser draws the page on the screen, it also builds a second version of it, a list of everything a person can read or use, called the **accessibility tree**. The screen reader reads from that tree, not from the pixels. For each item it says up to three things:
- its **role**: what kind of thing it is, such as a heading, a link or a button;
- its **name**: what it's called, such as "Buy tickets";
- its **state**: what it's doing right now, such as checked or expanded.
Here's a piece of the Starlight Cinema's page, and roughly what a screen reader says for it (each screen reader words it a little differently, and some say the role first):
```html
This Week's Movies
Ticket prices
```
```text
This Week's Movies, heading, level 2
Ticket prices, link
Sign up, button
Send me a reminder, checkbox, checked
```
None of the words in that output were written by hand. The browser worked them all out from the HTML.
## Role: what kind of thing it is
The **role** tells a listener what they can do with something. "Link" means pressing Enter goes somewhere. "Button" means pressing it does something here. "Heading, level 2" means a new part of the page starts. Every HTML element that means something has a role built in:
| Element | Role a screen reader announces |
|---|---|
| `` | link |
| `