Everyone should have a great experience

Accessibility explained: for the good of the community

Do you want that your great app to be enjoyed by ANYONE? Make it accessible dude!

Usually, developers are not very into accessibility because it’s a combination of UI design, coding, and common sense. Making an app completely accessible can take a lot of time. In this article, I would like to show you some “soft” changes you can implement with coding to make your app more usable by everyone.

Your content has to stand out from the background

The first improvement is pretty easy, but I want to stress it anyway because I’ve seen too many white buttons and grey text combinations… Please, don’t do it.
To be accessible your background should have a contrast ratio of 4.5:1, so a blue button over a white background is ok, but grey over white is not. Plus, it’s awful.

Be aware on how user will interact with the app

Users should be confident about your UI in order to interact with your app. A button that stands out from the background gives them a familiar feeling, while a text similar to other textbooks might be misinterpreted.

Images are great UI elements too. On the other hand, their purpose could be unclear. That why a text companion could be very useful.

I won’t talk about the “native” stuff, because we all know how a share button should be on iOS and Android. It should look good, but it also has to be evident.

Work with Talkback and Voiceover

Talkback for Android and Voiceover for iOS are the two most used tools. They “read” what’s on your screen and give you advice about the interactions you can do. This is why they are called Screen Readers.

For example, by creating a button with the label “Next”, both tools will state: “Next button, double-tap to activate” easy! Most basic SDK components are already configured to be read correctly by Screen Readers. However, you should configure manually any custom widget to make it accessible. Some special components could require extra work. Let’s see some examples:

• Images are just images, you should add a description to them only if they have a real meaning in your app.
• Label your clickable components accordingly. Sometimes you’ll need to use a layout or a text as an interaction, so label them as buttons and give them the right definition with accessibilitylabel on iOS and contentDescription on Android
• Try not to override a system behavior. If something is done in a certain way it should have a specific purpose. Let’s say that the navigation bar has a back button. Well, try to use it instead of making a new one.
• Tell your users what happens on their screen. If a button, a text, or anything else changes, you should report it. UseannounceForAccessibility on Android and UIAccessibilityPostNotification. on iOS.

Try it yourself

It can be a setting you’ve never turned on. You can try to use your app with Talkback/Voiceover to be aware of all the issues it has. Try navigating in several screens, tap over, scroll with your fingers, and ensure everything is all right. You can enable and disable Talkback with Volume Up + Volume Down and Voiceover with a triple-click on the side button. You can also run tests with the following tools:

• Android: Accessibility Scanner — Apps on Google Play
• iOS: google/GSCXScanner: iOS Accessibility Scanner (github.com)

If you want to deepen this topic you can get in touch with Level Access, one of the most important American organizations specialized in accessibility. Don’t forget to have a look at these guidelines to start being an accessibility evangelist and make better apps.