Tips to make your app more friendly

According to WHO, one billion people experience some kind of disability. That’s 15% of the world’s population, or one in seven people. In other words, a LOT of your users will have some type of disability. It might be a minor one, making the use of certain parts of your app mildly annoying, or a severe one, making the use of the app impossible. Does your app really need accessibility? Yes, it does.

Empathy

Putting yourself in someone else’s shoes can really change your perspective. Go on — get the Nocoffee vision simulator and see how your app can look for people with poor vision. Use only your non-dominant arm for navigation for a couple of minutes. While you’re at it, shake your hand when swiping on the touchscreen. Try a screen reader and see how easy it is to navigate through the app. Increase system font size and see whether text is easily readable. And let me remind you — one in seven people in the world has to do one (or more) of these things all the time. Suddenly, accessibility features stop feeling like a boring ritual to please the benchmark gods and start getting serious.

Design tips

I’m no designer, but that has never stopped me from obnoxiously pretending to be an expert, so here we go, some tips to make your design more accessible:

• mind your colors. Use simple, contrasting colors and when you color code things, mark them in different ways too (for example, with shapes). There are many tools you can use to check contrast, for example, Figma has a contrast checker plugin. This one is, as you might imagine, pretty close to my heart.
• make sure the text is legible. Low contrast or small font size can make the text difficult to read. You can use the material design color tool to test your color and size combinations.

Developer tips

I am a developer, so I feel entitled to obnoxiously pretend to be an expert. Therefore, here are some tips for developing more accessible web apps:

• structure content using html. Don’t rely on text size and placement. For example, headers should be placed in <hX> tags, and they should follow sequential progression. So no <h5>s after an <h2>.
• use semantic html. The core of this is simple: if something is a button, it should be a <button>. If something is an input, it should be an <input>. We too often make fancy buttons with divs and spans, whereas they could be just plain buttons. Also, all web pages should have one header, one main container, and (optionally) one footer. This can be achieved simply by using a <header> tag, a <footer> tag and a <main> tag. If you insist on making various components with customized divs or spans, you can add a “role” attribute to specify what they do. This is very important for screen reader users, as they rely on this information to identify which part of your page contains what, and on the ability to use the keyboard to focus on its various components, such as buttons or links.

If you want to discover more tips, read about 14 accessibility hacks to make your users’ day better.