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.
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.
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.
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.
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.
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.
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