Screen Reader

Software that reads the interface aloud for blind and low-vision users.

Also known as: screen reader software, assistive technology

A screen reader is software that speaks the content of a page aloud, or sends it to a braille display. Blind and low-vision users rely on it, and some people with cognitive or reading disabilities use one too. Common examples include NVDA and JAWS on Windows, VoiceOver on macOS and iOS, and TalkBack on Android.

A screen reader doesn’t read pixels. It reads the browser’s accessibility tree, which is built from the DOM and its roles, names and states. If you build a button out of a <div>, the element has no button role. The screen reader typically reads only its text, with no hint that it can be pressed.

<!-- A real button, with a role and a name -->
<button type="button">Save</button>

<!-- Plain text to a screen reader: no role, and nothing says it's clickable -->
<div class="btn" onclick="save()">Save</div>

The classic mistake is assuming a page that looks right works for everyone. Use real elements (<button>, <a>, <label>, headings in order) so the browser provides the right roles and keyboard behaviour. Then test with a screen reader at least once, because the spoken output is often different from what you expected. See accessible forms for a concrete case and focus visibility for keyboard users.