diagnostic · one of 45 free, no counter
Speech preview
What would a screen reader actually say on this page?
Most developers have never listened to their own page with a screen reader, and the ones who have know it takes an afternoon. This turns the page's roles and accessible names into the sentences a screen reader would speak, in reading order, and marks the ones that would say nothing useful - a button announced only as "button", an image read as its file name, a link called "read more".
Reach it Press ⌘ + K on any tab and type speech preview. Ctrl + K on Windows and Linux
in the panel · free, no counter
What this actually is
what a screen reader would say for each element, in reading orderBefore an accessibility audit, after adding icon buttons, or whenever a design removes visible labels. It is the fastest way to hear what a page sounds like; it does not replace testing with NVDA, JAWS or VoiceOver.
Asked about this diagnostic
3 of themIs this what VoiceOver would say, word for word?
No. Each screen reader words things differently. What is stable across all of them is the line that says nothing at all - a nameless button, an image called IMG_4031 - and that is what this marks.
Does it announce states like expanded or checked?
No. The reading it is built from carries roles and names, not state, so pressed, expanded and checked are not in the transcript. Check those with a real screen reader.
How is it different from Outline?
It uses the same tree. Outline shows it as structure - landmarks and headings; Speech preview shows it as the sentences somebody would hear.
how to use speech preview
- Open Speech preview on the page you want to hear.
- Read the transcript, indented by depth, in the order it would be spoken.
- Switch to Problems only to see the lines that would say nothing useful.
- Copy the transcript to attach it to the issue that fixes them.
96 of these · no host permissions · three free audits