Android App Accessibility Checklist

Developers and designers of mobile applications must always focus on ensuring accessibility for vision and hearing impaired users. This article will offer some checklists you should complete to ensure your application is more accessible.

Touchable control sizes

While working on any app, users rely on touchable controls. The controls should have appropriate size and be easily visible. Your app should have controls with a minimum of 48dp in length as well as width. It is approximately equal to 9mm and recommended for controls for which a user can select or take an action.

In the below figures, you can see the less accessible and more accessible ways of sizing buttons.

Less Accessible

More Accessible

Text field hints

EditText is a control which configures itself to be editable. For ensuring accessibility, add an android:hint attribute for EditText fields. Adding the attribute will help users in understanding what content is written when the text field is empty. The content of the android:hint attribute can be spoken.

android:hint="Enter First Name"

Less Accessible

More Accessible

Custom controls

If your application has a custom control which is completely visible, then it is a good practice to provide a virtual view hierarchy. This is important, since the default accessibility services processing may not give sufficient descriptions for users.

A virtual view hierarchy provides a complementary view hierarchy to accessibility services and runs in the background. It can be considered a method for application developers to closely match the actual information on-screen. The accessibility services receive callbacks by the system when Accessibility Events are fired and provides more useful context information to users.

Below, you can see Calendar Control, where the calendar is implemented in single view.

Image Source

As you can see above, a day is selected, but the default accessibility service will only announce the year as well as month. So, users with no vision will face difficulty in selecting the correct day. This happens since the accessibility services only receive the description information for the complete calendar control, not for the specific day.

To avoid such issues, add a virtual view hierarchy.

This also works for prompts of related controls, such as DatePicker. Below you can see an example of aDatePicker` control for adding “Date of Birth”.

Description for a set of small controls

For ensuring accessibility, group a set of small controls using ViewGroup. Add them if they are smaller than the minimum recommended touch size in your application screens. After grouping, provide android:contentDescription for the group.

The ViewGroup class is a subclass of the View class and works as containers to group View instances together.

These are some of the commonly used ViewGroup subclasses:

• LinearLayout
• RelativeLayout
• GridView

In the following, you will see how to add content description to Relative Layout `ViewGroup.

For example, let’s add the android:contentDescription attribute to the RelativeLayout given below.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="900dp"
    android:background="#2E4058"
    android:contentDescription=”Send email section”
    tools:context="amit.net.demoapplication.MainActivity"> 

Avoid Description for decorative images and graphics

Let’s say you have some elements in your app, like an image for border or decoration, which is not enabling a user action. For these types of images and graphics, avoid adding accessibility content description i.e. android:contentDescription.

For example, avoid adding description for the decorative image in the app screen shown below.

Controls like speech button that change function

For buttons or controls that change function, the android:contentDescription for these buttons should be changed appropriately.

For example, you have two buttons: Speak and Pause, that change function when a user accesses them. Speak is pressed when the user is about to give input and Pause when the user stops speaking.

In this example, the speech button changes from Speak to Pause, so you can add the following content description with the attribute android:contentDescription.

android:contentDescription="Speak" 

android:contentDescription="Pause" 

Appropriate App Title

An app’s title is vital for every user, including low vision or visually impaired users. The content of the title is spoken to users with screen-readers, TalkBack or VoiceOver.

For example, let’s add app title in AndroidManifest.xml.

android:label="@string/app_name"

Here, the string value is set in strings.xml, i.e.

<string name="app_name">Voter Registration</string> 

So, app title is Voter Registration as shown below.

If you will not change the app title, Android will automatically show you the application name.

Proper Spacing

Proper spacing between controls is key to help users read text properly. In the next two examples, you can see the wrong as well as the right way to add controls.

Less accessible

As you can see above, it is quite difficult to read. But with correct spacing, you can easily read whatever is written on the button and it is quite easy to differentiate between both buttons.

Accessible

Color Contrast

The color contrast for foreground and background color should be WCAG compliant to ensure the text is readable.

You can use this online tool to check the contrast ratio of any set of colors.

As shown above, check the contrast ratio and if you can see Yes in the Result, it means you have set adequate foreground and background colors.

For example, in the text below, you can see the foreground and background colors are WCAG compliant.

In the below figure, we added the same foreground and background color as shown above.

The Checklist

• Touchable control sizes
• Text field hints
• Visible controls should be within a virtual view hierarchy
• Add android:contentDescription attributes
• Ensure android:contentDescription changes when if control changes function
• Your app should have an adequate app_name
• Place proper spacing between controls
• Ensure background and foreground colors have an adequate contrast ratio

Frequently Asked Questions (FAQs) on Mobile App Accessibility