Did you know that 15% of people with severe disabilities use the internet daily? Among them, the highest percentage is between the ages of 15 and 29. Want to know what the internet looks like for them? Install the VoiceOver app on your computer and try to find something, write an email, or order a product.
There are two new challenges that modern design must address: inclusivity and accessibility. But don’t confuse them or use one in place of the other.
Let’s understand the difference between inclusive and accessible design
Accessible design focuses on direct and simple interaction between the user and the interface. Inclusive design, on the other hand, is tailored to the needs of people with disabilities.
Conventional design is created for the average user (who doesn’t really exist). That’s why even we sometimes encounter common problems while using various interfaces. Now imagine how complex that experience can be for someone with a disability.
Twenty years ago, the independent U.S. federal agency ADA created the Web Content Accessibility Guidelines (WCAG) . These guidelines are regularly updated and serve as a fundamental rulebook for inclusive design.
Key WCAG principles
Let’s start with color
In this case, the website design process should be based primarily on user care and usability, and only then on visual excellence. Keep in mind that most users browse from mobile devices, which means all elements must have sufficient contrast, especially when visibility is affected by sunlight glare.
Website interaction for a colorblind person is very different from that of an average user. Common color combinations without additional indicators might be meaningless to them.
To put yourself in their shoes, use the Coblis tool. It allows you to simulate color perception on the web as if you were colorblind.
It's crucial to allow users to customize the page style themselves. The simplest thing you can do is offer three color scheme options. More advanced solutions include custom settings for button color, background, text color, and even link appearance.
To communicate important information, always use text as well. For example, if a form is highlighted in red, always include a warning message next to it.
Media files
Your site might be used not only by people with poor eyesight, but also by blind users. These users receive information through special screen reader software (as the name implies).
Text
This is how people with dyslexia see text. Your main task is to simplify the perception of any written content for them.
And a few obvious tips: avoid italics, long words, line breaks, and complex sentence structures.
Now let’s talk about meaning. You must ensure your text is understood correctly. Use the Gunning Fog Index to evaluate it. This is a test that measures the readability and clarity of any written content.
Controls
For users with motor impairments, it can be difficult or impossible to navigate a site using a mouse. Therefore, it's essential to provide full keyboard navigation support.
Navigation
Avoid using hidden navigation elements.
Remove hidden navigation features. If you want users to recognize important and informative elements, don't hide them. Instead, highlight functions and links that should be screen-reader friendly and easily visible.
One more point: don’t forget to use tags before headings, lists, tables, and other important layout components.
These recommendations are just the tip of the iceberg when it comes to creating a convenient digital ecosystem for people with disabilities. Imagine having the power to make life a little easier for those who face discrimination daily. Inclusive design is a doorway to a world without barriers.
We explain how to create truly complex designs, even with zero experience, in our course “Web Designer: Lucky Ticket to Thailand”.