Reakit is a new toolkit for building accessible web apps with React. Brazilian developer Diego Haz launched his MIT-licensed open source project this week with a stable version 1.0 now available to the public.

The toolkit offers offers composable, themeable, and accessible UI components that strictly follow WAI-ARIA 1.1 standards. Out of the box, Reakit manages focus and keyboard interactions for components that require them.

“WAI-ARIA is hard,” Haz said. “Mostly because the spec is dense, confusing and incomplete. My goal with Reakit is not only to provide accessible components out of the box, but also to serve as an example so people can build their own accessible stuff from scratch.”

https://platform.twitter.com/widgets.js

Last year Haz removed all the unnecessary styles from the core package, in favor of having separate packages for themes. The core library is now unstyled by default and does not depend a CSS library. This makes it easier for developers to build UIs from scratch. Developers with specific presentational requirements can easily apply their own styles, instead of spending time having to overwrite a built-in set of styles.

Those who don’t want to start from scratch can install a theme package like reakit-theme-default. As the community around Reakit grows, more themes will may become available as packages.

Reakit’s GitHub repository has been starred more than 2,100 times and 34 people have contributed to the project. Developers who discovered Reakit in its earlier days of development are already building apps and libraries that use the toolkit.

https://platform.twitter.com/widgets.js

https://platform.twitter.com/widgets.js

One year ago, Haz left his job to work on Reakit full time as an open source project, because accessibility wasn’t a major priority at the company that employed him.

“I started building Reakit in my spare time with the purpose of easing my team’s work as we were building most of our components from scratch,” Haz said. “The company not only denied that idea (which may be reasonable), but also asked me to delete the project.

“So I realized that I was in the wrong company and quit. Since I had savings, I decided to focus on this project. But soon enough I’ll have to find another job. I’ll try to find companies where I can use Reakit so I can improve the library at the same time I’m building something with it.”

Not all companies prioritize accessibility in their React-based products. One reason is the expertise and passion for accessibility, paired with React skills, is hard to find.

As WPCampus’ Gutenberg accessibility audit demonstrated, making accessible web apps with React is challenging. Gutenberg is making major improvements towards becoming more accessible after the completion of the audit. This process has shown that leveraging accessibility expertise and baking it in from the beginning is crucial for writing accessible web apps.

React is often, and perhaps unfairly, singled out as having an accessibility problem. The library isn’t known for making it easy, but it does provide accessibility documentation and encourages developers to write semantic HTML.

While there is no magical “do-it-for-me” library that can ensure an app’s accessibility, the Reakit toolkit gives developers a head start. The project is open to contribution on GitHub and is also on Open Collective for those interested in funding its development.