How to design for accessibility? — Design for All

When you’re designing a product for accessibility, you consider designing a product that can be used by everyone, every type of user, regardless of their conditions or disabilities.

Including users with low vision, blindness, motor disabilities, and hearing disabilities. Accessible products let these users participate and understand easily using your website or apps.

source: Toptal

Accessibility vs Usability

These two words sound similar, right? But actually, they have different meanings.

Accessibility is giving access to everyone to use your product, meanwhile, usability means that your product is easy-to-use.

The Problem of Accessibility for Designers

Many designers worry if their design will look less attractive and then fewer users use it. What can we do as designers? The effective way is to design the product for the majority of users.

If there is something that confuses people, it might also confuse users with disabilities.

Another way, you test your product to 2–3 blind users and observe them. You will get their feedback and understand their troubles, which help you to improve your product.

How to Design for Accessibility

1. Use contrast colors on text and background

It’s difficult for people with low vision to read text on low contrast background.

So, choosing contrast colors of the text and background can help them to see it clearly. The tool that can help you to check contrast: WebAIM.

Source: NMSI

2. Use colors, text, icons, shape, and pattern as indicator

Don’t rely on colored text only. Try to use another visual indicator to distinguish the data.

For example for charts and graphs, you can communicate the informations through different shape, pattern, and size. It’s easier for users to identify the information quickly.

Source: Brandeis University

Source: Keen IO

3. Printing it in black and white to check

If the result of the printed product can be understood by your users… good job! it shows that you create a good design with accessibility.

Do you want to check more about how accessible your design is? Use this tool ColorOracle.org.

4. Make usable focus indicators

Here is an example of a focus indicator: the blue outlines around input, links, and buttons. The focus indicator is useful for blind users who use screen readers.

Source: CraftCMS

5. Write an image description

People with low vision and blindness use screen readers to surf the internet. The screen readers will read the text to these users.

So, by writing text descriptions of images on your website, you are also helping disabled people to access your website.

Through <alt> text, users can read the image. What if you don’t write the image description? Some screen readers will only read the file name.

Source: 9to5mac

6. Make keyboard navigation

Users with motor disabilities and blindness use keyboards to access the internet. For example, the Tab button is to navigate elements on the web.

source: Orange

7. Widgets to resize the font and change colors

• Dyslexia Action (check the “Read aloud” button),
• Dyslexieweb (in Dutch; check the “Lees voor” button),
• NABU (in German; check the “Vorlesen” button).

8. Put audio and video

Video is not accessible for everyone, likewise audio. People with low vision and blindness can’t see the video, so they need audio to describe what is happening in the video.

Meanwhile, for people with hearing disabilities, they need videos with descriptions or subtitles. For example: *dog barking*, *sneezing*, *gun shooting*.

9. Test your users with disabilities

When you’re designing, some questions pop up in your head “is it enough?”, “Will the users understand it?”, “Can the users know what is it?”.

Let’s try to test your website for your users with disabilities. Observe their problem, what confuses them, and what do they think about your website.

This User Testing will help you to improve your product or website to be more accessible for everyone.

Voilà, this is my first posting on Medium about UX/UI Design, since I decided to switch my career from Creative Marketing to UX/UI Designer two years ago.

From today, I plan to write more articles about what I have learned and my experiences to help myself improve in this field. Who knows more people read this and it’s useful for them too. I hope :)

If you have any other tips or recommendations, feel free to share on the comment section :) See you!

Source:

• Don’t Make Me Think! book by Steve Krug
• joedolson.com
• How to Change Text Size or Colors — www.w3.org
• Design for everyone with these accessibility — Figma