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
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…