Simulate blindness when testing a11y

When I build my projects or do an accessibility review for one of clients, I use the screen reader VoiceOver, which comes with my Mac. Because I have the ability to see, even if I use VoiceOver, I can use my eyes to make a mental model of the page. When I spot an area I want to test with the screen reader, I already know where that element is, and probably how to get there:

This is vastly different from how someone who is actually blind or visually impaired interacts with the page. Léonie Watson (blind herself) has a great example of how she makes that mental model.

To get an experience closer to that of a blind person, we have to simulate blindness for ourselves. There are great tools out there which allow you to simulate various disabilities. Our own A11y Viewer, or the A11Y - Color blindness empathy test browser extension for Chrome and FireFox.

For a quick and dirty solution, I used this method:

For the content of the page, we can load a small bit of css:

I use a browser extension (Stylish) to apply this css to the page. You could also drop it directly in the page, but having a browser extension do it allows me to quickly turn it on or off on any site.

Hiding the url makes sure I really don’t know where I am on the website. To do that, we can enter fullscreen mode. In Chromium-based browsers and Safari: make sure to toggle off Always Show Toolbar in Full Screen (View > Always Show Toolbar in Full Screen). Firefox does not seem to support this feature out of the box, you can use the Fullscreen Plus Add-on for Firefox.

Now that you can not see anything on the page, you are a step closer to experiencing the web like someone who can not see at all.