What is readable by the screen reader?

Each box has text that is has a class attached to it. Code blocks are unreadable by the screen reader using the attribute aria-hidden="true"

Press Control+Option+A to start reading the page.

No CSS here

This text is visible.

Visibility hidden

Display none!

Positioned, clipped, and (almost) collapsed

This text is positioned, clipped, and (almost) collapsed. It's readable by the screen reader but appears on the screen like display:none

Font size zero!

This text is hidden and readable. It's a wildcard! By setting font-size to 0 pixels, you can't see the text, but whether this text gets read depends on the screen reader. It also may be subjected to search engine penalties and interpreted as malicious. Don't do this!