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.

Happy a11y testing!

← Alle blogposts

Ook verliefd op het web?

Technologie en gebruikservaring. Snel, toegankelijk en een plezier om te gebruiken. Maar ook een plezier om te ontwikkelen. Geldt dit ook voor jou?

Kom ons versterken