We’ll be at Google Cloud Next ’24 in Las Vegas, April 9-11

Back to top
Out of focus image

Everyone involved in the production of software (developers, designers, QA, project manager, etc.) plays a role in its success and usability. This is also true for accessibility. There are standards for web accessibility, and the BBC has an excellent set of guidelines for the development of mobile and native websites and apps. But these standards are a set of suggestions and best practices, not rules and laws – not everyone follows them, and that leaves many users out in the cold when it comes to accessing necessary technologies.

It’s a challenge as a designer to think like someone with a different background — even more so if you are considering the disabilities someone deals with on a daily basis — but it’s essential for software creators make sure everyone has access to the internet as a resource. “The Web is used not only for receiving information, but also for providing information and interacting with society. Therefore, it is essential that the web be accessible in order to provide equal access and equal opportunity to people with disabilities.” (WCAG)

As designers, there are many steps we can take to support accessibility before development begins. These cover some of the most common concerns:

Color

Color is an important signifier in our society. When you see a red icon on a faucet, you know that the water that comes out is probably going to be hot. But if color is the only indicator that the water is hot, someone with a visual impairment may find themselves in a situation where they’re more likely to burn themselves. Better to pair the icon with the word “HOT.” App designers follow similar principles when designing accessible apps: color should never be the only method of communicating meaning within a product. An excellent example is a game Two Dots. This puzzle game is largely based on matching colors, but when its color-blind mode is engaged, players are able to distinguish pieces based on symbols as well as color.

Color contrast is also an important consideration in accessible design. In the early days of the web, it wasn’t uncommon for novice web designers to pair blue text with a black background or put light pink words on a darker pink field. We’ve come a long way since then, but it’s still possible for a designer to unwittingly include color combinations in their design that make it difficult for a person with a visual impairment to read text or discern shapes. Using any one of the many free color contrast checkers available online allows designers to compare their color choices to different versions of the WCAG accessibility standards and ensure that their designs are easy for everyone to use.

Navigation order

For those who may need either visual or physical assistance navigating an app, there are built-in helpers on both Android and iOS that will allow a user to navigate logically through an app — but the course has to be set by the designers and developers. As designers of both simple and complex screens, we can set the sensible order for all of the elements on the screen for the dev team to build. Without this, the user can progress through the screen, but their progression could be in an inefficient or nonsensical order, which could frustrate and confuse the user. It’s important for designers and developers to properly designate which page elements are headers, which allows users using tab switches and screen readers (more about screen readers later) to quickly move through the app without getting mired in details that don’t interest them right now.

Alt text

Alt text, which traditionally provided keywords for search engines to scan for more accurate results, also provides descriptions that built-in screen readers use to let the user know what’s in the pictures on their screen. In tutorials or other posts that rely heavily on imagery, alt text can be used with keywords to accurately describe the actions or scenes depicted. Facebook has been a leader in a similar technology, using image recognition and machine learning to identify the contents of photos posted on their service and automatically tagging the photos with the procedurally generated information.

For designers with less hefty technology on their side, alt text can be as simple as writing a few lines to explain what an image contains so a visually impaired user knows what’s on the screen as they navigate through the app. It’s an easy thing for developers to implement, and it goes a long way for users’ enjoyment of the app.

Screen readers

Both iOS and Android phones have screen readers built in or available in the app stores that function based off of the specified navigation order and the images’ alt text. People with varying levels of vision are able to use it to enhance their experience. They’re also useful for people without visual disabilities who have difficulty reading for one reason or another. The more designers do their work with these programs in mind, the more potential users are able to take advantage of their clients’ apps once they’re released to the public. Designing with a screen reader in mind goes hand in hand with setting a clear navigation order and writing clear alt text – so many elements of accessible design depend on one another!


“Nearly one in five individuals today report having a disability, but this number will rise as the baby boomer generation ages.To help this at-risk population address the lack of accessibility in the disability community, many experts have turned to technology. Tech companies have entered into this market that represents $1 trillion in annual disposable income.” (CTA)

There is a long way to go to make mobile experiences and web accessible to all, but the topic is gaining more traction every year, especially with events like CES bringing it to light in 2019. As a designer, the best way to become an advocate for a more accessible experience is to considerate it from the beginning of a project.