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.
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"
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.
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.
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
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.
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
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
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 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.
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.
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.
- Touchable control sizes
- Text field hints
- Visible controls should be within a virtual view hierarchy
android:contentDescriptionchanges when if control changes function
- Your app should have an adequate
- Place proper spacing between controls
- Ensure background and foreground colors have an adequate contrast ratio
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja