Creating Accessible React Apps
Can React based apps be made accessible for people with disabilities? Let’s find out!
--
The React JavaScript library is a great way to create reusable modular components that can be shared among projects. But how do you ensure your React apps are usable by all kinds of people?
Way back in February 2017, I took a train from Kingston, Canada to downtown Toronto. Why was I making this two-hour trek? To learn about the React JavaScript library.
By the end of the day-long course, we each developed a fully working application. One of the things that really excited me about React was how it forces you to think modular. Each component does one task, and it does this one thing really well. When building components this way, it helps you focus all your thought and energy into ensuring you get the task right — not just for your current project but for future projects, too. React components are reusable and, if well constructed, can be shared among projects. It’s just a matter of finding the correct Lego brick in the pile to piece together what you need in order to create a great user experience.
However, when I got back from the trip, I started wondering if the app I created that day was accessible. Could it be made to be accessible? After loading up the project on my laptop I set out to conduct some basic testing with my keyboard and VoiceOver screen reader.
There were some minor, quick-win type issues, such as using ul + li elements for the homepage link list instead of the current offering of div elements. Another quick win: adding an empty alt attribute for the callout containers with decorative images.
There were also some more challenging issues to overcome. With each new page load, the title element text didn’t change to reflect the new content. Not only that, but keyboard focus was very poorly managed, which would block keyboard-only users from using the app. When a new page loaded, the focus would remain on the previous page view!
Were there any techniques to use in order to fix these more challenging accessibility issues?
After spending time reading the React docs and trying out some of the techniques acquired during the course, I was able…
