A good designer doesn’t implement attractive designs that please them. They design an interface for everyone.
As designers, we sometimes forget that the best interface is the one that can be accessible to everyone, including people with disabilities. It is good to always keep in mind when designing that everyone should get to experience your interface.
In this article, we will go through a few principles to make your website and app accessible to everyone.
Understand all forms of disabilities
A disability is any form that limits a user from conventionally accessing the device. It is not only fixated on permanent disabilities such as blindness, deafness, and cognitive impairments.
This is where designers come in to fill in the void to ensure users with disabilities can access the interface. We must first understand the three forms of disabilities to consider in any possible situation:
Permanent Disability: E.g., blindness is a permanent disability.
Temporary Disability: E.g., undergoing laser eye surgery that requires days to recover is a temporary disability.
Situational Disability: E.g., keeping your eyes on the road while driving is a form of situational disability.
The POUR Principles
According to Web Content Accessibility Guidelines (WCAG), we must understand four principles when designing an interface. Go through these POUR principles and ask yourself if the following criteria are satisfied:
P – Perceivable
Can the information in your interface be perceived through sight, hearing, or touch? Present information in a manner that every human being can perceive it.
O- Operable
Can the information be accessed using a keyboard or a mouse? Ensure that the user can input and use the interface by any means.
U- Understandable
Is your interface easy to comprehend? Present information in the user dashboard clearly, whether it is to do with formatting text sizes to make it more readable or labeling icons.
R- Robust
Can your interface work across browsers, smartphones, and other assistive technologies? Ensure the dashboard can be interacted with using many assistive technologies.
How to make your design more accessible?
Here are a few points to consider when making your design accessible to everyone:
- Make the content structure clear
Provide clarity when writing and avoid jargon wherever possible to make the content understandable to everyone. Use ALT description for images, icons, and hyperlinks so all users can understand specific elements. For multi-media, it is best to use an alternate form to support your content. E.g., have captions and transcripts for video content.
When optimizing your texts, ensure the line height (spacing) is at least 1.5 times the font size and the font size is not too small to read for the elderly and people with vision impairments. Have zoom-in features in mobile devices for reading smaller fonts.
Break down large chunks of texts into smaller sentences and paragraphs to make the text easily readable. Consider optimizing your web and app content in different languages to cater to people worldwide.
- Adjust between contrast and color
When designing your interface, visuals should look pleasing to everyone’s eyes and easy to perceive. Avoid fancy blinking and moving elements across your webpage or app to make the experience comfortable for every user.
Distinguish important links and icons with vivid colors. Avoid color combinations that will confuse the color blind unless it is labeled appropriately. An important point to note is to don’t rely only on color to define elements.
Utilize a mixture of text, color, and other symbols to describe an essential field for proper interpretation. E.g., Do not only use color to highlight error fields in forms. Support the error message with a text or graphic to assist people experiencing vision impairment.
It is most desirable to adopt a color contrast ratio of 4.5:1 with its background. Ensure enough contrast between the text and its background, so users focus more on the information. Having black text on a white background or vice-versa is the most aesthetically pleasing look for interfaces.
- Don’t overcomplicate Forms and Menus
A common mistake we see some designers make is creating Forms and fields without borders. It tends to confuse users. It is best to add borders in the Forms to let the user know where to input data.
It is ideal to label fields instead of using placeholders. It provides clarity to the users. As mentioned before in the previous point, don’t indicate error fields in Forms by only color. Use some descriptive text or symbols to describe the error.
Ensure your lists on your app or website are numbered and categorized in relevant order. It makes picking up information easier. Avoid non-modal dialog for your Menus, so keyboard users and other assistive technologies can easily access the menus.
- Don’t forget about keyboard-only users
Some users can only interact with your interface using a keyboard. Optimize your web interface to make sure every piece of information is accessible with a keyboard or touchpad.
Implement a visual indicator for all tags and components when users use a keyboard. Give a good contrasting color for the focus indication. Ensure they don’t hover to search for information in your interface. Everything on your web should be labeled and described so keyboard users can access the interface conveniently.
- Optimize your interface for all kinds of devices
Not only must you optimize your content for mobile devices, but all types of assistive technologies. Using ALT description for images is a game-changer for people who use screen readers to perceive your content.
Make sure people don’t hover all over your interface. It is helpful for people who access devices using a voice recognition tool. They require hyperlinks to be numbered so they can promptly say the number to open links.
Carry out testing with real users and equip your interface to interact with any assistive technology.
Design for the world!!
We must be clear that accommodating these principles doesn’t necessarily hinder our creativity. Coming up with design patterns to shelter every kind of individual is innovation itself.
Use these principles in your checklist and design an interface that is accessible to everyone.