With governments taking measures to make products accessible for everyone, designers need to have empathy and create a different experience for different people through the same design. A well-designed product should be accessible to different users such as users with low vision, any type of blindness, and motor and hearing impairments. With inclusive design, people with disabilities can perceive, navigate and interact with your product. This article is a guide to accessibility design for web and mobile. It follows the guidelines and principles of WCAG 2.0.
To design a product that needs to be accessible to everyone, you must understand your audience, and create a strategy by doing user research and by creating lean personas. There should be consistency in the design all throughout your product.
W3C Web Content Accessibility Guidelines (WCAG) 2.0 has created a set of guidelines and principles that UI/UX design companies, developers, and product owners can use to make products accessible to different users. There are 4 principles of accessibility that lay the foundation for anyone to access your product.
- Perceivable: The content should be presented in a way that users are able to perceive the information.
- Operable: The interface of the product should easily be navigable without any hassle.
- Robust: The product should be able to accommodate different types of users.
- Clear: The design of the product should be clean without any clutter.
Provided below are some guidelines that will help your product to be user-friendly for every type of user.
1. Color, Contrast, and Text
The color palette should be accessible. Additionally, a poor choice of colors on the screen can cause problems for colorblind and low-vision users. Specifically, for these users, high contrast is important. The contrast ratio between a color and its background should range between 1:21 based on the relative luminance of colors.
Users with colorblindness, can not tell the difference between the colors. So, the design should not be based on colors but use elements like patterns, texture, strokes, text, icons, animations, etc. to communicate with the users.
For font contrast, 18-point text or 14-point bold text is judged to be large enough to require a lower contrast ratio which is the ratio of 3:1 for standard text and vision. Small text should have a contrast ratio of at least 4.5:1 against its background. Don’t hardcode font styles and sizes. Use em instead of px.
2. Language
Use simple language. Moreover, consider that there are plenty of users for whom English will be a second language. To accommodate them, write paragraphs that can be easily scanned, and include more bullet points or short paragraphs. Structure pages in a way that allows text to be easily scanned and sentences to be understood. Additionally, designers can use images, icons, or actions to aid user comprehension. Providing definitions for unfamiliar words and creating helpful links for users to browse through can also enhance the user experience.
3. Audio
Users should be provided with alternatives to audio like closed captions, a transcript, or other visual alternatives to critical audio elements and sound alerts (but it is best to avoid starting audio automatically, especially if the user is using audio to navigate). If any audio is being played automatically on your product for more than 3 seconds, there should be an option to pause or stop the audio or the user should be able to control the volume.
4. Focus
Focus is an important part of the accessible design for the visual layout. It should determine the order in which the elements should receive focus first. It should tell users where to move forward when the focus of the elements disappears. From the accessibility point of view, there should be a combination of visual indicators and text. The focus should transition between screens and elements seamlessly.
5. Keyboard Accessible
Keyboard accessibility is beneficial for users who are blind, have low vision, or have motor impairments. This entails ensuring that content can be operated using a keyboard. It’s important to ensure correct tab orders for navigation order and hierarchy. Additionally, provide both keyboard and mouse access to all functions. Lastly, ensure that all elements on the screen can be resized using the keyboard.
Some resources to help with accessibility design:
Always design products with people first in mind. The products are designed to bring in the users and make them happy with the content we provide.
If you have any questions regarding the requirements and standards that are needed for creating digital products, we will be happy to help you.
UX Audit for Inclusive Design
Idea Theorem has recently launched UX Audit services for you to understand where you are missing pieces to gain a more user base.
—
What’s Next
Idea Theorem is an award-winning design & development agency based in North America. Through our empathy-driven approach, we have crafted digital products that have positively impacted over 10 million users. Our mission is to shape the digital future by delivering exceptional experiences. Contact Us if you have any questions; we will gladly help you.
