“There’s an app for that.” You’re probably familiar with the slogan. It was coined back in 2009 by Apple Inc. for the iPhone and App Store in an iconic promotional campaign, but the saying has become so true it is now obsolete. Phone apps and mobile websites are now the prevalent methods for people to access services and entertainment, and users expect providers to offer ways to access their services through their devices.
However, due to unique differences in mobile versus desktop navigation, this new norm should beg the question: Are mobile websites and apps being designed for everyone? Including people with disabilities?
The Importance of Mobile App Accessibility
Accessibility in mobile apps and website is essential to inclusivity and equal opportunity in today’s world. This includes accessibility on Android and iPhone mobile devices and tablets. Someone’s ability to access and utilize online resources can often directly reflect their access to quality-of-life resources, such as government programs, education, retail goods, and even food.
Nearly 60% of users are accessing websites through mobile devices, according to statistics posted for Q2 of 2022. Mobile use comes with new unique challenges for users, however. If websites are not designed with mobile users in mind, they will become difficult, if not impossible, to use. The issues only become more problematic for users with disabilities.
Mobile Challenges for Disabled Users
Those with impairments such as visual, motor, hearing, and cognitive, are increasingly becoming dependent on mobile devices. If content is not designed according to specific standards, these websites and apps create barriers of entry that exclude users based on their abilities.
Screen size creates the biggest challenge for mobile use. Because mobile devices are presented on a much smaller display, they offer limited space for information and interaction.
Mobile version web versions and phone apps need to consider the:
- Sizing of interactive elements
- Reflowing of visual elements from desktop versions to mobile
- Color contrast
- Labeling of all visual elements
- Navigability through switch control
- Closed captioning and text alternatives for audio features
Mobile Apps & WCAG
Websites not designed according to universal accessibility standards include barriers for people with physical, visual, hearing, and cognitive disabilities.
The World Wide Web Consortium’s (W3C) Website Accessibility Initiative has published digital accessibility design guidelines for roughly 25 years, which are known as the Website Content Accessibility Guidelines (WCAG). Newer versions of the standards, such as WCAG 2.0 and WCAG 2.1, provide mobile app accessibility guidelines.
One advantage to designing websites according to WCAG standards is that the same WCAG principles that make websites accessible on a desktop are the same principles that make mobile viewing easy to use for everyone. WCAG is built on the four principles of POUR, which are:
- Perceivable
- Operable
- Understandable
- Robust
Making Mobile Websites & Apps Perceivable
As aforementioned, screen size creates one of the major differences between mobile use compared to desktop.
Because of the limited space, developers need to create alternative versions of websites that are displayed depending on the size of the device being used. This typically means a total of three website versions for desktop, tablet, and phone users. By default, the desktop version will be displayed if alternative versions are unavailable.
Navigating and using a desktop website on a mobile device is frustrating, hard, and involves complex gestures. This is difficult, if not impossible, especially for those who are impaired.
Downloadable apps are an attractive option for organizations wanting to optimize mobile use. Apps are on-device software of your platform and built specifically for mobile display, often providing a better user experience than a mobile version website.
Accessibility Guidelines for Mobile Apps
Let’s review the best practices for accessibility in mobile apps and websites:
Perceivable
Size of Clickable Elements, Controls, Navigation, and Keyboard
With smaller screens, mobile apps and websites should be responsive to user-triggered accessibility preferences, such as text resizing and high contrast modes. Adaptive settings should not be blocked or disabled on your website.
All text should have the capability to increase by 200%, and no content should be lost or inoperable when it is enlarged or when magnification is enabled. When zoomed, content should still be navigable solely through vertical scrolling and not require horizontal navigation.
Labeling important visual elements
Links and buttons should be accompanied by relevant text describing where the link re-directs or what action a button performs. Alt attributes can be used to provide screen readers with additional information.
Alt text descriptions should accompany all information images and graphics. Videos should provide accurate closed captions that are synchronized with display content as well as transcripts.
Images of text should be used sparingly as they are not detectable through screen readers. Where they are present, they should provide clear alternative text explaining why.
Visual elements should never be used in isolation. If there is a bubble or icon which displays when a user fails to complete a step successfully, there should be an audible alert and text notice.
Color Contrast & Use of Color
The color of the text should maintain strong contrast with the background color. Regular-sized text should hold a contrast ratio of at least 4.5:1 and titles and large text should be at least 3:1.
Color should never exclusively be used to convey information. For instance, alerting a user to an incomplete field. Text alerts and descriptions should accompany any color content meant to communicate information to a user.
Operable
Navigation is easy
All navigation menus should appear at the top of a page so users can access them without scrolling. The most frequently viewed features and web pages should be listed.
Gestures
Motor gestures should not be the only pathway to access a feature or perform an action. When possible, there should even be options to disable gesture control.
Where gestures are used, they should be simple, requiring limited and logical movements. On-screen indicators should accompany them so users understand what is required.
Button and link taps should be selected upon release and not on contact.
Spacing for tap and selection
Interactive elements should provide ample space for selection. For example, submission buttons should not be crammed into one space or right above one another. Pop-up ads and elements should provide easy ways to exit them.
Input assistance
Mobile web apps and websites should allow devices to use auto-fill functions. Streamlined login should also be available to avoid users having to remember complex passwords and minimize the need to complete input functions.
Understandable
Readable
Use clear and succinct language to present information and structure your websites and labels.
Predictable
Page titles and navigation menus provide clear and understandable descriptions of where they direct and what action they perform.
Heading tags should be used frequently to break up body text into logical sections. Ensure heading titles accurately describe the content they highlight.
Place interactive elements in their logical positions. For example, submission buttons should appear below a form field, not above.
Robust
Mobile apps and websites should be fully usable through external keyboards and assistive tools, such as pointers.
Content can easily adapt between portrait and landscape settings depending on screen orientation. When the display orientation is changed, users should be able to find themselves on the same page and at the same spot on the page.
Mobile Accessibility Solutions
Developing a website is an undertaking in and of itself and represents a significant investment. However, going the extra mile to make sure a website is published according to universal design principles is worth it in terms of ethical practices, legal responsibility, and optimized business practices.
Achieving an accessibility platform typically requires employing a professional or specialist to either build a web app or website from the ground up or troubleshoot and remediate an existing app. User testing is another important way to ensure usability for people with disabilities, and it can quickly identify areas on an app that do not function as intended for those who are impaired or using assistive technology.
While building software and websites for accessibility is preferred, it is often not doable due to the costs. Overlay technology and widgets are making accessibility accessible and have quickly become popular tools to help identify and remediate violations on websites.
