Effortless Accessibility:

Why @reach/router won the Router war over react-router

Brett Haymaker, UI Engineer, Consultant & Instructor

Why @reach/Router?

• Accessibility is a first-class concern
  • manages focus in client-side routing, out of the box
• Smaller bundle size (~70% decrease, 18.4kb to 6kb gzipped)
• Simplified API

The Problem to Solve

With Static, server-rendered apps: the page is fully reloaded.

In response, screen readers can announce the new content.

without page reload in Client-Side Apps, screen readers don’t know new content has been loaded, and thereby don't know what to focus or announce to the user.

managing focus on route transitions requires a lot of effort, knowledge and will.

How @reach/Router Solves It

When the location changes, the top-most part of your application that changed is identified and focus is moved to it.

Assistive devices then announce to the user the group of elements they are now focused on, similarly to how it works when they load a page for the first time.

The Gatsby Decision

Text

Text

Text

Commitment despite short-term turbulence

Router trends tho

'our current accessibility problems'

• The number lawsuits filed by Plaintiffs under Title III of the Americans with Disabilities Act (ADA), alleging that they were unable to use websites that weren't coded for assistive technology use, such as screen readers and other applications swelled from 814 in 2017 to 2,258 in 2018 and were filed in 14 states.

• In 2019, that number is expected to increase.

• Blick Art, Five Guys, Dominos

• Beyonce

• Is a website a public place open for business?

  • Still being debated in the courts

  • lawsuits are still poppin' off      

Closing Thoughts