Writing Accessible Interfaces In React

Accessibility, for me, is the cornerstone of a good app experience. Let’s leave beside the typical arguments surrounding making your app useable for the largest population of users, and the fact that it may just be legally required in a few years to have an accessible app.

I think the biggest argument for having an accessible app is so that power users can use blazing fast. And typically that means everything being keyboard first on desktop and swipe/touch first on mobile.

How does your app respond when someone uses an obvious keyboard shortcut like (cmd + a) on a table? How does it respond when someone double clicks? Or swipes?

I think the better you pay attention to accessibility standards like Aria and HTML best practices, the more likely your app is to perform correctly in certain situations.

I also think there are several Javascript components that lend themselves to building poor interfaces. For example, apps typically have sidebar nav or tab based navigation. These can hide things from the core view of the app. In my opinion, it’s best for the user if these type of components are all routed.

This gives each of them a url which can be shared by your support team to help get a user to the right place. Or, the deep link can be used by the user to help someone on their internal team get to the same view.

There are several different things that tip me off to finding these optimizations.

1. When developing, if I have to click something to get back to the same view after the dev server refreshes, there is probably a missing route or url driven state event.
2. If I have to click on anything in a form, there is a missing accessible thing.
3. If a form has more than 1-2 relational items, you probably could breakout the form into a multi-step process. The first step would narrow down the options for the second relational set of items. And you could probably present these items in a better way than a type to search field. An example solution would be presenting a list of buttons as cards to pick the proper filter.
4. If the escape key doesn’t close your modal, drawer, or search bar, you should probably enable that.

If you start paying attention to these things, you’ll find that your app becomes much more advanced user friendly and as a result it’s more accessible.