Skip to content
UX Atlas
Plate A11Y·005 · AccessibilityGrid A4 · Rev. 2026-09-14

Screen Readers

Software that reads the interface aloud, navigating by structure rather than by layout.

AccessibilityCraft conventionIntermediate

Definition

A screen reader converts the accessibility tree into speech or braille. Users navigate by headings, landmarks, links, form controls and tables, which makes semantic structure the primary interface rather than the visual layout.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2How people actually navigate
  3. 3Common pairings to test against
  4. 4A twenty-minute pass with no prior experience
  5. 5Working with assistive technology in mind
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Testing a release.
  • Building custom components.
  • Reviewing semantic markup.

Common mistakes

  • Testing with only one screen reader.
  • ARIA applied where native semantics would work.
  • Visual structure that does not match the DOM order.
  • Assuming automated tools catch screen reader problems.

How people actually navigate

  • By headings, which is the most common way of exploring a page. Correct heading levels are therefore navigation.
  • By landmarks: header, nav, main, aside, footer.
  • By pulling up a list of all links, which is why link text must make sense out of context.
  • By form control, in forms mode.
  • By table row and column, when the table markup is correct.

Common pairings to test against

Screen readerPlatformUsual browser
NVDAWindowsFirefox or Chrome
JAWSWindowsChrome
VoiceOvermacOSSafari
VoiceOveriOSSafari
TalkBackAndroidChrome

A twenty-minute pass with no prior experience

Enough to find the failures that matter, without pretending to be a substitute for testing with people who use this daily.

  1. 1

    Turn one on and learn four keys

    Start, stop, next heading, next form field. VoiceOver on macOS and NVDA on Windows both need less setup than teams expect.

  2. 2

    Listen to the heading list

    If the outline does not describe the page, the structure is wrong. This takes thirty seconds and is the highest-yield check.

  3. 3

    Tab through every control

    Anything announced as button with no name, or as clickable, is a defect. Unnamed icon buttons are the most common finding in any product.

  4. 4

    Complete one form

    Listen for whether each field announces its label, its format hint and its error. Errors are where most forms go silent.

  5. 5

    Trigger one state change

    Save something, filter something, delete something. If nothing is announced, the live region is missing or was added at the same moment as the message.

  6. 6

    Write down what you heard

    Quote the announcement verbatim in the defect. It is far more actionable than a description of what should have happened.

Working with assistive technology in mind

Do

  • Use the native element, and add ARIA only for what the native element cannot express.
  • Give every control a name that matches its visible label.
  • Keep link text meaningful out of context, since links are commonly read as a list.
  • Test with at least one screen reader and browser pairing that people actually use together.

Do not

  • Do not add role attributes to elements that already have that role.
  • Do not hide content from assistive technology that sighted readers can see, unless it is genuinely decorative.
  • Do not use aria-hidden on anything focusable, which produces a control that exists for the keyboard and not for the screen reader.
  • Do not treat a clean automated scan as evidence that a screen reader experience works.

Local chart

A11Y·005 · Region V · Grid A4

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Heading StructureA11Y·006 · DEPENDS ONNVDATOOL·035 · OFTEN USED WITHVoiceOverTOOL·036 · OFTEN USED WITHAccessibility ChecklistCHK·002 · CHECK YOUR WORKAccessibility (a11y)TERM·072 · SHORT DEFINITIONAlt TextTERM·080 · SHORT DEFINITIONARIATERM·074 · SHORT DEFINITIONAssistive TechnologyTERM·075 · SHORT DEFINITIONLive RegionTERM·079 · SHORT DEFINITIONScreen ReaderTERM·076 · SHORT DEFINITIONAccessible NamesA11Y·008 · RELATED CONCEPTAlt TextA11Y·007 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]
  2. [2]

    WebAIM Screen Reader User Survey

    WebAIM

    Periodic survey of how screen reader users actually navigate.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A Data TableA Mobile AppAn AI Product

Depends on

Get these right first, or this one will not hold.

  • Heading StructureA11Y·006 · Accessibility

    Headings are the primary way screen reader users skim a page.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.