Introducing the React-a11y-Announcer

The Think Company UI Development Team recently created and published its first open-source component to enhance accessibility for React applications. We hope this component will be a helpful contribution to other developers in the community.

What is it?

The react-a11y-announcer can be integrated with a React application to provide additional context and information to a screen reader, which allows those users to more easily navigate an application.

The component provides developers with an easy way to give users of screen readers feedback on the results of their interactions within an application. A developer can pass custom messages to the announcer component, which leverages the aria-live HTML attribute so that it will be read by a screen reader.

Why did we do this?

The short answer is that a group of us saw an announcer solution implemented for another framework, looked for a similar solution in React, and—not finding one—decided to create one ourselves!

The longer answer, in order to give credit where it’s due: While talking about a recent Polymer/Redux project they were building, Brendan and Philippe shared their successes with the iron-a11y-announcer project with the rest of the team—including issues that it solved for visually impaired users of their application. Joe, Ian, Christine and I—who had been working on a separate React application—realized that we could potentially use and benefit from this component as well.

How does it work?

First, let’s look at how a traditional multi-page application works. When a user performs an action, like submitting a form or selecting a hyperlink to a new page, the user has many sources of feedback that let them know they’re transitioning to a new page or state. Visually, the URL changes and the new page is drawn to the screen. If someone is using an assistive technology like a screen reader, the page’s new title would be read along with the content of the page.

Unfortunately, these cues are lost when working with a single page application because there are no new pages to load, and the new context isn’t set in a way that is obvious to the web browser software.

The component we created allows an application manager to inform a user that something has happened or changed within the application. Developers can integrate the component so that an application announces updates like “now viewing the dashboard page” on a page transition, or “five items deleted” when files are removed from a folder. Announcements such as these give users more context about what is happening during navigation or interaction, and in turn provide a much better experience for users of screen readers.

As Mikey said, “Being mindful of accessibility allows us to create a better, more holistic user experience and improve our goodwill for our fellow humans. We should do good for the sake of being good. Or in a more Think Company-specific way of putting it, let’s be excellent and be nice to people.”

How do you use this component in a project?

1. Install as a dependency from npm.

   
   npm install --save react-a11y-announcer
           

2. Include in your project. Here’s a basic example:
   [raw]

   
   import React, { Component } from "react";
   import Announcer from "react-a11y-announcer";
   
   class App extends Component {
     constructor(props) {
       super(props);
       
       this.state = {
           announcement: ''
       };
     }
     
     render() {
       return (
         <div>
          <Announcer text={this.state.announcement}> </Announcer>
         </div>
       );
     }
   }
       	

   [/raw]

3. Update the text prop to a new value and it will be read by the screen reader.

How you can help

Are there additional features that you think could help make this better? We welcome your input! Raise an issue on our GitHub page, submit a pull request, or leave a comment below.