Accessibility components for managing focus in React SPAs
Aditum is a custom React component library to support developers in writing accessible and WAI-ARIA compliant single page applications (SPAs). In React SPAs, there is no page load after the initial one. When the content gets updated without a page load, screen reading software has no idea by default, leading to a confusing experience and potential lost customers for users interacting with the site via a screen reader.
Setting the focus manually can be tedious, especially for larger applications. Aditum provides a more automated solution to guide focus across your application to provide a better experience for users accessing your site via a screen reader.
The following components are currently included:
Simply use npm to install the package:
// npm $ npm install aditum // Yarn $ yarn add aditum
You can then include the components you need in your project:
import AccessBarWithRouter from 'aditum';
AccessBar is an accessibility bar that becomes visible with the command Alt + / and allows users to jump between active components on the page via a dynamically populated dropdown menu.
How to use (both with and without React Router versions):
Note: While AccessBar is hidden, an invisible
element is rendered as the first element on the page, which will prompt users using a VoiceOver assistive device to press the command to toggle the AccessBar. For reference:
if (isHidden) return
To enter navigation assistant, press alt + /.;
Note for non-English/US keyboards: The command Alt + / works on the US keyboard, but at this time will not work on keyboards that require a shift, command or other additional key to make the forward-slash.
classNameproperty with the value
accessNavLinkto each React Router . For example:
FocusWrapper is a higher order component that adds focus management capabilities in conjunction with React Router. It moves focus to your page content on route transition.
FocusWrapper works by wrapping a div around your specified component and imperatively shifting focus to that div.
How to use:
const focusedComponent = focusWrapper(ChildComponent)
Note: FocusWrapper only works with React-Router.
We love changes and are always looking to make our project better! For major changes, please open an issue first to discuss what you would like to change. Pull requests are welcome.
Currently on our to-do list:
This project is licensed under the MIT License - see the LICENSE.md file for details.