Android App Accessibility Checklist

    Amit Diwan

    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
    Touchable control sizes -Incorrect

    More Accessible
    Touchable control sizes -Correct

    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
    Text Field Hints -Incorrect

    More Accessible
    Text Field Hints - Correct

    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.

    Calendar Control
    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”.

    DatePicker control to add 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.

        android:contentDescription=”Send email sectiontools:context=""> 

    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.

    Decorative images and graphics

    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.

    Function- Speak


    Function- 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.


    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.

    App title -correct

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

    App title -incorrect

    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
    No Spacing -incorrect

    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.

    Spacing - correct

    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.

    Check Contrast Ratio

    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.

    Correct Contrast Ratio for app

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

    Correct Contrast Ratio added to app for text “Vote Now!”

    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
    CSS Master, 3rd Edition