October 7, 2020

Accessibility In Design: 5 Things To Pay Attention To

Accessibility is a really common word, but what does it actually mean to make design accessible? Here are five aspects of design you should give extra thought.
<span id="hs_cos_wrapper_name" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="meta_field" data-hs-cos-type="text" >Accessibility In Design: 5 Things To Pay Attention To</span>

According to the World Health Organization (WHO), about 15% of the world's population lives with some form of disability. That seemingly small percentage makes up more than 1 billion of the world’s population. In other words, about 1 out of 8 people will have difficulty navigating through design that is only made for “the average person”.

When you’re attempting to understand accessibility, it’s important to listen to and interact with real people with disabilities in your research. What do they need? What kinds of designs are burdensome to them? What has worked for them so far, and what hasn’t?

Understanding their needs requires empathy, and empathy is the foundation for good, inclusive, and accessible design.

If you’re just starting out on understanding accessibility, this breakdown might be helpful to you. Here are five basic aspects of design that you should pay attention to when designing for accessibility.

Language

When it comes to the words on your digital product, use simple language and avoid jargon to cater to users on all levels of language proficiency. Simple language includes all, but complex language excludes people who only use the language on a basic level. 

Use non-textual cues like pictures and colors to include non-literate users, and allow voice input and autocomplete text fields to accommodate people who aren't able to use keyboards.

When writing for accessibility, it's always important to optimize content for people who use assistive technology like screen readers. This includes being specific with button labels, and giving context to action buttons. For example, “Add to Cart” would be more understandable than just “Add”, because it mentions the subject of the action.

Color and Contrast

Avoid using design that solely depends on color to be understood. Take Google Maps for example — red is used to indicate traffic congestion, and green to indicate clear roads. But along with that, they also include a brief breakdown on the traffic condition in text, and provide the option for voice directions. 

If you have to use design that depends on color, it’s always good to include labels or other visual cues. Otherwise, make use of contrast to help users with low vision and color blindness interact with and better understand color-coded visual cues.

Contrast is important for users to distinguish between text and non-text elements. This is required for good readability for not only the visually impaired, but also able-bodied users. Under bright sunlight or with low screen brightness, a bad contrast ratio would negatively affect any user’s experience on your app or website.

W3C recommends a minimum contrast ratio of 3:1 for large text (14pt bold or 18pt regular and above), and 4.5:1 for smaller text or when visual impairment is accounted for. 

Hierarchy

Your UI should have a simple and clear hierarchy of importance. For example, action items should be positioned at the top or bottom of the screen, or have shortcuts for easy access.

The reason why important elements are recommended to be at the top of the screen isn’t only because it’s common. It also helps with accessibility by including people who use screen readers. When these users explore the elements on a screen by touch, they experience an interface linearly, from top to bottom. 

Since screen readers rely on the top-down structure of HTML, for accessibility’s sake, it’s important for developers and designers to keep the top-bottom left-right visual hierarchy in mind when deciding on the arrangement of elements including images, texts, and buttons.

Privacy and Security

Privacy isn’t something most of us have to think too much about, but it is for users with vision or hearing impairments, or simply those who depend on voice commands, assistive technology, or other people to complete tasks. Making private information secure is important in order to make your website or app accessible beyond the able-bodied user.

One way to do that is by providing controls for personal information to be hidden when prompted, or require extra permission before allowing private information to be accessed or read aloud.

Devices

Last but not least, don’t assume everyone uses the latest tech on the newest devices. Include older models and humble devices when you design — use responsive design to include smaller sized screens, offer lite versions of your app or simplified versions of your website, and use design that demands minimal battery usage. 

After all, lighter works for everyone including those with the newest tech, but heavier may leave out a good bunch.

We’ve Got More

This barely scratches the surface on accessibility, but if you’re interested in more technical breakdowns on design and accessibility, you’re in for a treat — there’s a lot in the works! 

Follow us on our socials to get the latest updates on new content.



Subscribe to our newsletter

While you're here, sign up to receive email updates from our blog about all things related to building your own product, selecting the right partner, and more.