Screen reader

Software that speaks the interface aloud (or sends it to a braille display) so people can use a site without seeing it.

screenreaderthe voice that reads the pageblind people's softwaretext to speech for websitesvoiceovernvdajawstalkbackthe thing that reads buttons out loud

See it

Live demo coming soon

What it is

A screen reader turns the interface into speech or braille. The big four: NVDA and JAWS on Windows, VoiceOver on macOS and iOS, TalkBack on Android. Users drive them with keyboard shortcuts or swipe gestures, moving element by element, jumping between headings, landmarks, links, and form fields rather than reading top to bottom.

It does not read your CSS. It reads the accessibility tree: the browser's parallel model built from your HTML elements, their roles, their names, and their states. A div with an onClick handler is announced as nothing in particular; a button is announced as 'button'. That gap is why semantic markup, labels, and alt text matter more than any amount of visual polish.

Gotcha: passing an automated audit is not the same as being usable. Axe and Lighthouse catch roughly a third of real problems and can't hear that your modal announces 'button button button' or that a toast never speaks at all. Spend twenty minutes tabbing through your own app with VoiceOver (Cmd+F5) or NVDA on; it is the fastest way to find what the linter missed.

Ask AI for it

Review this component for screen reader users and fix it. Check that every interactive element has an accessible name, that roles and states (expanded, selected, disabled, current) are exposed, that dynamic updates are announced via an aria-live region, and that decorative markup is hidden with aria-hidden. For each control, list what the accessibility tree should expose after your changes: name, role, state, and description. Then write a manual test script for one named browser and reader pairing (NVDA with Firefox, or VoiceOver with Safari): the keys to press in order, and what each step should convey. Do not invent verbatim speech output you have not observed, since the exact wording differs by reader, browser, and version.

You might have meant

alt textsemantic htmlaccessible namearia labelvisually hidden

Go deeper