UI Development

Mobile Accessibility in 2020



One question that always pops up in our mind is What is Accessibility? Well different people define it in their own unique way like in the words of Tim Berners-Lee (W3C Director and inventor of the World Wide Web) “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect“.

But in simple terms Accessibility is the way of making your website or application usable to one and all which includes people with one or other form of disabilities. Traditionally when we think about Accessibility, we think about people with disabilities but making your application accessible to all and providing benefits to other groups such as those using mobile devices, or those with slow network connections also is a part of it.

Mobile Accessibility

“Mobile accessibility” refers to making a website or application accessible to all the people, specially making few changes to make sure that people with disability are also able to use the application and navigate through the content with ease. There are three aspects of mobile accessibility –

  1. Control Mechanism – It is important to make sure Interface controls such as buttons, links are accessible to mobile users as they are to desktop users.
  2. User Input – It is advisable to make user input requirements as smooth as possible on mobile and reduce the typing to minimum in forms.
  3. Responsive Design – The application’s layout should be such that it is perceivable to all and the page loads fast enough with the size of media different based on resolution so that the view doesn’t get distorted.

What is W3C?

The World Wide Web Consortium (W3C) is an international consortium which primarily pursues its mission through the creation of Web standards and guidelines designed to ensure long-term growth for the Web“.

What is WAI?

W3C’s Web Accessibility Initiative (WAI) brings together individuals and organizations from around the world to develop strategies, guidelines, and resources to help make the Web accessible to people with disabilities“.

What is WCAG?

WCAG refers to “Web Content Accessibility Guidelines”. As the name suggests these are protocols or guidelines designed and created as a standard which should be kept into consideration when designing and implementing a web or mobile application. These guidelines are enhanced and updated with time to match the demanding need. WCAG 2.1 is the latest updated version of the guidelines which was published in June 2018. WCAG 2.1 is followed word wide by people to make their websites and application accessible.

Why We should care about Mobile Accessibility?

Technology is advancing with leaps and bounds and with that the number of mobile users is also increasing at a staggering rate. In past One-decade technology has changed the face of mobile completely. From small keypad phones to large screen multi-functional devices with capabilities of handing complex computation and running multiple parallel application like desktops with ease.

The use of phone has also changed. Now a mobile phone is not just used for calling or sending a text message but instead is used at educational institutes, banks, surfing internet, playing games, listening to music, watching videos and movies, rehabilitating programs and many more other useful purposes. Mobile has brought revolutionary changes in the way we are using the web for different purpose. This has especially changed a lot of things and made life easier for disabled people. Mobile devices has opened the door to a whole new spectrum of information and interactions for these people .

A survey conducted by Wireless Rehabilitation Engineering Research Center shows that 91% people with one or other form of disability uses wireless devices such as mobile and tablets. Among these people with disabilities use of screen reader is very common.

A 2010 U.S census found that 1 out of 5 people have some or other form of disability.

WebAIM’s study of screen reader users

For any website or app to be successful one has to make sure that it should reach as many people as possible and as disabled people form a large part of society it is our both moral and social responsibility to make sure they too are able to use the application.

An accessible website or application makes a huge difference.

Screen Readers and Braille

There are two ways how a hardware can provide information to a visually impaired person.

  • Screen Readers
  • Braille

Screen Readers – Screen reader is a tool which uses Text-To-Speech (TTS) engine to convert any on-screen information into speech.

We have several screen readers available for desktops like JAWS, NVDA, ZOOMTEXT, ORCA, CHROMEVOX, VOICEOVER and many more.

Similarly, for mobile we have different screen readers available which enhances and helps people with disabilities like TALKBACK for Android devices and VOICEOVER for iPhone devices are the most popular once.

Braille – Braille devices such as braille display, and braille keyboard can provide feedback to the people with disability which they can perceive and use the applications.

Common Mobile Accessibility Mistakes

There are a lot of things to be taken into consideration when designing and implementing your webpage or application specially taking mobile users into consideration. Based on the research done by specialists there are few general mistakes which are found in many mobile websites or applications which prevents people with disabilities from navigating or using the application well.

Few practices which should be kept in mind when designing and implementing the app.

  • Disabled Pinch-To-Zoom – It is an important accessibility tool for people with visual. It allows the user to zoom in on a piece of content with a simple multi-touch gesture. Mobile Application that use the meta viewport property with user-scalable=no can prevent mobile users from using the standard two-finger pinch-to-zoom gesture that enlarges a website’s text and images. This should be avoided.
  • Lack of Proper Form Validation Error Messages – Applications and mobile websites lack proper validation error messages accessible to screen readers. For users with sight when an invalid form is submitted red color errors are seen same should be conveyed to people with disabilities with necessary validation error messages.
  • Lack of Success and Announcement Messages – After completion of an action often success and announcement messages are shown at the top of the screen. Screen readers fail to read these. For screen reader to read them aloud proper notification announcement technique should be used. For example, use of WAI-ARIA Assertive and Polite for Live regions. There are many APIs specific to accessibility are available for native app which enable the screen reader to speak success and announcement messages aloud.
  • Use of Placeholders without a <label> – It is often seen that input fields with placeholders don’t have <label>. These labels provide information about the form fields.
  • Missing page Titles – Application often don’t have proper tiles. Also, for single page applications when the content of the page changes the title is not updated.
  • Improper Focus order – It has been observed that the element on the screen are often not in order they appear on the screen. They are placed on the desired position with different positioning attributes that results into focus on the actionable elements shifting in an irregular pattern which might cause confusion and make it difficult for people with disabilities to understand and perceive.
  • Modal Dialogs Notification Issues – The concept behind having modals appearing is that they need immediate attention but, it is observed that often application doesn’t shift focus to modals and users with visual disabilities find it difficult to understand what they should do.
  • Improper Element Structure – Often developers don’t use semantic tags and end up using fake <div> buttons, div with background images for <img>, div to construct <nav> or <header > or <footer> and so on which makes understanding the content and using the application very difficult for Users.
  • Poor Color contrast ratio – To maintain the theme or color scheme often websites or application don’t take into account color contrast ratio and end up having an application with is difficult to use for certain group of people.
  • Incorrect Use Of WAI-ARIA – Another very common mistakes seen in many mobile websites or application is poor usage of aria attributes and properties or sometimes no use of WAI-ARIA at all.
  • Incomplete Keyboard Enhancements for Input Types – With the development of technology there are enormous scope of making sure that the application is best fitted for people of all kind and even people with some or other form of disability. Often keyboard enhancements are not done based on the purpose of use. For example, at times when you just need to enter numbers user are given QWERTY keyboard, which makes it difficult for some people to use the application.

Mobile Accessibility Checklists

To ensure that the webpage or application is accessible to all the people, even people with some or other form of disability it is important to follow few guidelines.


  • The color contrast ratio between foreground color and background color should be 4.5:1 or above for normal text (less than 18 points or 14 points bold) and at least 3:1 for large text (18 points above or 14 points bold). This ensures that the content is readable to all.
  • It is advisable to use text for Informative content instead of images as much as possible.
  • Any Information given via color MUST be also available by other means too (underlined text for links, etc.)


  • All navigable and actionable element MUST be focusable and proper semantic tag should be used.
  • Elements such as buttons, links and form fields receive focus by default and have standard controls but Elements such as div, span and others don’t have standard controls and proper ARIA roles should be used for them.


  • Any content displayed in an application should be readable and perceivable by all.
  • To ensure the content is readable text alternatives or equivalent such as alt text for images, title and description about anything specific MUST be provided for every non-strictly presentational non-text element within the application.
  • Proper information should be provided with the help of ARIA attributes such as aria-label, aria-labelledby, aria-description and aria-describedby.
  • All form controls MUST have labels(<label> elements) to help screen readers convey proper information to users.


  • In the past it was a common practice among developers to use content hiding technique such as hiding elements with opacity 0 (Zero), placing elements below other elements using z-index and changing it to show element and off-screen placement of elements but such practices MUST NOT be used as this provide wrong or misinformation and make it difficult for people to understand the content.
  • Any information which is not present on the screen MUST be truly invisible (specially with respect to single page applications). To do so one should use hidden attribute or display and visibility property.
  • Content which is not present on screen MUST be hidden from the user using aria-hidden attribute (proper use of aria-attributes required).

State Management

  • Standard controls such as radio button, checkbox and other form fields handles it’s state by default
  • The state of Nonstandard controls and actionable element MUST be conveyed to users with the help of ARIA States and Properties such as aria-checkedaria-disabledaria-selectedaria-expandedand aria-pressed.
  • It is recommended to provide full information about and dynamic change in the content or state management of modals and auto shifting the focus to the modals.


  • Except any piano application or bank cheque one should not restrict the orientation toggle.

Structure and hierarchy

  • It is important to have elements in the order they appear on the screen and avoid placing elements using positioning attributes as much as possible.
  • It is also very important to use semantic elements through out the application as it provides detailed and required information and makes it easier for people with one or other form of disability to understand the content of the page or the application. (proper use of header, footer, nav, section, section, article, etc.)
  • The application MUST have a title.
  • Headings MUST not break hierarchical structure (The page or app must have a H1 tag.)

  • Proper ARIA Landmark roles such as banner, complementary, contentinfo, navigation, search MUST be used to describe an application or document structure.
  • Any application MUST have a main.

General Guidelines

  • Touch target should be properly placed on the screen and size MUST be large enough for smooth operation.
  • One of the following MUST be true for the touch-events (WCAG 2.1: Pointer Cancellation):
    1. The touch-down event should not be used to trigger any action.
    2. If the action is triggered on the touch-up event and an option to abort the action before its completion is available or an option to undo the action after its completion.
    3. The touch-up event will undo any action that was triggered on a down event.
    4. It is essential to trigger the action on the touch-down event.


Mobile accessibility is important as mobile phones provide people with access to opportunity, world’s goods and services. Mobile web and mobile applications pay a vital role in providing access to different aspects of communication, healthcare, human commerce, and transportation. All are important services that have legal accessibility requirements and MUST be available for everyone to purchase and use from their mobile devices.

Moreover, if mobile website or application is not accessible, it can result in loss of business from users with disabilities, as well a very big aging population. However, an inaccessible website or application can result in a poor user experience and discourage or prevent people with disabilities from using such applications.

About The Author