Testing With a Screen Reader
A beginner-friendly guide to testing your site with VoiceOver and NVDA - what to listen for and the markup that makes pages announce well.
7 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
Pick a screen reader and learn three keys
You don't need expertise to start. On macOS, VoiceOver is built in (Cmd+F5). On Windows, NVDA is free. Learn just enough to navigate: move by element, jump by headings, and list links or form fields. Even a basic pass reveals whether your page tells a coherent story when you can't see it.
macOS: VoiceOver (Cmd+F5)
Windows: NVDA (free) or JAWS
Learn to navigate by element and by heading
List links and form fields to audit structure
What to listen for
Close your eyes and listen. Headings should outline the page logically. Images should have meaningful alt text (or be marked decorative). Buttons and links should announce their purpose, not 'button button'. Form fields need associated labels. Dynamic updates should be announced via live regions. If anything is silent or confusing, fix the markup.
Headings form a logical, nested outline
Images have meaningful or explicitly empty alt
Controls announce a clear purpose
Form fields have associated labels
Semantic HTML does most of the work
Most screen-reader problems come from div-soup that throws away built-in semantics. Use real buttons, links, headings, lists, and landmarks, and reach for ARIA only to fill genuine gaps. Then verify the page still announces correctly across responsive states - a mobile menu built from divs often loses the semantics the desktop nav had.
Prefer native elements over ARIA-on-divs
Use landmarks (nav, main, header, footer)
Add ARIA only where semantics are missing
Re-check announcements in responsive/mobile layouts
Release checklist
A basic screen-reader pass is part of QA.
Headings, alt text, and labels announce correctly.
Native semantic elements are used over div-soup.
Mobile layouts retain their semantics and announcements.
Frequently asked questions
Which screen reader should I test with?
Use VoiceOver on macOS (built in, Cmd+F5) or the free NVDA on Windows. Testing with at least one screen reader, even at a basic level, reveals far more than automated tools about how your page is actually experienced.
What makes a page work well with a screen reader?
Semantic HTML does most of the work: real buttons, links, headings, lists, and landmarks, with meaningful alt text and labeled form fields. Use ARIA only to fill genuine gaps, not to recreate semantics you discarded.
How is alt text supposed to be written?
Describe the image's purpose in context concisely. If an image is purely decorative, give it an empty alt attribute (alt="") so screen readers skip it rather than announcing a filename or redundant description.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.