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.
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:
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
- Select the Rendering option
- That should add a new menu tab to the developer tools
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.
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
- Protanopia– Red-Green color blindness
- Deuteranopia– Red-Green color blindness
- Tritanopia– Blue-Yellow color blindness
- 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
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 ✅