What is a screen reader? A plain guide for site owners

Screen reader meaning in one minute

The phrase covers any program that exposes what an app or web page contains through a channel other than sight. Most people meet it as a voice. Some users listen at a speed that sounds like a blur to a newcomer, often two or three times normal talking pace.

A second output is a refreshable braille display: a small hardware bar with pins that rise and fall to form braille cells. Deafblind users rely on it entirely, and many blind programmers prefer it for code because they can check spelling and punctuation by touch.

You will also see the term screen reader software or screen reader assistive technology. Assistive technology is the wider family: magnifiers, switch controls, voice control and screen readers all belong to it. A screen reader device usually just means a phone, laptop or braille notetaker running one of these programs.

How a screen reader works behind the scenes

The program does not look at pixels. It asks the operating system for the accessibility tree, a simplified copy of the interface that the browser or app builds from your code. Each item in that tree has a role (button, link, heading level 2), an accessible name (the words announced), and a state (expanded, checked, disabled).

That is why code quality matters so much. A styled div that looks like a button but has no role and no keyboard support is invisible as a control. A real button element gives the right role, name and keyboard behavior for free.

<div class="btn">Save</div>

<button type="button">Save</button>

How people move around a page

Sighted readers scan. Screen reader users skim too, just with keys. On a desktop they rarely Tab through every item; they use single letter shortcuts in a reading mode that the program provides.

• Headings: press H to jump to the next heading, or 1 to 6 for a level. Surveys of users keep showing this is the most common way to find content.
• Landmarks: D in NVDA or R in JAWS moves between regions such as header, navigation, main and footer.
• Links list: a dialog that lists every link out of context, which is why "Read more" ten times is useless.
• Form fields: F or E jumps between inputs, and each one should announce its label.
• Tables: T finds a table, then arrow keys with a modifier move by cell while the header is read.

On a phone the same ideas run on gestures: swipe right for the next item, double tap to activate, and a rotor or menu to choose whether swipes move by heading, link or form control.

Who uses screen reader technology

The core group is people who are blind or have very low vision. Others include people with dyslexia who follow along with speech, some people with cognitive disabilities, and people with temporary eye problems. Developers and testers form a smaller but important group: they use a screen reader to check their own work.

Users are not a rare edge case. Every modern phone has one built in, and blind people use banking, food delivery, transport and shopping apps every day. When a checkout button has no name, that customer cannot pay, and they leave.

The main screen readers by platform

For a fuller comparison of the no cost options, see free screen readers by platform. Official help lives with each maker, for example NV Access for NVDA and the VoiceOver user guide.

Guides in this screen reader section

Each guide below covers one product or one task in depth, with commands, settings and a short test routine.

Screen reader mode, icons and settings in apps

Many apps and games have a menu item called screen reader mode or screen reader support. Switching it on makes the app send extra information to the system screen reader: menu items get spoken, focus moves in a predictable order, and decorative motion may stop. In some online editors the option sits under Tools, Accessibility; in games it is usually in the accessibility or audio settings.

A message such as screen reader incompatible on a game or app listing means the publisher has not made the menus readable, so a blind player will hear little or nothing. It is a warning, not a setting you can fix yourself.

The screen reader icon people search for is usually the accessibility symbol (a person in a circle) in settings menus, or a speaker shaped icon. There is no single official icon for screen readers. If you add one to your own interface, give it a text label too.

Online and browser screen readers

People often look for an online screen reader they can open in a tab. That does not really exist. A web page cannot control your whole computer, so a true screen reader has to be installed or built into the system. What you find under that name are text to speech sites and read aloud extensions: they speak the words on a page but do not announce roles, states, headings or form labels.

Those tools are fine for listening to an article. They are not a substitute for testing with a real screen reader, and they do not help a blind user operate menus. The browser screen reader guide explains the difference in more detail and shows how to pair Chrome with a proper one.

Shortcut keys worth memorising

You do not need hundreds of commands to start. These work across most desktop screen readers in their reading mode:

VoiceOver on Mac uses a different scheme built around Ctrl+Option; the Mac guide lists them.

How to make a website work with screen readers

Screen reader compatibility is mostly ordinary good HTML. These habits fix the large majority of problems found in audits:

1. Use one h1 and a logical heading outline that matches the visual design.
2. Wrap regions in header, nav, main and footer so landmark navigation works.
3. Give every meaningful image a short text alternative and decorative ones an empty alt.
4. Connect each input to a visible label; do not rely on placeholder text.
5. Use real buttons and links, and make each link's words describe where it goes.
6. Announce updates such as "added to cart" with a status region instead of moving focus.