Simulate blindness when testing a11y

During an accessibility review, I used a new technique to simulate blindness. It improves my accessibility testing and maybe it can help you too.

How I typically conduct a review

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:

Step 1. Hide the page content

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

*:not(html) { opacity: 0 !important; }
html { background-color: black; }

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.

Step 2. Hide the url

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.

← All blog posts

Also in love with the web?

For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?

Join our team