Mobile Accessibility: Top 5 Tips

By Kimberly Spriggs Sept. 17, 2022

Since 2021, and now year-ending 2022, many companies have received multiple ADA-based lawsuits – although they have slowed down. Frequently, the first demand letter is for the website and the second for a mobile app. Often, mobile apps are sharply criticized and targeted for accessibility lawsuits alone.

Mobile accessibility refers to making websites and applications accessible to people with disabilities who use mobile phones and other devices to access content. Being accessible also mean places with rural infrastructure and poor or lower internet quality as well. Having access to a mobile device and an easily usable mobile app extension – can be of value as well.

From a technical and ROI perspective, an accessible app can reduce bounce rate and increase the return rate on your website. Having an inaccessible website can lose as much as 61% of traffic. It follows that improving mobile accessibility results in higher conversion and engagement rates (and lowering litigation risks). Which ultimately means more revenue for your business.

Quick mobile stats

• Q2 of 2022, mobile devices (excluding tablets), globally generated 62.06% of website traffic coming from mobile devices.
• 92.1% of internet users access the internet using a mobile phone.
• Approximately 83% of Americans used their mobile devices for internet browsing
• By 2026, the number of mobile internet usage is estimated to reach 87.66%.
• In the U.S. alone, there were 302 million internet users, and 90.8% of Americans accessed the internet via any device.
• Some 62% of adults with a disability say they own a desktop, laptop, mobile, smartphone, or wearable device.

When you look at it – mobile accessibility benefits everyone.

Screen Readers

Let us quickly go over the tools used by the differently abled users. Similar to reading a traditional book, screen readers only announce plain content, supplemented with interpretations. Visual attributes are potentially ignored. Interestingly, some CSS still does have influence on screen readers.

Mobile Devices with Accessibility Built-in

Mobile screen readers on touch devices are mainly used for people with low-vision or no vision to navigate a website or mobile app. At its core, screen reader software programs identify the elements displayed on a device and repeat that information back to the user, via text-to-talk making it easier to understand and control for the user and developers of accessible apps.

• iPhone (iOS) VoiceOver is a revolutionary screen reader for the visually challenged that is built in the iPhone.
• Android, TalkBack is the Google screen reader included on Android devices. TalkBack gives manual and gesture control of the users’ device.

Ironically, the screen readers offer a reasonably robust way of testing websites and apps on accessibility too, revealing many potential accessibility issues. Pre-installed on any modern smartphone devices, they do not require a lot of configurations – especially for beginners. But they are powerful tools that can detect issues in the app.

Now, let’s get to the mobile accessibility tips…

Mobile Accessibility: 5 Tips and Tricks

There are so many elements to focus on, and other design principles to be mindful of. For instance, focusing on the side swiping to move from one element to the next, dynamic type and auto-layout, testing switch controls, using multiple modes to communicate important information, and keeping the user interface simple. However, we will narrow down the Top 5 Tips and Tricks for mobile accessibility to tackle.

1. Images with no alt+text: Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage. It is read aloud to users by screen reader software, and it is indexed by search engines. 
2. Keyboard traps: Where users get into a subpage and cannot navigate back to the Main Menu or get stuck at the end of a page. If using a keyboard or other non-pointer input, the user must be allowed to progress and not become trapped.
3. Touch targets too small: Adjusting the size of your tap or touch targets. A mouse or a pointer may be hard to hit a smaller target or someone with physical impairments making the target hard to tap. According to the W3C, ‘The intent of this success criteria is to ensure that target sizes are large enough for users to easily activate them, even if the user is accessing content on a small handheld touch screen device, has limited dexterity, or has trouble activating small targets for other reasons.’
4. High color contrast ratio: WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components like form input borders. A contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
5. Poorly, or not labeled controls: Such as buttons. When using a screen reader to navigate they do not respond when activated either by gesture or keyboard leaving the user unable to access say a sale, or benefit from the site via the app.

With a vast number of tech giants folding in accessibility software, the use of a clean mobile app will drive traffic for more that just the disability community – it will increase your traffic.

Mobile App Accessibility Overlays – Don’t Work

You may have seen the little floating icon on your mobile apps these days of a Davinci style outline of a person with arms and legs outstretched – this icon is an Accessibility Overlay. If you’re boss or team are considering using an overlay to make the mobile app or website accessible – don’t. Bottom line, and several lawsuits later the companies using the overlays are being sued for, as you can guess, being inaccessible and non-compliant. These seem an inexpensive way to fix the solution, but accessibility overlays don’t work. My prior two part blogs, Digital Accessibility Overlays Are Not Accessible (Part 1 and Part 2) help explain in detail.

Although no tool alone can determine if a site meets accessibility guidelines. Knowledgeable human evaluation is essential to determine if an app is truly accessible. So, if you are challenged with determining the accessibility of the mobile app, professionals with the experience using the AI tools as well as hands-on remediation and training can see it through.

Something else noteworthy, with Google Page Experience Ranking it will prioritize websites that are mobile friendly – and accessible.

However you decide to execute your accessibility strategy, be sure to keep the website, native apps, web apps, or hybrid apps in mind for accessibility. By applying the best practices we shared here concerning screen size, touch targets, keyboard traps, mobile gestures, layout consistency, data entry, and color contrast, you will be well underway to becoming an accessibility champion.