Accessibility user testing — here’s what we learned
Editor’s Note: Jennifer Lee bridges user experience design with front-end development for the Ontario Digital Service. She has been telling stories through photography and the web since 1996.
At the Ontario Digital Service, we are committed to digital inclusion. This means integrating inclusive design and accessibility measures from the start of a project, as outlined in our Digital Service Standard.
But what does inclusive design look like in action?
As a member of the team that built the new Environmental Registry of Ontario, inclusive, accessible design was part of the fabric that kept us moving forward. Following web standards, doing accessibility checks and audits throughout the process can indeed be helpful, but I often wonder, is it enough?
To help inform our design and development decisions, we invited two visually impaired users to test out the functionality and navigability of the website. We wanted to understand the tools that are used to experience the web, as well as to specifically unearth accessibility issues.
What was tested
The main interactions on the Environmental Registry of Ontario (ERO) are allowing users to register for an account, search, filter and browse through a listing of environmental consultations that are available to the public, and to engage with any consultation that they’ve taken an interest in by leaving a comment.
We asked each user to run through a series of tasks, fully testing out these interactions, and to talk out loud about what they thought about the entire process.
Using the site in high-contrast mode
Our first test participant had low vision and used a high-contrast colour scheme on their computer for better readability.
This participant noted that in the search filters, the browser’s default checkbox and its selected state were easy to miss. They remarked that it wasn’t clear to them if the filter was selected or not.
A light-weight solution
With the magic of CSS, I implemented a very light-weight, cross-browser friendly solution of styling the checkboxes and the checkmark to be larger in size so that these were more visible and prominent on the page.
We shared a prototype of the new checkbox style with our participant, and they confirmed that this change was a big improvement for them!
Using the site using a screen reader and a keyboard for navigation
Our second test participant was a blind user, and they relied on a screen reader and keyboard to interact with the website.
This test participant ran through all of the tasks and interactions with ease. They also developed an understanding of what the Environmental Registry was about, thanks to plain and familiar language improvements that were made to the typically formal, legal language documents.
Our test user was also extremely helpful in making suggestions on how we can improve our front-end code, specifically the WAI-ARIA attributes, so that the end user could have an even easier time understanding what was being read out to them when interacting with specific components, such as the main menu.
When developing a website that is accessible, semantically correct HTML plays a big role in ensuring that all the elements on your page have meaning, and navigating with your keyboard is comprehensive and matches the visual flow of the page.
Learning valuable lessons in the way you design and build products
As a front-end designer and developer, I learn valuable lessons in my work and my approach to what I do when I’m directly involved with user testing, especially accessibility user testing. It’s always an eye-opening and sobering experience!
Through these accessibility user testing scenarios, I learned a lot about:
- the tools that are used when interacting with an online, interactive application, and the behaviours and challenges that go along with it
- the things you can’t discover through only automated testing or browser plugins for accessibility auditing
- what decisions I ultimately make when I design and build a product and who it affects
- testing with users with different needs and requirements and how it takes me out of my comfort zone, opening my eyes to different ways of experiencing
