Improving App & Plugin Accessibility: Best Practices

It’s more important now than ever for web developers to be conscious of the world around them when developing apps or plugins. In particular, developers need to consider people with disabilities and keep their needs in mind when designing and building apps. 

One of the biggest issues we’ve seen in the development world as of late is accessibility. According to Usablenet, 20% of ADA digital lawsuits in 2020 included some kind of claim relating to an app’s lack of accessibility features. 

There are many different disabilities that make it difficult for people to access information, services or products, and it may be unrealistic for developers to address them all. However, there are some small steps that developers can take to improve their apps, plugins or widgets. Not only will it enable to reach a wider audience, but it will also provide value and improve user experience. Let’s dive in and learn more about this.

Develop Amazing Accessible Apps on Common Ninja’s Developer Platform

What is Web Accessibility?

In today’s digital age, ensuring accessibility on web apps, plugins, widgets and similar products is essential for their success. Millions of people across the world experience, due to various disabilities, challenges that affect the way they use devices. Ensuring your app or plugin is accessible to people who need some sort of accommodation opens you up to a larger market and improves their lives.

Definition

Web accessibility can generally be defined as the process of making various web products & services accessible to people living with some sort of disability. This might mean making accommodations for those living with:

• Vision impairments
• Learning disabilities
• Hearing impairments
• Issues affecting the range of motion

Standardized Accessibility Guidelines

The World Wide Web Consortium, or W3C, has created the Web Content Accessibility Guidelines (WCAG) to set the standards for digital accessibility. These standards are used to set regulations by organizations across the globe, including those who oversee the Americans with Disabilities Act (ADA). 

There are three levels of digital accessibility conformance recognized by the W3C. These include:

• Level A: Little to no accessibility provisions.
• Level AA: An acceptable level of equitable access provisions.
• Level AAA: The widest range of built-in accessibility provisions. 

In most countries, developers are required to meet at least Level AA to maintain accessibility compliance. 

Why Should You Apply This to Your Apps?

Modern technology is an important part of daily life for people of all ages and capabilities. For this reason, designing your app or plugin to cater to as many people as possible is essential. 

While you won’t be able to please absolutely everyone, making your app as accessible as possible to as many people as possible should be something you consider during the initial development stages. Doing so will open your market up to more people and improve your overall user experience. 

Things You Can Do to Improve Your App’s Accessibility

If you’ve never considered accessibility while developing an app in the past, you might be wondering what exact steps you should take to improve your next app or plugin’s accessibility. While there are a ton of options and settings to consider, some of the main things you should focus on include:

• Contrast
• Font type and spacing
• Color choice
• Title/heading distinctions
• Audio aids
• Text alternatives for images

Don’t focus on adding too many accessibility features at once. You won’t be able to tailor your app to absolutely everyone, but the small actions you take over time can make a big impact. Plus, you can always go back later on and update the app to include more accessibility features! For now, focus on doing what you can, and doing it to the fullest extent possible. 

Contrast

According to WCAG standards, any text on your app or plugin must have a color contrast ratio of at least 4.5:1 compared to the background. Since larger text is easier to read in general, the standard is lower at 3:1. 

Having sufficient contrast between your text and background can reduce any difficulties that people with vision impairments may have while using your application. It helps your text remain legible, even in excessively low or high-light situations. 

If you want to make your app or plugin even more accessible for anyone who may struggle reading digital text, you could add an option in your accessibility settings to increase the contrast further. Some developers do this through “Dark Mode,” which changes the background to a darker color to stand out more from the on-screen text. This ensures that, no matter a person’s visual capabilities, they can see well enough to enjoy all the features your application has to offer. 

Font Type & Spacing

When designing your app or plugin, you must consider users who may have bad vision, dyslexia, and other conditions that may affect how well they can read text on a screen. Always choose a standard, easy-to-read font, such as:

• Arial
• Calibri
• Helvetica
• Times New Roman

In addition, you should ensure there is enough space between lines, words, and letters to prevent a “cluttered” experience. The WCAG suggests a line spacing at least 1.5 times the font size, letter spacing (or tracking) of at least ⅛ times the font size, and spacing between words of at least 0.16 times the font size. In addition, the spaces between each of your paragraphs should be at least twice that of the font size. 

To increase accessibility for people with visual impairments or learning disabilities, you might even want to offer an option to resize the text on the screen. However, make sure other elements on the page are not obscured by any font size increases. 

Choice of Color

Choosing the right colors to use on your app or plugin is one of the best ways to cater to people with color blindness, dyslexia, and other types of disabilities that can make reading or viewing content on a screen challenging.

The first aspect to consider goes back to contrast. Make sure not to use too similar of colors closely together on a screen, as people with color blindness may not be able to tell where the distinction is. You should also ensure your text and background colors are different enough that anyone who has trouble reading does not experience further confusion.

Another thing to think about is to avoid using color as the sole means of conveying information, distinguishing on-screen elements, or prompting a response. While color coding can be helpful to some, it can make things less accessible to those with color blindness, who have difficulty distinguishing one color from another.

Clear Title & Heading Distinction

It’s crucial that readers are able to follow the information listed on a certain page of your app or plugin easily and efficiently. While some people can quickly scan a page and find the information they need, others have more difficulty doing so.

One solution to this potential accessibility issue is making a clear distinction between your titles or headers and the rest of the text on the page. Always make your titles and headers larger than the other text, and try to include an accessibility option for users to make headings even larger if necessary. 

Although the contrast requirements for larger text are lower, maintaining at least a 4:1 contrast ratio with any titles or subtitles can increase the emphasis and make them easier to read. Each heading should clearly describe what the section underneath will discuss to allow readers to find the information they need as quickly as possible, even with reading-related disabilities such as dyslexia.

Audio Aids (Where Possible)

Some pages of your app or plugin will require significantly more reading than others. To increase the accessibility of these pages, consider adding a button that users can press to have the text read out loud to them. 

Most modern devices will already have a built-in accessibility feature like this for people with forms of vision loss or literacy challenges, so making your app or plugin compatible will greatly increase its accessibility. You can use the device’s built-in text-to-speech feature, such as Siri, or record yourself or a member of your team reading the page to ensure the intended message is clear.

Text Alternatives for Images

People with certain disabilities, such as color blindness, may have a hard time translating the content in a photo, image, or graph. If your app or plugin relies heavily on images to get your message across, try adding a description of the image below it. 

Make sure this description highlights the important takeaways that viewers should receive from a particular image. If you’d like to go a step further, add a button where the user can have the description read to them. 

Good Examples of App Accessibility

If you’re ready to start considering accessibility when you develop an app, it’s a good idea to first look at how other popular apps and plugins have made themselves more accessible. A few apps that use at least one type of accessibility feature include:

• Twitter
• Spotify
• TikTok

As you read the examples below, you’ll realize that it’s not important to pull out all the bells and whistles all at once. Even if you only have one accessibility option when you begin, you can make a significant and positive impact on a portion of the population.

Twitter

Twitter is one of the most popular social media apps today, and luckily, it features a whole section of user settings dedicated solely to accessibility. Some of the options you can turn on to increase Twitter’s accessibility include:

• Reduce motion
• Increase color contrast
• Open links in reader view
• VoiceOver compatibility settings

On Apple devices, the VoiceOver feature can be turned on through your device’s accessibility settings. This means you can tap any text you see on the screen to have it read aloud to you, making it a popular choice for those with visual and reading impairments. Twitter’s VoiceOver settings give you the option of having things like hashtags, usernames, and shortened URLs included in this reading.

Spotify

Spotify is a mobile and web application that allows users to stream and listen to all types of music. One way they make their content more accessible to users is through Voice Interactions. 

With Voice enabled, users can use the “Hey Spotify” command to quickly find and play whatever song they’re looking for without having to type in their query and scroll through a list to find it. You can also connect Spotify to your Amazon Alexa device to use voice commands in the same way. 

TikTok

TikTok has quickly become one of the most widely-used social media and entertainment apps. TikTok is popular among many demographics, so it’s designed to be inherently accessible. Creators can choose whether or not to include automatically-generated captions in their videos, and many choose to do so. 

In your TikTok accessibility settings, you can also toggle a photosensitivity setting on or off. If you experience photosensitive seizures, you can turn this setting on to prevent videos that may cause them from appearing on your page. 

Make Your Apps Accessible For Better User Experience 

As we move more and more into a world that relies heavily on mobile and web apps and plugins, it becomes even more important to consider how all demographics of the population will use and interact with the products you develop. To open your products up to as wide a range of individuals as possible, it’s essential to think about adding different accessibility features.

The possibilities are nearly endless. However, you shouldn’t let that fact overwhelm you. Start small with the features you can develop now, and over time, update your app to be more and more accessible.