Mobile Accessibility: The need and role of developers
We have seen a lot of content on the Internet for accessibility and even more number of such content required to create awareness among people. Having said, I would like to introduce why mobile accessibility is important and the major problem people suffer that leads difficulty in accessing content on the mobile devices. Considering Android and iOS as the top mobile operating systems, I will go further to introduce two well-known applications, TalkBack and VoiceOver available for Android and iOS users, respectively.
Additionally, I will cover how developers can play a role in mobile accessibility.
Why Mobile Accessibility
Mobile accessibility" generally refers to making websites and applications more accessible to people with disabilities when they are > using mobile phones. WAI's work in this area includes people using a broad range of devices to interact with the web: phones, > tablets, TVs, and more.
Mobile accessibility means providing a set of technology with best practices for mobile web content. That means developing websites and application accessible to everyone using mobile phone. Since the usage of mobile phone is gaining momentum at a fast rate, the significance of mobile accessibility increases.
Accesibility is crucial and should be taken care of while developing any apps. Let us look at how many users use screen readers to access their mobile. This will show the need for mobile accessibility.
According to a study by WebAIM, that included more than 2400 respondents, around 91% of them use screen readers:
Here are the stats for mobile screen readers:
The last one which I want to show are the platforms:
The same study with the same number of 2400 respondants came up with a result: Around 64% of the respondents are dealing with blindness and the low vision/ visually-impaired ones include 39%. So, you can easily guess the need of mobile accessibility for a majority of respondents, that include blind and low vision users.
Since, iOS and Android are market leaders, here we will focus on app development for Android and iOS i.e how making app accessible.
Guide for Developers
Here’s a guide for developers to initiate accessibility in their app. This is just a short brief about what steps a developer should follow. The key points are discussed in the next section that widens the topic further that every beginner or advanced developer can relate:
Understand what is the meaning and importance of accessibility. This is the first step to start with accessibility.
Check the app first for accessibility: Accessibility Developer Checklist.
Add Accessibility statement
This will tell everyone about the step towards Accessibility. The intent to provide the app for every possible user will be easily visible.
For this, add the accessibility statement to the description of the app on the app store so that a differently abled user can check that will they be able to use the app before purchasing it. Mention the features specially developed and designed keeping in mind accessibility. Do not hesitate to mention any limitations in your app on accessibility.
Testing with real users
A contact page or feedback should be provided with easier access. Initially, the app should be tested with real users, so easier access to a contact or feedback page can be helpful for people in need of more accessibility features.
Look at reading sequence
Whatever be the content and images, it should be described correctly. Let’s say images, with description and easy to read special symbols, acronyms, and abbreviations.
Description for Controls
Controls like tabs, button, sliders, etc. are used in every app and the developer should focus on keeping the correct description of each of them.
Simpler user interface
A simple and easy to use UI makes reading and navigation easier for every user.
Bigger buttons with proper spacing between different buttons should be taken into consideration by a developer. These small things will prove vital under accessibility.
Landscape and Portrait, both the views should be easier to use.
Focus should be on color blind people too, so locating elements on the basis of colors should not be the only way.
Contrast between text and background should be proper.
Text size and theme
You may have seen some government websites with + and – font size increment and decrement options. And some are having zoom in and zoom out on the homepage itself. Developers should provide these options in the app with background and foreground theme changing/ combination options.
After focusing on all these things, do not forget to check the app for accessibility. Here's how you can check that the application is accessible or not,
Now we will focus on some essential points for accessibility under Android and iOS. Here, I have started with two points that you many know, but still neglect. These are basic points; starting with the third, I have described some ways for developers to make their apps accessible.
1. Mark the forms correctly
Forms is part of a website and widely used. Marking them correctly will allow screen readers to read them easily for web and mobile accessibility. That said, a form is to be developed in a way easier for a visually impaired user to fill in. Here are some tips:
For easier access to screen readers, the form elements like "" should be associated with label elements. As the name says, labels are used to describe the elements. The label should have a for attribute that corresponds to the apt form element’s is attribute.
label for="uname">Username:</label> <input type="text" id="uname" name="username">
Let’s say the form has the following without label, then what will happen?
Username: <input type="text" id="uname" name="uname">
The screen reader will read "Edit text, blank”f i.e not assistive.
2. Screen reader friendly
We have read above in the “Why Mobile Accessibility” section, how many users use screen readers on their mobile. That shows the importance of screen readers and developers should focus on developing app to make reading and locating UI elements easier.
Here’s some basic concepts that developers miss with a solution for accessibility:
Image alt tag
A basic thing neglected by many developers. They forget to add the alt tag, since they do not know its importance.
For example, the following is missing the alt tag. So the screen reader will just read the image name i.e. theraphy.jpg. Therefore, no support for screen readers.
<img class src="therapy.jpg" width="760" height="360">
Here’s the correct one and now the screen reader will read the alt tag i.e. Gene therapy research trial for Retinitis Pigmentosa proved essential:
<img class src="therapy.jpg" alt="*Gene therapy research trial for Retinitis Pigmentosa proved essential*" width="760" height="360">
Links and Buttons
Provide readable content for these two to make it easier for screen readers to read. If you want to hide this content from sighted users, then use replacement technique for image.
3. Label User Interface Elements
As we discussed about label above, here we will discuss about labeling user interface elements. Let us keep it short and look at an example:
Let's say being an app developer, you have added a + sign to represent adding new sticky note in the note app like 'Google Keep'. In that you used ImageButton. Image Button is a button with an image (not text). This button can be pressed or clicked like in this case plus (+) button.
So, set the content description for the ImageButton (plus in this case). Add it to add_note string resource, such as "Add Sticky Note". Through this an accessibility service can announce "Add Sticky Note" aloud. This will be spoken when a user moves focus or hovers over the button.
<ImageButton android:id=”@+id/add_stickynote_button” android:src=”@drawable/add_stickynote” android:contentDescription=”@string/add_stickynote”/>
4. View Focus
When android:focusable attribute is set to true for a user interface element, then it is reachable using directional controls. This lets users focus on the element using the directional controls and makes interaction with them easier.
The user interface controls provided by the Android framework are focusable by default and visually indicate focus by changing the control’s appearance.
Several APIs provided by Android let you control whether a user interface control is focusable and even request that a control be given focus: setFocusable(), isFocusable(), and requestFocus().
5. User Interface Elements
While developing an app, a developer should make sure the user interface elements accepting inputs i.e. touch or type easier reach with a directional controller, such as a trackball, D-pad or navigation gestures.
6. Audio and Visual prompts
For assisting hard of hearing users, the developers should focus on accompanying audio prompts by another visual prompt or notification.
7. Test your app
Use accessibility navigation services and features to test the application. Turn on TalkBack and Explore by Touch, and after that try using the application using only directional controls.
Accessibility for Android and iOS devices
Here are some of the devices and apps except screen readers under Assistive Technology.
For accessibility and to help visually impaired users, Android has TalkBack and iOS has VoiceOver. Let us look at how Android and iOS application developers can meet accessibility for their apps.
Android – Make applications more accessible
TalkBack on Android
Users across the globe use Android and have different abilities through which they interact with their Android devices. This includes users with visual, physical or age-related limitations. These limitations prevent them from using a touch screen or hearing loss users unable to notice audible information, including alerts.
Android comes with some accessibility features to make it easy to navigate, including text-to-speech, haptic feedback, gesture navigation, trackball and directional-pad navigation, etc.
Android app developers
For Android application developers, these services are of help to make applications more accessible and they can build their own accessibility services that can offer improved usability such as audio prompting, alternate navigation modes, etc.
TalkBack can be enabled under Setting, then Accessibility. Here’s what you will see after clicking Accessibility. Screenshots from HTC Desire 820:
As in the above figure, you can find the following under Lesson 2, 3, 4:
- Exploring the screen
- Scrolling through lists
- Context Menus
- Editing Text
Here's, how to work on TalkBack:
- One tap to select an item
- Double tap activates
- Scrolling requires two fingers
iOS - Make applications more accessible
VoiceOver on iOS
With the introduction of iOS 3.0, for helping visually impaired users, Voiceover introduced to make it easier to use iOS devices. It is Apple’s innovative screen reading technology.
With that, the UI Accessibility programming interface introduced to assist developers make their application accessible to VoiceOver users. The concept and usage of VoiceOver is simple. It enables users to use speech and sound to navigate through the application’s views and controls.
iOS applications running in iOS 3.0 and later should be easily accessible to VoiceOver users. This is achieved by iOS and iOS SDK through: Making standard UIKit controls and views accessible by default, Supplying the UI Accessibility programming interface, which defines a streamlined process for making an iPhone application accessible.
It includes providing a tool to assist developers in implementing accessibility in their code and testing it on the application. To be accessible, an iPhone application must supply information about its user interface elements to VoiceOver users. It means, the developers should assure that every user interface element that users can interact is accessible, includeing static text, controls that do actions, etc. All accessible elements supply correct and helpful information.
To enable VoiceOver, go to 'Settings', 'General', click 'Accessibility' and then 'VoiceOver'.
After that you can see the following:
- A single tap on the screen will select an item, but will not activate it.
- A double tap is for starting the application.
- For scroll, use three fingers.
- For activating Rotor, just rotate two fingers on the screen like turning a dial. A Rotor is to configure how to navigate between items on the screen.
Accessibility is to be proposed for every user to make it easier for them to use technology. Try to make website and app adhering the accessibility guidelines. Market leaders, Google and Apple have provided a lot of opportunity for developers to develop applications accessible to visually impaired and hard of hearing users.