Skip to main content

The process of building modern software has as the main focus functionality. As a tester, you need to make sure that a user story fulfills all the acceptance criteria, that a specific business flow works as expected, and that in the end, the business side is happy with the implementation 💪

In general, only after the functional requirements have been checked does the focus switch to the nonfunctional side and address areas such as security and performance.

Even if focusing on functionality does lead to making the business side happy, it is my opinion that there should be a bit of a focus switch when doing the testing, a focus on the user. At the end of the day, the goal of businesses is to have their software be used by as many users as possible and to be accessible to as many users as possible.

The Importance of Accessibility Testing

The type of testing that has the purpose of confirming that an application is usable for as many people as possible, including people with disabilities such as vision impairment, hearing problems and cognitive conditions is called accessibility testing. And making sure that this testing is done is part of our duty as testers.

The importance of doing accessibility testing becomes more and more clear considering that, according to the World Health Organization, in 2021 there were over 1 billion people that lived with some form of disability.

As stated above there are different types of disabilities that should be checked in the spectrum of accessibility testing. However, for the remainder of this article, we are going to focus on the topic of vision problems and simulating them in Chrome.

Vision Problems

In the era of computers, smartphones, on-demand television, and advertising, eye problems are becoming more and more a problem since more and more people suffer from a form of vision impairment.

The World Health Organization (WHO) estimates that 314 million people have visual impairment worldwide, with the most common types being blurry vision or a color spectrum deficiency (having trouble seeing a specific color).

No Extra Tools Are Needed, Chrome is Here 

You might think that for simulating the most common vision problems you need to install special software on your computer or browser add-ons, but the good news is that you only need Chrome and to follow a few simple steps to be able to check this 🔍 Allow me to demonstrate:

The Test Image

In order to show that the process works and also allow you to follow along, I will use the below image as a reference. You can find the URL of the image below:

Colorblind test

Source: https://www.ocli.net/blog/vision-news-new-glasses-aim-to-correct-color-blindness/

Activate the Google Option For Emulation

To activate the emulation feature in Google, the following steps need to be taken:

  • Open the above page and click on F12 to open the Developer Tools
  • Click on the context menu (three dots) in your developer tools
  • Select More tools

Google Chrome More Tools

  • Select the Rendering option

Rendering in Chrome

  • That should add a new menu tab to the developer tools

Dev Tools Rendering

Emulation Types

Now that we have the Rendering tab active, we need to navigate all the way down in the tab until we see the section Emulation vision deficiencies. Per default the option No Emulation will be selected.

Emulation types

If we want to emulate a specific deficiency we just need to select a value from the drop-down and the page will automatically render with the specific vision deficiency. In the following we will see how our test image will look with each available option:

  • Blurred Vision

Simulating blurred vision problems in Chrome

  • Protanopia– Red-Green color blindness

Simulating Protanopia in Chrome

  • Deuteranopia– Red-Green color blindness

Simulating Deuteranopia in Chrome

  • Tritanopia– Blue-Yellow color blindness

Simulating Tritanopia in Chrome

  • Achromatopsia– a rare non-progressive inborn hereditary visual disorder. It is characterized by complete or incomplete color blindness, extreme light sensitivity, and very low visual acuity

Simulating Achromatopsia in Chrome

Conclusion & Next Steps

As you can see, the Google vision emulation applies the selected option to all the elements of the site and not just to the images. What this means is that you can on the one hand still check your website from a functional point of view, while at the same time checking for issues from a vision impairment perspective ✅

The process of building modern software has as the main focus functionality. As a tester, you need to make sure that a user story fulfills all the acceptance criteria, that a specific business flow works as expected, and that in the end, the business side is happy with the implementation 💪

In general, only after the functional requirements have been checked does the focus switch to the nonfunctional side and address areas such as security and performance.

Even if focusing on functionality does lead to making the business side happy, it is my opinion that there should be a bit of a focus switch when doing the testing, a focus on the user. At the end of the day, the goal of businesses is to have their software be used by as many users as possible and to be accessible to as many users as possible.

The Importance of Accessibility Testing

The type of testing that has the purpose of confirming that an application is usable for as many people as possible, including people with disabilities such as vision impairment, hearing problems and cognitive conditions is called accessibility testing. And making sure that this testing is done is part of our duty as testers.

The importance of doing accessibility testing becomes more and more clear considering that, according to the World Health Organization, in 2021 there were over 1 billion people that lived with some form of disability.

As stated above there are different types of disabilities that should be checked in the spectrum of accessibility testing. However, for the remainder of this article, we are going to focus on the topic of vision problems and simulating them in Chrome.

Vision Problems

In the era of computers, smartphones, on-demand television, and advertising, eye problems are becoming more and more a problem since more and more people suffer from a form of vision impairment.

The World Health Organization (WHO) estimates that 314 million people have visual impairment worldwide, with the most common types being blurry vision or a color spectrum deficiency (having trouble seeing a specific color).

No Extra Tools Are Needed, Chrome is Here 

You might think that for simulating the most common vision problems you need to install special software on your computer or browser add-ons, but the good news is that you only need Chrome and to follow a few simple steps to be able to check this 🔍 Allow me to demonstrate:

The Test Image

In order to show that the process works and also allow you to follow along, I will use the below image as a reference. You can find the URL of the image below:

Colorblind test

Source: https://www.ocli.net/blog/vision-news-new-glasses-aim-to-correct-color-blindness/

Activate the Google Option For Emulation

To activate the emulation feature in Google, the following steps need to be taken:

  • Open the above page and click on F12 to open the Developer Tools
  • Click on the context menu (three dots) in your developer tools
  • Select More tools

Google Chrome More Tools

  • Select the Rendering option

Rendering in Chrome

  • That should add a new menu tab to the developer tools

Dev Tools Rendering

Emulation Types

Now that we have the Rendering tab active, we need to navigate all the way down in the tab until we see the section Emulation vision deficiencies. Per default the option No Emulation will be selected.

Emulation types

If we want to emulate a specific deficiency we just need to select a value from the drop-down and the page will automatically render with the specific vision deficiency. In the following we will see how our test image will look with each available option:

  • Blurred Vision

Simulating blurred vision problems in Chrome

  • Protanopia– Red-Green color blindness

Simulating Protanopia in Chrome

  • Deuteranopia– Red-Green color blindness

Simulating Deuteranopia in Chrome

  • Tritanopia– Blue-Yellow color blindness

Simulating Tritanopia in Chrome

  • Achromatopsia– a rare non-progressive inborn hereditary visual disorder. It is characterized by complete or incomplete color blindness, extreme light sensitivity, and very low visual acuity

Simulating Achromatopsia in Chrome

Conclusion & Next Steps

As you can see, the Google vision emulation applies the selected option to all the elements of the site and not just to the images. What this means is that you can on the one hand still check your website from a functional point of view, while at the same time checking for issues from a vision impairment perspective ✅

This is a very insightful and necessary perspective on software testing, particularly around accessibility. It’s crucial to keep the user at the center of the testing process, and as you rightly pointed out, accessibility is often overlooked until later stages, even though it's essential for making software truly usable for all.

The statistics you shared on vision impairments highlight the importance of ensuring that our applications are accessible to everyone, including those with disabilities. The good news is that we don’t need complex software to simulate vision problems for testing. Chrome’s built-in developer tools provide an easy and effective way to test how your website will appear to people with different visual impairments, making it simple to ensure accessibility without additional tools or installations.

Your step-by-step guide on how to simulate various types of vision deficiencies in Chrome is extremely helpful. It’s a great reminder that accessibility testing should be part of the regular testing process, not an afterthought. By incorporating accessibility checks alongside functional testing, we can ensure that our applications are inclusive, improving user experience and broadening the reach of our software.

Thank you for sharing such practical insights!


Reply