I bought the domain accessibleweb.net and set up a page that is fully functional for screen reader users but has a single CSS class that hides all the content from sighted users. I added a visually-hidden class to the
<main> element, then injected the text “Please disable CSS to view this webpage.” after the header with a pseudo selector:
content: "? Please disable CSS to view this webpage.";
My goal is to show that the web is inherently accessible when developers use semantic HTML; it’s bad design that makes the web inaccessible.
Did you know? At the time of this writing, screen readers don’t announce content injected with CSS.
Accessible Web Tool
I found myself wanting to use this tool when I was already reading a webpage so I also created an accessible web bookmarklet that will run the current URL through the tool and return just the HTML. It has the side benefit of getting around some content paywalls.