Accessibility For Apps: Guidelines, Examples, and Best Practices of How to Care About the User

logostar
*instinctools
  • Date Published
  • Categories Blog, Guide, Research
  • Reading Time 11-Minute Read

Mobile accessibility may lack enough exposure to make it a developer priority. Find out how to make the daily scroll accessible to all!

According to the WHO, 15% of the world’s population experiences some form of disability. In most cases, aware societies strive to balance health disparity so that this population cohort doesn’t feel any barriers to an acknowledged quality of life. And it works just fine until a person with a disability faces a situation when something is out of their reach because of poor mobile app accessibility.

Why does mobile accessibility matter?

Making your applications inclusive isn’t a matter of social responsibility only. Along with diversity cultivation, accessible mobile applications unlock an additional revenue stream, give your company competitive tailwinds and help meet compliance regulations.

Empathy

As we age, we all face some limitations, be it impaired hearing, lowered sense of vision, or motor impairment. Moreover, situational and temporary disabilities can put all of us into similar settings that individuals with a long-term disability have. Therefore, mobile accessibility is a long-term investment that, among other things, helps us take care of the older generation, our older selves, and those struggling with temporary conditions.

Assistive technology is also an important strategy to better integrate people who face additional challenges into the modern world and online communities.

Competitive advantage

According to statistics, one in four Americans lives with a disability. By making your solution inclusive, you cover an additional 61 million users, which expands the user reach of your application.

Besides, tech inclusion is commercially interesting. The buying power of people with disabilities is around $500 billion post-tax. Considering the number of inaccessible apps, your app and mobile device accessibility can reel in this additional revenue stream.

Mobile phone accessibility also reduces the operational costs of your business. A Dutch SNS Bank reduced the number of call center calls and associated expenses by over 15%. The savings are associated with mobile web accessibility changes the bank made earlier.

Accessibility makes better tech for everyone

Tech inclusion is essential to some, but useful for all. Closed captions, virtual assistants, and speech recognition software are the go-to features for all users, including people with disabilities. Voice route directions, for example, are both an accessibility feature and a hand-free option for drivers. Therefore, making your solution all-in will benefit everyone.

Compliance with standards and regulations

In many cases, mobile app accessibility standards are required by law. The Americans with Disabilities Act Standards for Accessible Design, or ADA, mandates the inclusion of all people, in all areas of public life, including web-based businesses and their applications.

The ADA law also works alongside the Web Content Accessibility Guidelines (WCAG) which documents a single shared standard for web content accessibility. The current WCAG version is 2.1, while a revised version is planned for September 2022.

By 2025, all EU-based companies must also optimize their services and products for accessibility to comply with the European mobile app accessibility guidelines.

Better brand image

Finally, digital accessibility benefits your brand and creates more opportunities for brand advocates. Also, 56% of customers believe that a company should take a clear stand on social issues.

How to ensure mobile app accessibility?

As of today, Web Content Accessibility Guidelines, or WCAG, are considered to be the benchmark for website accessibility. The guidelines also feature WCAG for mobile, which outlines mobile accessibility best practices. Below, we’ll talk about what your application should be like to be truly accessible according to WCAG.

Keep in mind that each principle includes three levels of conformance, where A is the minimum level and AAA stands for full conformance. Most organizations strive to score AA as a golden mean.

Perceivable

Making your solution perceivable means that users must be able to perceive it with one or a few senses. In simple words, if your app’s content is geared towards a visual experience, it should have an alternative that involves auditory perception or any other sensory modality.

What can be the problem here?

  • No text alternatives 

Some solutions may fail to offer text alternatives for non-text content featured on screen, be it controls or images, in a way that is perceivable by the screen’s reader. It inherently makes the app unreadable for TalkBack or VoiceOver, which are default screen readers on Android and iOS respectively.

On the contrary, speech descriptions make all non-text data accessible for the blind or people with low or weak vision. Facebook, for example, has rolled out automatic ALT text to describe visual content for screen readers.

  • No adaptability

A mobile solution overlooks accessibility when its structure isn’t readily adjustable to different content presentation structures and orientations. In particular, an inclusive product can switch to both landscape and portrait without sacrificing content or elements just like the example below.

Native mobile app accessibility guidelines also mandate your product to mark up information, structure, and hierarchy between elements. This way, headings, tables, and lists will remain intact when the presentation changes, keeping your layouts simple and consistent.

Adaptability is essential for people with motor impairments, screen reader users, as well as people with learning difficulties and cognitive fatigue.

  • No distinguishing features

Inadequate contrast, a poor choice of colors, or the absence of text resizing take a toll on users’ perception. For instance, people with color perception issues struggle to distinguish between certain colors. Therefore, colors shouldn’t be the only way to convey differences or prompt action. Instead, combine color and text or character cues to convey information.

Loss of content or functionality is another common accessibility issue that typically occurs when a visually impaired user zooms the text. Your mobile accessibility settings must allow for increasing by up to 200% while retaining all content and elements.

Operable

This principle necessitates your application to include fully-operable interface and navigation elements so that the user can make use of every feature regardless of impairments or disabilities.

What can be the problem here?

  • Lack of time

Given the diversity among people, it’s difficult to predict how much time it takes to browse through the app or find a specific section. Most banking applications, for example, have a maximum session time as a security measure. However, time limits or time-sensitive content makes it inconvenient for a screen reader or an elderly user to process information.

Flexible time limits or the turn-off option, on the contrary, make your application more friendly to seniors, sight-impaired persons, or foreign speakers.

  • Flashing content 

Blinking content is a red flag for inclusive applications as it can provoke seizures or other undesirable effects. Thus, individuals who have photosensitive seizure disorders simply cannot look at flashing lights or contrasting visual patterns without having an adverse physical reaction triggered by them. That’s why it’s important to avoid content that flashes over 3 times in 1 second and limit the area of flashing to a small portion of a smartphone’s screen.

  • Navigation

Navigation that is neither programmatically tagged nor structured can also prevent a user from consuming the content. It holds especially true for visually disabled users that can only navigate your application with assistive technology as well as people with cognitive and motor disabilities.

Landmark regions, descriptive headers, unique screen titles, and labeled controls enable both users and screen readers to locate the needed section quickly and with fewer keystrokes. The application can also be coded to skip graphics and navigation links when consuming the content with a screen reader.

Tastemade, for instance, is a great example of full-screen navigation at work, while the example on the right sacrificed discoverability for a sleek design.

Understandable

According to this accessibility principle, all information and your entire user interface must be easy to grasp for any person regardless of their health status. Simply put, the more intuitive and straightforward your application is, the more chances it has to score the AAA conformance level.

What can be the problem here?

  • Predictability

Some applications prefer to hide design elements behind sophisticated icons or employ futuristic user flows. While such designs are admirable works of art, they lack clarity.

Hamburger menus, for example, are a widely accepted standard for mobile app development that simplifies menus for compact screens. However, they are neither navigable nor predictable for people with visual disabilities, cognitive limitations, motor impairments, and reduced dexterity. The desktop version of Telegram, for example, has a hamburger menu button.

The overriding objective of predictable design is to set accurate expectations about what will happen next through consistent design patterns, standard semantic elements, and ordered information structure. An accessible application should also have all elements easily discoverable on the screen to give an accurate understanding of where the user is now. Bottom navigation, vertical sidebar, or sticky menus play it right.

  • Input assistance

Some users with lower quality vision, and with reading and intellectual disabilities may find it challenging to enter the information error-free or differentiate between mandatory and optional fields. To provide assistance, an application interface can include cues in the fields to reinforce important information.

The cues may range from labeled attributes for screen readers to select states and rounded corners.

  • Error prevention

On the same note, typical error indication methods may not work for individuals with low or impaired vision or color-blind people. Likewise, users with reading or motor disabilities have a higher chance of entering the wrong input, which can lead to serious consequences, including financial liabilities. Therefore, if the application doesn’t provide user-controllable data, it is not accessible.

Reversible submissions, order confirmation, deleting a record, or unsending a message are some examples of safeguards that will keep users from making a mistake.

Robust

Accessibility features should be seamlessly delivered across platforms and devices, including different versions of screen readers, braille terminals, or text magnification software. In simple words, robust design is immune to coding errors that can distort the content or functions in a web-enabled device or assistive technology.

What can be the problem here?

  • Poor coding

If the HTML code behind your application lacks complete start and end tags, the app’s content may display differently across devices, not display at all, or be unreadable to assistive technologies. Well-formed HTML code that conforms to all markup language specifications makes sure that the accessible content structure will remain as intended across all platforms and devices.

Can cross-platform development provide a proper level of accessibility?

Cross-platform development is a Swiss army knife that accelerates time to market and kills two platforms with a one-code base. However, the accessibility potential of cross-platform development lags behind native applications. Therefore, cross-platform technologies are a tradeoff between accessibility and cost reduction, which can still guarantee at least a basic level of mobile accessibility on Android and iOS.

Thus, Flutter app development is committed to making apps more accessible and includes built-in support for accessibility combined with the same capabilities of the operating system. Flutter can help you implement such accessibility features as large fonts, screen reader compatibility, sufficient contrast, and more.

But keep in mind that mobile accessibility is a collective result of your whole development team, including Flutter developers. While UX/UI designers are dedicated to building inclusive interfaces, QA specialists make sure your final app version passes accessibility testing.

There’s no need to decide between accessibility and design

Equal access to technology allows all people to participate in society and leverage tech comforts actively. Along with compliance conformity, mobile accessibility also contributes to a larger user base and competitive edge of your company. However, a lot of developers are still strangers to accessibility coding standards since accessibility excellence requires intensive research and know-how. And even if they’re familiar with the notion, it’s often challenging to wrap up inclusive features into an aesthetic interface.
If you struggle to strike a balance between accessibility and design, our company knows how to score on both. Based on your unique requirements and accessibility standards, we seamlessly integrate inclusivity into a top-notch app design. Drop us a line to create a top-grade mobile solution that caters to all.


The article is originally published here