---
title: Simulate blindness when testing a11y
description: A handy technique to simulate blindness and improve accessibility testing.
language: English
url: 'https://voorhoe.de/en/blog/simulate-blindness-when-testing-a11y/'
---

Blog

# Simulate blindness when testing a11y

By [Peter](/en/team/peter.md)

17 February 2021

## Categories

* [Accessibility](/en/blog/tag/accessibility.md)

- [How I typically conduct a review](#how-i-typically-conduct-a-review)
- [Step 1. Hide the page content](#step-hide-the-page-content)
- [Step 2. Hide the url](#step-hide-the-url)

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:

[play video](https://vimeo.com/513101670)

[Screenreader used by a sighted user](https://vimeo.com/513101670)

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](https://www.youtube.com/watch?v=iUCYPM6up9M).

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](https://voorhoede.github.io/a11y-viewer/?vision=blindness\&color=normal\&keyboard-only=\&url=wikipedia.com), or the A11Y - Color blindness empathy test browser extension for [Chrome](https://chrome.google.com/webstore/detail/a11y-color-blindness-empa/idphhflanmeibmjgaciaadkmjebljhcc) and [FireFox](https://addons.mozilla.org/en-US/firefox/addon/a11y-color-blindness-test/).

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](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe)) 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](https://addons.mozilla.org/en-US/firefox/addon/fullscreen_plus/).

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.

[play video](https://vimeo.com/513101707)

[Screenreader used by a sighted user while the page content is hidden](https://vimeo.com/513101707)

## Related blog posts

* ### [Improving accessibility for the blind: 8 guidelines](/en/blog/improving-accessibility-for-the-blind-8-guidelines.md)
  27 Dec 2016

  By Bas
* ### [Testing Accessibility on Windows with VirtualBox](/en/blog/testing-accessibility-on-windows-with-virtualbox.md)
  18 Sep 2019

  By Bas
* ### [Why skip-links are important for accessibility](/en/blog/why-skip-links-are-important-for-accessibility.md)
  23 Mar 2021

  By Bas

[← All blog posts](/en/blog.md)

## 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](/en/jobs.md)

[Return to top](#top)