advocating and applying accessibility to Transportation FARE MANAGEMENT

Overview

We partnered with a company that combines 7 different transit options within the Puget Sound area into a single payment system. They needed us to modernize their website, but also create an app that riders could use to manage their account and use as payment when they board a bus, light rail, water taxi or ferry. We knew that accessibility should be front of mind on this project since the rider base consists of riders with a range of abilities.

My role

This was a two-phase project spanning 4 years – website and consumer app.  During phase one I was a UX designer on a team of 6 designers. On phase two, I co-led the project with Chris Hannon. During both phases, I was the accessibility lead for the team of designers and developers.

Accessibility woven in from beginning to end

Planning & Discovery – Determine early on how we would weave accessibility into every phase of the project and set the team up with training and guidelines for how we would achieve that goal.

UX & Design – Clear hierarchy, large tap targets, simple to understand language, and minimal design contributed to an easy and intuitive experience for all.

Testing – We tested with users of all abilities to uncover usability and accessibility issues and fix them prior to launch.

QA – Once the app was developed, we tested the app using automated tools as well as doing a manual audit to determine if the app was functional from an accessibility standpoint.

planning and discovery

Planning – Determine what level of accessibility needed to be met from a legal standpoint and create a plan for how accessibility would be achieved. What will we do, how will we do it, and which guidelines are we following?

Training – Find out the level of accessibility knowledge throughout the team and hold training sessions to make sure we understood what WCAG 2.1 AA standards were and how to meet this level. This also includes at the stakeholder level as well – teach them why they should care.

Research – Interview users of all abilities to gain first-hand knowledge of how they interact with transit apps.

Externalize – Archetypes were created to represent a vast array of rider types including riders that had vision or cognitive impairments. We also created design principles specific to this project that helped keep the team aligned and focused on accessibility – ie. Keep it simple

UX & Design

During the UX and design phase, it was important to ensure foundational elements adhered to WCAG guidelines and were outlined within the design system.

Color contrast – The brand colors were provided by the client, but our team needed to determine which color combinations would provide adequate contrast to be seen with riders that had low vision or color blindness.

Text size and Spacing- Text size and line-height spacing is defined at this stage to increase readability. Spacing between elements is key to ensure riders that have mobility or vision impairments can tap a button or link and not unintentionally select another element.

Hierarchy of elements – Layout of the content and calls to action are important at this stage. We want to purposefully reduce cognitive overload and create a space where it is clear why the user is here and what they should be doing/consuming.

Testing

After usability testing and app updates, we were ready to test the app with blind users to understand how screen readers (VoiceOver and TalkBack) worked on their devices.

Expert Review - Before we initiated the test, we performed an expert review of the app using the assistive technology tools native to iOS and Android devices. Our goal was to fix as many usability and accessibility issues prior to our recruited testers using the app. Our development team then made the recommended fixes and we proceeded to the testing phase.

Testing with users - We recruited users that relied on a range of assistive technology on iOS and Android. After 2 days of remote testing, we were able to synthesize the data, group the findings by severity level, and make clear recommendations about how to improve the app.

Accessibility Quality Assurance

Now that our development team had implemented the recommended changes from the accessibility test, it was time to conduct QA testing on the app. To ensure the app was meeting WCAG criteria,  the best option for testing accessibility was to combine both automated and manual testing. 

QA preparation – We identified the unique template screens and each unique state of a screen so that we could ensure all interactions within the app would be tested on iOS and Android.

Automated testing – For our automated testing we used tools specific to each OS to test for alt text, color contrast, screen titles, form labels and tap target sizing.

Expert manual testing – Since automated testing will only catch a limited number of errors, we also used manual testing to ensure that the app was accessible using a screen reader. We tested for accurate alt text, whether information was presented in a logical order, actual color contrast, form error messaging and consistent navigation.