Introduction

About

The Problem

We're in the design systems era now. Almost every company, big or small, either has one or has toyed with the idea. These systems are awesome – they give us the tools to whip up interfaces that are quick, slick, and uniform.

But, accessibility? That's still a tough nut to crack, especially with frameworks like React in the mix. Whether we're tapping into existing design systems or crafting our own, accessibility often ends up as a last-minute thing. And, let's face it, sometimes companies just don't have the time or resources to make it a priority.

The Solution

We aim to simplify certain aspects of the accessibility journey. We're diving into topics like focus management, navigation, and announcements – areas where we believe we can lend a hand.

Our library is all about accessibility and behavior aligned with the WAI-ARIA Authoring Practices. It's got your back with screen-reader and keyboard navigation support.

No need to conform to any specific styling or design approach here. Our compact package focuses on behavior and interactions, freeing you up to concentrate on your design.

Plus, we throw in a straightforward testing tool, so you can simulate a mouse-free environment hassle-free.

Install

Inside your React project directory, install @jtmdias/react-a11y-tools by running either of the following:

$ npm install @jtmdias/react-a11y-tools

# with Yarn

$ yarn add @jtmdias/react-a11y-tools

# with pnpm

$ pnpm add @jtmdias/react-a11y-tools

Roadmap

Here is a table of the components, custom hooks and their status.

✅ - Released
🛠 - Building

Status	Name	type
✅	Route Announcer	feedback
✅	Messages Announcer	feedback
✅	Focus Manager	focus
✅	The Rover	focus
✅	Keyboard Only	testing utilities
✅	Skip Links	content and navigation
✅	Semantic Headings	content and navigation
✅	useTabbable	hooks