Keyboard Focus Indicator

People with limited mobility or vision impairments often rely on a keyboard to navigate by tabbing through one page element at a time. Google Cloud Platform lacked a clear focus indicator, making it hard for users to know where they are on the page, (imagine using a mouse with an invisible cursor). It also prevented the platform from getting the accessibility accreditation required to land major contracts.

Previously, each interactive element had a different focus style, so users couldn’t easily identify where they were on the page. My redesign established an easily recognizable indicator taking the guesswork out of wayfinding.

 MY ROLE

Design lead

I worked shoulder-to-shoulder with my engineering partner to design a platform-wide keyboard focus indicator, making Google Cloud Platform (GCP) usable for those who rely on keyboard navigation and unblocking GCP from earning accessibility accreditation. The design had to balance the Google brand while being visually prominent, and adapt to fit 140 different components.

New problem space

A not-so-quick fix

I was part of a small task force of UX designers focused on improving accessibility on GCP. “Create accessible focus indicator” was one among many other bug fixes—I volunteered to take it on unaware of the months-long project ahead of me. What my team soon realized is that accessibility design is a whole different beast than design for sighted users. The terms, interaction patterns, best practices, and deliverables are different, which can quickly become overwhelming considering how little industry documentation there is. Suffice to say, I was making it up as I went.

Step one was to understand requirements (which weren’t definitive) audit other Google products (which were inconsistent), and analyze competitors (which were surprisingly off-brand or not actually accessible). It was shocking how inaccessible even the “best” digital experiences were.

Because there were so few best-in-class focus examples available, I also conducted an analysis of focus in physical space. I was inspired by the high contrast colors and patterns used in other contexts, but knew I had to translate that to Google’s brand to if I were ever to get it approved for launch.

Eary concepts

Balancing brand & utility

I worked with a visual designer to align on a shortlist of color and line format combinations that I stress tested by applying them to a range of platform components. Shades of purple or orange shown as dotted lines offered the most stylistic contrast against the Google brand, but were such a departure that they didn’t feel purposeful.

After gathering feedback from the central accessibility team, and from various Cloud product teams, I landed on three variations to run through accessibility testing with actual keyboard navigation users.

User Research

Accessibility testing

While all the test variants were technically accessible, we set out to understand which was the most usable. A solid blue outline was the safest option in terms of getting buy-in because it was most stylistically similar to its surroundings. Meanwhile, a dashed line and purple color would be unique, which I hypothesized could make it stand out more. A hypothesis that was ultimately proven wrong.

I worked with my engineering partner and UX research partner to create the stimuli for the test—participants installed a plugin that would simulate the focus style on a mock GCP screen. Seven participants with mobility or vision impairments completed tasks with each variant in random order. Variant one with a solid blue line was strongly preferred because it had the highest visual density. Knowing that would also be the most on-brand, the choice was easy.

Scaling & Specifications

Solving every edge case

There were 140 components in the Cloud Design System at the time; everything from standard buttons and links, to components that were unique to GCP. The focus indicator had to elegantly adapt to each one. I documented my design for common components and any edge case in a specifications document. That way other teams outside Cloud could implement the same design if ever they’re tasked with the same “bug fix.”

Outcomes

Live & open source

We launched the keyboard focus indicator across all Google Cloud Platform products, resolving countless accessibility bugs and unblocking major accessibility-dependent contracts. The solution was then extended to Angular Material’s open source code library, which has over one million weekly downloads. That means many more websites are now far more usable for those who rely on keyboard navigation!