Accessibility audit through team empathy sessions
One of HubSpot’s core values is inclusion, and that means the product should be built in a way that's accessible to all customers, visitors and potential future users. As product creators, we have a responsibility to make sure the tools we build are usable for all customers. And digital accessibility is crucial for creating a truly inclusive world for everyone.
Many people think that accessibility only matters to people with permanent disabilities, but that fails to recognize those because of temporary or situational disabilities.
It’s up to each product team to thoughtfully prioritize accessibility objectives as we manage needs from across the business. Accessibility can be hard to incorporate into our day-to-day workflows because it often feels overwhelming to learn about and hard to understand what’s needed for proper accessibility. Yet, it’s fundamental to an inclusive product, so our team decided to find out how we could bring accessibility into our process.
Getting started
Marketing Orchestration UX designers kick-started an accessibility audit of their product areas. This process began by conducting accessibility-focused empathy sessions with the teams within Marketing Orchestration to improve the group’s awareness of accessibility best practices and to assess our products accessibility capabilities. We chose to use empathy sessions as a way to audit the product’s accessibility because it’s something that’s easy to coordinate and each UX designer could run the session with their own team.
Creating the empathy session
The UX team decided the focus of the first accessibility empathy session would be navigating and using our product with screen reader software. We chose to focus on screen-reader software because it’s easy to access (everyone has a built-in screen reader on their computer) and it’s relatively easy to grasp how to use a screen reader compared to other assistive technologies like speech input software.
We met as a UX squad to decide on the goals for the accessibility empathy session:
Goal: bringing awareness and empathy of accessibility needs to the teams and getting buy-in (that was the easy part!)
Creating a sustainable process for improving the accessibility of the product areas.
Running the empathy sessions to find issues and commit to fixing these issues with the team.
We spent time completing desk research and bringing together useful resources that'd make up a presentation that'd be used to open up a conversation with the team about accessibility.
The research and resources allowed us to put together some slides on the importance of accessibility and basic information on accessibility tools. After we compiled the information that we wanted to share with the teams, we then began to scope the empathy sessions. We chose to make the task for the empathy session a core flow/well-known area of our respective product areas. The goal of this session was to make everyone on the team aware and more comfortable with using assistive technology.
Running the empathy session
Each designer was responsible for scheduling the empathy session with their team along with putting together tasks that'd be completed on the day. Before the sessions, we scheduled a dry run for each UX designer to make sure they had a firm understanding of the content we were collectively presenting along with being comfortable using the screen reader. We were conscious not to put ourselves forward as the experts in this area, simply the starters of the conversation, with the goal that everyone would learn together through this process. The sessions were an hour long to give the UX designer enough time to present the accessibility overview and then for everyone to spend time digging into using a screen reader.
What we learned
Running the empathy sessions was a great experience. The teams each gained perspective around accessibility and screen readers. We also learned that some of our coworkers have experience with implementing accessibility in the past, so that was helpful when it came time to go through the findings from the empathy sessions. We created notes documents that folks could add any accessibility issues found.
Example of the empathy session notes doc
After the session, the UX designers met to debrief on the issues that were uncovered during the empathy sessions. In total, there were over 40 accessibility bugs or issues that the Marketing Enablement and Campaigns teams uncovered. Each designer then met with their FE engineer counterparts to talk through the issues found, scope the issues, and prioritize them. After issues were prioritized, the FE engineers created corresponding issues on Github. Once those issues were resolved on the Enablement and Campaigns team, some of the FE engineers met with the UX designers to create an accessibility-focused checklist that teams can use before they release new features in the product.
The current checklist we are using is the Stark Accessibility Checklist which exists in Figma. This checklist provides useful guidelines and a list of items for PM’s, PD’s and Engineers to consider for each project. Link to figma file checklist. As much of what we build comes from existing components, a lot of the generic guidelines do not apply (as our components have baked in tokens that should be accessible through the CANVAS design system) but nonetheless it is important to double check before any feature goes live. The list will develop as issues arise and we are looking for feedback on what should be standard to look for in the design and engineering of our features.
Plan for the future
In the future, we want to continue to run accessibility empathy sessions with our teams focusing on different flows within our tools along with different assistive technologies. The continued running of empathy sessions will complete an accessibility audit and ultimately improve the accessibility of our product. We also want to incorporate the pre-release checklist into bug bashes we have before new features are released to customers. By continuing to keep accessibility as a part of our release process, we hope to build accountability within our group - to create inclusive and usable products for our customers.
Resources:
Other useful resources:
Major checklist of being compliant (has a section on forms as well)
An example of an accessible form (suggest going through this with the voiceover turned on and seeing how it behaves with the tips and errors)
An example of an accessible dropdown (same as above)