Leslie Cohn-Wein’s main point:
While [lots of divs, inline styles, focus management problems] are valid concerns, it should be noted that nothing in React prevents us from building accessible web apps.
True. I’m quite capable (and sadly, guilty) of building inaccessible interfaces with React or without.
I’ve long told people that one way to level up your front-end design and development skills, especially in your early days, is to understand how to change classes. I can write a few lines of JavaScript to add/remove an active
class and build a tabbed interface quite quickly. But did I build the HTML in such a way that it’s accessible by default? Did I deal with keyboard events? Did I deal with all the relevant aria-*
attributes? I’ll answer for myself here: no. I’ve gotten better about it over time, but sadly my muscle memory for the correct pattern isn’t always there.
I also tend to listen when folks I trust who specialize in accessibility say that the proliferation of SPAs, of which React is a major player, conspicuously coincides with a proliferation of accessibility issues.
I’m optimistic though. For example, React has a blessed tabs solution that is accessible out of the box. I reach for those, and thus my muscle memory for building tabs now results in a more accessible product. And when I need to do routing/linking with React, I reach (get it?!) for Reach Router, and I get accessibility “baked in,” as they say. That’s a powerful thing to get “for free,” again, as they say.
Third-party components with built-in accessibility are the solution. Not every web developer can learn the details of making their components fully accessible. If accessibility on the web does not improve in the next few years, it will be because we didn’t put enough effort into creating and promoting easy-to-use web components with built-in accessibility.
Regarding routing in SPA, here’s also a strategy for Vue: https://marcus.io/blog/accessible-routing-vuejs
Working on contributing on vue-router regarding this, so, ideally in the near future once you use it, accessible routing will be “baked in” there as well
I try really hard to bake a11y into my custom React components. I’m an old-school HTML/CSS dev.
Recently, I’ve had to use ReactStrap on a couple of projects. I was pretty disappointed to see absolutely no keyboard management or ARIA in the “tabs” component. Resorted to using “react-tabs” instead. Much better.