ScreenreadThis!

Experimental project which tries to find easier ways of learning about screenreader testing - without the need of learning all screenreader operation shortcuts first. No more excuses!

Install and use ScreenreadThis! locally:

git clone https://github.com/mandrasch/screenreadthis.git
cd screenreadthis/
npm install
npm run dev -- --open

Built with SvelteKit and puppeteer retrieving the accessibility tree snapshot.

Online demo

This demo currently runs on a free render.com tier and can be unavailable from time to time. If this demo currently doesn't work, here is a demo video (YouTube) or you can load a static demo example.

Screenread the page elements

Hint: You can also use the keyboard arrow keys.

Current element

Please note: The speech output is generated by the browser via WebSpeech API. A real screenreader software would read this differently. This speech output is just meant for demonstrational purposes of the accessibility tree, not for serious accessibility testing.

Full accessibility tree snapshot (via Puppeteer)

▶ { }

The property 'htmlLangAttribute' is not part of the accessibility tree, it's a custom addition by API server.