Screen Readers

A screen reader is software that reads the contents of a screen aloud using
synthesised speech or outputs it to a refreshable braille display. Screen
readers are used primarily by people who are blind or have severe visual
impairments, as well as by some users with cognitive or learning disabilities.
They are also used by developers and accessibility testers to verify that
interfaces work correctly with assistive technology.
^[1]

How screen readers work

Screen readers do not read what is visually rendered on screen. They read
the accessibility tree — a structured representation of the page built from
the DOM, ARIA attributes, and computed styles. This means:

• Visually hidden content that remains in the accessibility tree is read aloud
• Content hidden with display: none or visibility: hidden is not read
• CSS-generated content via pseudo-elements may or may not be announced
• The visual order of content is irrelevant — reading order follows DOM order

^[2]

Major screen readers

Navigation modes

Screen reader users navigate pages in several modes. Understanding these
helps developers build interfaces that work correctly in each:

Reading mode (browse/virtual mode): The screen reader reads content
linearly, and arrow keys move through the document. Most content is
consumed this way.

Forms mode (application/interaction mode): Activated when focus enters
a form or interactive widget. Keystrokes are passed to the page rather
than intercepted by the screen reader.

Navigation shortcuts: Screen readers provide single-key shortcuts to
jump between elements by type. Common shortcuts vary by screen reader:
^[3]

Testing with screen readers

When testing with a screen reader, verify:

• Every interactive element is reachable and announced correctly
• Dynamic content updates are announced via live regions
• Modal dialogs trap focus and are announced on open
• Images have meaningful alt text or are marked decorative
• Form inputs have associated labels that are announced on focus
• Error messages are programmatically associated with their inputs

Test with at least NVDA on Windows with Firefox or Chrome, and VoiceOver
on macOS with Safari — these represent the most common real-world combinations.
^[1]

References

1. WebAIM. Screen Reader User Survey. https://webaim.org/projects/screenreadersurvey10/ ↑
2. MDN Web Docs. Accessibility tree. https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree ↑
3. Deque University. Screen Reader Keyboard Shortcuts and Gestures. https://dequeuniversity.com/screenreaders/ ↑