I got the idea for Accessible Web initially from @heydonworks when he arbitrarily updated his website to require users to disable JavaScript before they can view the content—a little tongue-in-cheek poke at all the websites that don’t work without JavaScript enabled. It’s a simple, effective way to further the accessibility and progressive enhancement conversation. It also gave me an idea.
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:
header::after {
font-size: 3em;
color: #fff;
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 quickly got the idea for a semantic web tool, a page where users can enter a URL and get back code stripped of CSS and JavaScript. Using PHP, I fetch the HTML of the requested URL and alter the code before returning the results. It’s a great testing tool for people who don’t have access to web developer tools, or don’t understand them. You can go to any page just by using the syntax: https://accessibleweb.net/tool/?url=https://racheleditullio.com/
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.