We need to design and create websites that can be used and accessible by each and every one of us, no matter if they are disabled or not. But many times we failed to do so and as a developer I wish we had a clear cut requirements when it comes to accessibility rather than just optional thing to do.
Most of the time you can use standard HTML ways to make the elements accessible but in few cases React/JSX has some additional attributes to make the elements accessible. I have tried to summed up those additional attributes in this post.
Let’s see how you can make your elements accessible in React.
aria-* HTML attributes
AREA stand for Accessible Rich Internet Applications
We can use aria-* HTML attributes to make the elements accessible and they are NOT camelCased.
<input
type="text"
aria-label={labelText}
aria-required="true"
value={inputValue}
name="name"
/>
Semantic HTML
React recommends using React Fragments to group together multiple elements because sometimes adding div to JSX breaks the semantics especially working with list elements like ol, ul, dl or HTML table element.
import React, { Fragment } from 'react';
...
...
<Fragment>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</Fragment>
...
...
Accessible Forms
Labeling
HTML form controls such as labels and inputs need to labeled like this for accessibility:
Make sure you provide descriptive labels for HTML form controls so that if those elements are exposed to screen readers, it makes sense to the person listening to it.
In HTML we use for attribute but in JSX we need to use htmlFor.
...
<label htmlFor="namedInput">Name:</label>
...
Programmatically managing focus
Why do we need this?
React apps are constantly modifying the HTML which might leading to keyboard focus being lost. To fix that we need to bring the keyboard focus to the right direction.
To set/reset focus in React, you can use Refs to DOM elements. Use this react guide to do so.
Mouse and pointer events
This is how we can disable an element when clicks outside of the element area:
...
...
componentDidMount() {
window.addEventListener('click', this.onClickOutsideHandler);
}
...
...
onClickOutsideHandler(event) {
if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {
this.setState({ isOpen: false });
}
}
...
...
That won’t work for keyboard navigation though. This is how to fix it using onBlur and onFocus:
...
<div onBlur={this.onBlurHandler}
onFocus={this.onFocusHandler}>
...
We also need to define onBlurHandler and onFocusHandler. Like this:
...
onBlurHandler() {
this.timeOutId = setTimeout(() => {
this.setState({
isOpen: false
});
});
}
// If a child receives focus, do not close the popover.
onFocusHandler() {
clearTimeout(this.timeOutId);
}
...
This is not a complete list. There are lots of things we need to take care of for accessibility. These are some notes from my project. Hope it helps! If not checkout this really good guide on accessibility on React Docs.
accessibility elements html
