--- title: "Screen Reader" url: "https://insideuxdesign.com/en/glossar/screen-reader" language: "en" description: "What is a screen reader and how do blind people use it to browse the web? A plain-language guide with an example and tips. Learn how to test your site with one." published: "2026-10-14T09:50:32+02:00" updated: "2026-10-14T13:06:18+02:00" --- # Screen Reader A screen reader is software that reads screen content aloud or outputs it on a braille display. Many blind and low-vision people use one to operate their computer and phone. - **Buchstabe:** S UX glossary # Screen Reader A screen reader is software that reads screen content aloud or outputs it on a braille display. Many blind and low-vision people use one to operate their computer and phone. Imagine closing your eyes and trying to book a doctor’s appointment on a website. All you hear is a voice reading out what’s on the page, one item after another: “Link. Link. Image. Link. Button.” Where do those links go? What does the image show? And which button books the appointment? That’s how many blind people experience poorly built websites. The tool they use is called a screen reader. ## Explained simply A screen reader is software that translates what’s happening on the screen into speech or braille. The speech output reads text, controls and status messages aloud. Alternatively, the screen reader sends the content to a braille display, a device with small moving pins that form raised dots you can feel. Think of a screen reader as someone describing a website to you over the phone. But they can only tell you what’s in the code. If a button isn’t marked up as a button, or an image has no description, they’re stuck too. ## How people use a screen reader Hardly anyone listens to a website from top to bottom. Instead, people use keyboard shortcuts or swipe gestures to jump around: from heading to heading, through a list of all links, or straight to areas like the navigation and main content. In WebAIM’s Screen Reader User Survey (2023/24, 1,539 responses), 71.6 percent said that on a long page they first navigate by headings. Many experienced users also turn the speech rate way up, often to 300 words per minute or more. The best-known programs are JAWS and the free, open-source NVDA on Windows, VoiceOver on Apple devices and TalkBack on Android. According to the same survey, 91.3 percent of respondents also use a screen reader on a phone or tablet. ## An example Here’s an example: an online cooking magazine has a recipe page with bold lines instead of real headings, links that say “click here” and a magnifying glass icon for search with no label. The screen reader just says “button,” nothing more. Anyone who wants to jump to the ingredients can’t find a heading for them. After the fix, “Ingredients” and “Method” are real H2 headings, the links read “Open lentil soup recipe,” and the icon is announced as “Search.” The page looks exactly the same. But for screen reader users, it can now be scanned in seconds. ## Why it matters Screen readers depend on clean semantics, meaning every element in the code is what it appears to be. Those are exactly the requirements [WCAG](https://insideuxdesign.com/en/glossar/wcag) describes: alt text for images, labeled form fields, a logical heading structure and meaningful link text. Good structure helps everyone, including search engines and people who just skim. To learn how to set up your content that way, read [How to Structure Content the Right Way](https://insideuxdesign.com/en/blog/how-to-structure-content-the-right-way). ## In practice - **Try a screen reader yourself.** VoiceOver comes built into every Mac and iPhone, and NVDA is free for Windows. Just ten minutes on your own homepage will reveal the biggest gaps. For more testing methods, see [Accessibility Testing: Tools and Methods for UX Designers](https://insideuxdesign.com/en/blog/accessibility-testing-tools-and-methods-for-ux-designers). - **Build a clear heading structure.** One H1 per page, with H2 and H3 below it in a logical order. For many screen reader users, headings are the page’s table of contents. - **Write links and buttons that make sense on their own.** “Learn more” ten times in a row helps nobody. Use text that names the destination. ## Related terms [Accessibility](https://insideuxdesign.com/en/glossar/accessibility), [WCAG](https://insideuxdesign.com/en/glossar/wcag), [Microcopy](https://insideuxdesign.com/en/glossar/microcopy) ## Sources - [WebAIM: Screen Reader User Survey #10 Results. WebAIM, 2024](https://webaim.org/projects/screenreadersurvey10/) - [WebAIM: Designing for Screen Reader Compatibility. WebAIM, 2017](https://webaim.org/techniques/screenreader/) - [NV Access: About NVDA. NV Access, 2026](https://www.nvaccess.org/about-nvda/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://insideuxdesign.com/en/glossar/contrast-ratio)