Smart Strategies for Designing Accessible Apps and Websites

The World Health Organization estimates that 285 million people worldwide are visually impaired. That includes people with moderate to severe vision impairment and blindness. Smartphones were first designed with sighted people in mind, but companies like Apple have made great strides to help those who have trouble using these devices due to vision impairments.

That still leaves responsibility to product owners, designers, and developers to create apps and websites that are accessible for everyone. Designing for accessibility is a broad topic, but we’ll focus on vision impairments here with a few tips from our team.

Consider Color

One in 12 men and one in 200 women are color blind. That’s almost five percent of the world’s population. Before adding color to your designs, think about how your app or site will look in shades of gray. Will the content and navigation be easy to understand without color?

Senior Software Developer Sam Corder recommends using color to enhance the product’s experience instead of using it to convey important information like denoting state. Additional visual cues like styled type, tooltips, and symbols will help highlight content and navigation. For example, signify that a user missed a form field with an exclamation point in that box, rather than outlining the box in red.

Correct Contrast

According to the Web Content Accessibility Guidelines, the contrast ratio between text and its background should be 4.5:1 for those with 20/40 vision. This ensures that people with moderate vision impairments and color deficiencies can still read the text.

“Tools like Colorable can show you if you have acceptable levels of contrast for readers,” says Senior Front-end Developer Brandon Pierce. Color Safe is another great resource if you need some extra help building accessible color palettes.

You can take contrast a step further by allowing users to adjust the foreground and background colors. For example, NetNewsWire iOS users can toggle between light and dark themes to accommodate their preference.

Write for Screen Readers

A 2015 Web Accessibility in Mind study showed almost 70 percent of people use screen readers to assist them on mobile devices. VoiceOver, Apple’s gesture-based screen reader for iOS, reads aloud what you’re touching as you move your fingers around the screen. Writing clear values for each the UI’s elements will help create a positive experience for those who can’t see the screen.

“If the designer is comfortable with Xcode, they can handle much of the VoiceOver work by adding values to all controls in interface files,” says Staff Designer John Marstall. “The key values are ‘Label,’ ‘Hint,’ and ‘Identifier.’”

These values describe each control’s current state and how someone can interact with it. When testing the app with VoiceOver, listen for control descriptions that are absent, incoherent, or inaccurate.

Improve Metadata

Metadata, an important aspect to consider when designing the content structure of your app or site, provides key contextual information for each element on the screen. That’s especially helpful for those using screen readers. However, having unorganized metadata can actually muddle the screen-reader experience.

“There may be bits of metadata included on the screen, such as a ‘minutes ago’ timestamp, that become jarring when read out loud by VoiceOver,” says Marstall.

As you test your app with VoiceOver, work through the content hierarchy and make sure that metadata doesn’t come before its parent.

Design for the Greater Good

At every point in the design process there’s an opportunity to think about how your designs can be more inclusive.

Designing an accessible product benefits a business’ bottom line, but, more importantly, it’s the socially responsible thing to do.

While this advice just scratches the surface of accessibility, incorporating it into your designs will help provide a better experience for a much wider audience.

Follow along on Twitter as we continue sharing tips from our team and other design and engineering experts on creating accessible digital products.

For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.

Black Pixel is a creative digital products agency. Learn more at blackpixel.com.