Accessibility Testing with Chrome Extensions
Accessibility testing is considered an important part of software testing. Accessibility testing ensures that your software is accessible and usable to all kinds of people, regardless of their abilities. This includes people with disabilities like hearing loss, blindness and color blindness but also people of old age with decreased motor skills and other disadvantaged groups, like people suffering from ADHD and other mental conditions. Today, many public organizations have strict accessibility regulations to make sure that their public services are available to these groups.
There are many different tools for accessibility testing and tools to evaluate the accessibility of a user interface, but in this blog post I would like to focus on two tools, Funkify and Wave. I chose these tools to compare because both of them are available as easy-to-use Chrome extensions. As most modern software has a web UI, this makes them very useful for quickly evaluating the accessibility of a website.
Funkify has a unique approach to accessibility testing: it describes itself as a disability simulator. That makes immediate sense as soon as you start the extension on a testable website. Funkify offers different simulators, such as cognition simulator, dyslexia simulator, motor simulator and vision simulator, that can be turned on and off. If you turn on the dyslexia simulator, suddenly all the text on the website starts scrambling and moving around. It tries to emulate how the dyslexic view the world and provide the developers insight about how to structure the textual components of their UI.
Funkify’s other simulators work the same way. The visual simulators include options for simulating people with decreased visual contrast (lightens or darkens text and webelements), for simulating color blindness (images become tinted with a green hue and all red is removed), for simulating tunnel vision (only showing the center of the page with blackness around). The motor simulator simulates having troubles with navigating by making the cursor shake violently all over the screen. The cognition simulator simulates ADHD by constantly stopping your scrolling with irrelevant popups that take over the screen.
I really like Funkify’s idea of using different personas to represent different kinds of users. It would be easy to create a comprehensive accessibility testing plan by basing it on all these personas and how they interact with the software. However, there should also be some systematic review of all webelements to ensure correct contrast, alternative text and ARIA (Accessible Rich Internet Applications) elements. This is where Wave can provide help.
Wave is more conventional in its view of accessibility testing. Once you start it on a testable website, it opens a sidebar that shows you all accessibility violations it found. Wave lists all found errors, contrast errors, alerts, features, structural elements and ARIA violations. By clicking the details, you can see the breakdown of the results and all the violations appear as icons on the open web page. You can easily navigate the violations by clicking these icons and seeing what bit of code caused them. There is also a reference page that provides information about the violation and why it matters for accessibility.
Wave also provides a view of contrast errors. By clicking the contrast tab, you can see all the contrast errors listed and Wave also calculates the contrast for all of your text elements. It calculates the relationship between the text color and its background color and tells you, if it’s not at the required level of 4.5:1 for normal text and 3:1 for large text. This helps users with bad eyesight to read more easily without strain.
Comparing these two tools, Funkify and Wave, led me to the following conclusion. They don’t really compete with each other as much as I thought beforehand but support different aspects of accessibility testing. Funkify provides a persona-based accessibility view and Wave provides a systematic accessibility aspect view.
Checkout these tools and their websites:
About Tuukka Virtanen
Test automation consultant with technical experience in test automation and quality assurance. TMap Next certified Test Engineer with knowledge in test planning and execution and test design techniques. Master of Science in Information Management. Indie game development as a side project. Creative and visual thinker. The latest assignment included web and mobile game test automation with Appium and Robot Framework in an Agile customer project and regression test automation for websites.
More on Tuukka Virtanen.