# Screen Reader: How It Reads Websites and What It Needs

Source: https://allyway.ai/glossary/screen-reader

A screen reader is assistive software that reads the content and controls of a screen aloud or outputs them on a braille display. It relies on the names, roles and states that a website exposes through the browser's accessibility tree.

A screen reader is software that reads what is on the screen aloud or sends it to a braille display. Blind people and many people with low vision use a screen reader to read websites, fill in forms and shop online – entirely with the keyboard or with touch gestures. It can only announce what the website's code tells it, so missing names and roles leave its users stuck.

## What it means

W3C describes screen readers as one kind of assistive technology: tools that let people who are blind read text through speech or braille. A screen reader does not look at your design. It reads the accessibility tree that the browser builds from your HTML – every element with its name, role and state, such as "Add to cart, button" or "Newsletter, checkbox, not checked".

That is why [WCAG 4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html), a Level A criterion of [WCAG 2.2](https://allyway.ai/regulations/wcag-2-2), matters so much. It requires that name and role of every user interface component can be programmatically determined, and that states and changes are available to assistive technologies. Native HTML controls do this on their own. Custom controls built from `div` and `span` need extra work, usually with [ARIA](https://allyway.ai/glossary/aria).

| Screen reader | Platform | Cost |
|---|---|---|
| VoiceOver | macOS, iOS, iPadOS | Built in |
| TalkBack | Android | Built in |
| Narrator | Windows | Built in |
| NVDA | Windows | Free, open source |
| JAWS | Windows | Paid |

Screen reader users rarely read a page from top to bottom. They jump between headings, [landmarks](https://allyway.ai/glossary/aria-landmarks), links and form fields. A clean heading structure and clear names make that fast; a page of unnamed icons and "click here" links makes it slow.

> **Note:** > **What a screen reader needs from your page**
> Text alternatives for images ([alt text](https://allyway.ai/glossary/alt-text)), an [accessible name](https://allyway.ai/glossary/accessible-name) for every link, button and field, a correct `lang` attribute so the right voice is used, real headings and a logical order.

## Examples

```html title="Example"
<!-- Not announced as a button – the user cannot tell what it does -->
<div class="icon-cart" onclick="openCart()"></div>

<!-- Announced as "Shopping cart, 3 items, button" -->
<button type="button" aria-label="Shopping cart, 3 items">
  <svg aria-hidden="true">…</svg>
</button>

<!-- Announced in the right voice because the language is set -->
<html lang="en">
```

**Do:** Do

Use native HTML elements (`button`, `a`, `label`, `h1`–`h6`, `nav`, `main`). Give images meaningful alt text and hide purely decorative icons with `aria-hidden="true"`. Announce status messages such as "Added to cart".

**Don't:** Don't

Build controls from plain `div` elements, put important text only in images, rely on color or position ("click the green button on the right") or hide focusable elements with `aria-hidden`.

## How to test with a screen reader



## Questions

Q: Who uses a screen reader?
A: Mostly blind people and people with severe low vision, but also some people with dyslexia or cognitive disabilities who prefer listening to reading.

Q: Which screen reader should I test with?
A: Test with what your visitors use: NVDA or JAWS with Chrome or Firefox on Windows, VoiceOver with Safari on Apple devices, TalkBack on Android. One desktop and one mobile screen reader cover most problems.

Q: Does a screen reader read images?
A: Only through their alt text. Without it, it announces the file name or skips the image. Decorative images should have an empty `alt=""` so they are skipped on purpose.

Q: How do I find screen reader problems without testing manually?
A: Automated checks find a large share of the technical causes – missing names, missing alt text, missing language. The [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) checks your homepage against WCAG 2.2 AA; a manual test then shows whether the page also makes sense when heard.