Screen Reader
Software that turns an interface into speech or braille for people who can't see the screen, which navigates by structure rather than reading top to bottom, and exposes every shortcut a sighted design took.
A screen reader is software that conveys what's on a screen through synthesized speech or a refreshable braille display. It's the primary way blind people use computers and phones, and it's also used by people with low vision, dyslexia, and some cognitive disabilities. Major options include JAWS and the free NVDA on Windows, VoiceOver built into Apple devices, and TalkBack on Android.
Screen reader users rarely listen to a page from top to bottom. They navigate by structure: jumping between headings, landmarks such as the main content or navigation, links, form fields, and tables. Surveys of screen reader users consistently find that navigating by headings is the most common way to find content on a long page. Experienced users also speed speech up far beyond conversational rates, skimming by ear much as sighted people skim by eye.
To do this, the screen reader doesn't read pixels. The browser builds an accessibility tree from the page's Document Object Model: a parallel structure listing each meaningful element's role (button, link, heading), name (its label), and state (expanded, checked, disabled). The screen reader reads that tree through the operating system's accessibility interfaces. Everything it can say comes from there.
That makes markup decisive:
- Semantic elements carry meaning for free. A real
<button>is announced as a button, is focusable, and responds to the keyboard. A<div>styled to look like one is announced as nothing; see Semantic HTML. - ARIA fills gaps where no native element fits, such as tabs or comboboxes, but it only changes what's announced, not behavior; see ARIA.
- Images need text alternatives. An image without alt text is announced by file name or skipped. An icon-only button needs an accessible name; see Iconography.
- Labels must be connected. A form field's visible label has to be programmatically tied to the field.
Dynamic interfaces add failure modes:
- Route changes. When a Single-Page Application swaps content without a page load, nothing tells the screen reader, so focus must be moved deliberately; see Focus Management.
- Modals. Focus should move into a dialog and stay there until it closes; see Modal Dialog and Focus Trap.
- Updates. Messages that appear without focus moving, such as a saved confirmation, need a live region to be announced; see Toast Notification.
- Visual order. Content rearranged by CSS is still read in source order; see Flexbox.
Automated checkers catch only a minority of these problems. The reliable test is to use a screen reader yourself, keyboard only, eyes off the screen, and try to complete a real task. It quickly shows whether the interface has structure or only appearance, the gap that Accessibility work tries to close.
See also3
Alt Text
The short text that stands in for an image for people who can't see it, read aloud by screen readers and shown when images fail, which works best when it describes what the image is for rather than what it looks like.
Design & Interface10 connections
Accordion
A stack of headings that each expand to reveal a section of content, saving space on long pages and small screens at the cost of hiding what readers might have needed to see.
Design & Interface12 connections
HTML
The markup language every web page is written in, invented at CERN around 1990 as a simple way to tag documents and link them, and grown by thirty years of browser competition into an application platform.
Web Platform12 connections
Linked from17
- AccordionDesign & Interface
A stack of headings that each expand to reveal a section of content, saving space on long pages and small screens at the cost of hiding what readers might have needed to see.
- Alt TextDesign & Interface
The short text that stands in for an image for people who can't see it, read aloud by screen readers and shown when images fail, which works best when it describes what the image is for rather than what it looks like.
- BreadcrumbDesign & Interface
The short row of links near the top of a page that shows where it sits in a site's hierarchy, such as Home › Shoes › Running, letting people orient themselves and step back up a level in one click.
- CarouselDesign & Interface
A panel that rotates through several slides in one spot, popular on home pages as a way to give everyone's content top billing, and notorious for low engagement and accessibility problems.
- Data TableDesign & Interface
Rows and columns of values designed for looking things up and comparing exact figures, which read best with right-aligned numbers, light rules, and headers that stay put, and remain one of the hardest components to make work on a phone.
- Date PickerDesign & Interface
An interface control for entering a date, usually a calendar grid, which suits booking next week's appointment and frustrates anyone entering a birthday, with time zones and regional formats hiding classic bugs underneath.
- EmojiDesign & Interface
Picture characters encoded in Unicode, born on Japanese phones in the late 1990s, drawn differently by every platform, and built from sequences of code points that break naive string handling.
- FlexboxDesign & Interface
The CSS layout mode for arranging items along one axis, distributing space and aligning them without floats or hacks, which finally made vertical centering trivial and powers most component layouts.
- Focus TrapDesign & Interface
Confining keyboard focus inside a modal surface so it cannot wander behind it.
- Form ValidationWeb Platform
Checking what people type into a web form before accepting it, done in the browser for fast feedback and on the server for safety, and harder than it looks because real names, addresses, and numbers break simple rules.
- HTMLWeb Platform
The markup language every web page is written in, invented at CERN around 1990 as a simple way to tag documents and link them, and grown by thirty years of browser competition into an application platform.
- Optical Character RecognitionAgents & Language Models
Turning images of printed or handwritten text into machine-readable characters, from template-matching machines for the blind to neural models that read whole documents, and why it still fails on the hard cases.
- Shadow DOMWeb Platform
An encapsulated DOM subtree whose styles and structure are isolated from the rest of the page.
- Single-Page ApplicationWeb Platform
A web app that loads one HTML page and then rewrites it with JavaScript as the user navigates, trading a slower, heavier first load for app-like transitions afterwards.
- Text TruncationDesign & Interface
Cutting text that doesn't fit and marking the cut with an ellipsis, a layout convenience that hides information, breaks in other languages, and needs care to stay accessible.
- Toggle SwitchDesign & Interface
An on-screen control for a single on-or-off setting that takes effect immediately, borrowed from light switches, distinct from checkboxes and radio buttons, and notorious for leaving people unsure which state it is in.
- Virtual ScrollingWeb Platform
Rendering only the rows of a long list that are on screen and recycling them as the user scrolls, so a list of a million items costs about as much to display as a list of thirty.