Focus Management in React SPAs

Every software engineer has a handful of moments that reaffirm why we chose to write code.

For me, it was stumbling down the W3C page and finding this quote:

“The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.”

I paused and realized I my apps were not designed to work for all people.

Accessibility and React

I’ll be honest and admit prior to reading the quote, my various apps and projects were not accessible. The apps had a meager amount of semantic html tags, a lack of ARIA-labels, and no consideration for how users of assistive technologies may access the application. This newfound awareness led me and a group of software engineers at Aditum to start questioning how our React applications can better serve assistive technology users.

Our research found focus management as a pain point for React developers. Specifically, on route change, a user may not be aware of content changing, and when the content does change, navigating within the newly rendered page is both cumbersome and overwhelming. To address these issues, we’ve developed a component library to help developers manage focus within their applications. Before I delve too deep, we need to fully understand the focus problems React developers face.

Focus Management and SPAs (Single-Page-Applications)

What is focus and focus management? In a web context, focus determines where keyboard events go to on the page at any given moment. These keyboard events may include a person tabbing through the page, or an assistive technology user with a visual impairment using a screenreader in conjunction with their keyboard to navigate the web page. Focus management is the deliberate practice of a developer adjusting where focus should go to on a page. By doing so, developers will create better, intuitive, and more responsive web pages.

How does focus management relate to SPAs? Let’s take a simple SPA as shown below with a navigation bar.

Currently, if an assistive technology user clicks on one of these links their focus will stay on the clicked link rather than jumping into the latest content. This interaction lends itself to a confusing user experience. Another issue an assistive technology user would face is the lack of clarity concerning which content has changed on route change.

We decided to tackle this problem by combining three approaches: deliberately building our tests and sample-sites with accessibility in mind, being empathetic to the needs of assistive technology users by placing ourselves in their shoes, and developing a component library to support developers in building accessible React applications.

Building Aditum

Building with Accessibility in Mind

Our project began by implementing WAI-ARIA standards to write accessible code Not sure what it means to write accessible code? Here are key resources to get started :

Be sure to use semantic HTML tags and aria-labels to highlight landmarks and other key access points in said page.

Using Assistive Technologies

When we use the word assistive technologies we mean tools such as: screen readers, screen magnification, alternative physical devices, etc. While building Aditum we spent days navigating the web using a screen reader. I challenge you to try the same. Consulting with numerous assistive technology users also clarified other pain points as to what the best route may be.

Why React Components?

React does have good documentation on how to handle accessibility, but it falls short on handling focus. The onus should be on the developer to create accessible sites — for instance taking these two steps in the right direction:

  1. Sketch out a website in advance and conceptualize the path an assistive technology user might take.
  2. Be sure to put ARIA attributes to HTML DOM elements when appropriate.

When the above two are handled, our components will take care of focus management. Under the hood, we implement these components using several React patterns such as refs, higher-order components, and hooks to achieve dynamic focus management.

Conclusion

We hope we’ve demonstrated why it’s important for developers to prioritize accessibility when building applications. Developing with accessibility in mind ensures that everyone has the same opportunity to interact with your service or product, above all it ensures creating the web we all deserve.

You can find our open-source project Aditum on Github and try it by downloading on npm.

Contributors:

Nicole Abramowski

William Chen

Kelvin Cuesta

Benjamin Johnson