freeeの開発情報ポータルサイト

Why Accessibility Matters: A QA Engineer’s Journey to Inclusive Testing

Hi everyone! I'm Aireen, a QA engineer from the Employee Portal team. We're the ones behind the web application that connects administrators and employees seamlessly across all freee products. Can you believe it? We're already on the twelfth day of the freee QA Advent Calendar 2024—almost halfway through!

Introduction

In today’s digital age, technology has become a part of everyday life, whether we like it or not. For many people, it has opened up countless opportunities and made life easier in so many ways. But for others, having access to technology isn’t enough—it’s something they depend on. I’m speaking for the millions of people with disabilities who still face challenges navigating technologies in the form of websites, applications, and other digital platforms.

We’ve reached a point where making things inclusive isn’t just a nice-to-have—it’s essential. That’s where accessibility testing comes in. It’s about making sure that digital spaces work for everyone, no matter their abilities.

For my first QA Advent Calendar blog, I want to share how I got into accessibility testing. Starting with how I first came across it, the steps I took to learn it including the materials and guides that helped me along the way, and some advice for anyone new to accessibility testing or thinking about giving it a try.

Learning accessibility testing

In 2020, I applied for a Junior QA Tester role at a creative, digital-first agency based in New York. The company focused on crafting highly customized websites and experiences for its clients. After successfully navigating the screening tests and interviews, I was thrilled to land the job.

As I approached my second year with the team, a big change came our way—everyone in the QA team was asked to start learning accessibility testing. My initial reaction was, What is accessibility testing, and why do I need to learn it? It turned out that a new law in New York required state agencies to conform any of their websites to the most current version of the Web Content Accessibility Guidelines adopted by the World Wide Web Consortium for accessibility, in short, to make it accessible to people with disabilities.

Learning accessibility (a11y) was a challenge at first. I had to grasp why it mattered, dive into the principles behind it, study the guidelines tied to those principles, and figure out how to apply them to ever-changing project designs. Like everyone else, I started from square one—understanding the basic principles. From there, I worked my way through the key guidelines under each principle, which helped me categorize and make sense of the details.

I’ll admit, I’m the kind of person who learns best by seeing things in action rather than just reading about them. So, to make it easier, I created presentations and documents to visualize and organize what I was learning. It wasn’t about memorizing every single guideline but truly understanding how each one was meant to be applied. That approach made everything click for me.

Resources That Helped Me Most

I’d love to share some incredibly helpful resources that can make learning and conducting accessibility testing a bit easier. These materials are great for both developers and testers and were greatly helpful while I was still learning the basics of accessibility. Sadly, the ones I made before were in my work account from my previous company, so I cannot be able to share them.

Testing Tools

Landing page of the Employee Portal web app for admin users with the heading text bookmarklet enabled
Landing page of the Employee Portal web app for admin users with the heading text bookmarklet enabled

  • WAVE Evaluation Tool: Another testing tool (Google Chrome extension) that helped me a lot back in my previous company

Landing page of the Employee Portal web app for admin users with the WAVE Google Chrome extension toggled for testing
Landing page of the Employee Portal web app for admin users with the WAVE Google Chrome extension toggled for testing

Websites
  • Magenta A11y: A fantastic resource with sample codes, guides for checking guidelines based on success criteria, and tips for verifying whether an issue is valid or not:
    • Demos
    • Native Elements - Helps in identifying and understanding the success criteria for common web components
    • How To Test Unclear Issues - This might not apply to us directly since we can reach out to our a11y ask channels in Slack, but can also be helpful in knowing what to do with edge-cases
  • A11y Style Guide: This is somewhat similar to Magenta A11y, as this site also offers easy-to-follow style guides for common web components too!

A Bit of Advice

I’d like to extend my sincere appreciation for Vibes, freee’s component-based design system, which has been integral to the majority of the services I’ve worked on. Its centralized approach has been invaluable, especially for testers, simplifying the process and making accessibility testing much more manageable.

I don’t see or classify myself as an a11y champion or subject matter expert because there’s still a lot of things for me to learn. But in my opinion, accessibility is about helping people—including those with disabilities—in small but meaningful ways, one improvement at a time. While developers are the ones directly making changes in the code, I always approach testing with this question in mind: How will this make someone’s experience better? It’s about the little details that add up to a big difference. I hope this blog and these resources will be useful to you. Thanks for reading, and happy testing!

The article, From SQL Developer to QA Engineer: Shifting from Database Development to API Testing, written by Kimberly Pabilona, the QA engineer of EMP Growth team, will be published tomorrow. Please look forward to it!

よい品質を〜

Let’s keep good quality~