Accessibility is a buzzword that keeps popping up in our feeds. And the truth is that equal access to technology should not be a hassle but a given for everyone. In this article, we'll discuss accessibility in the context of Product Design.
We'll define accessibility, product design, and user interface and consider their importance. We'll move on to accessibility in UI design, giving you pointers for accessible UIs. Finally, before we go, we'll look at a few examples of accessible UI in the industry. Are you ready to reach everyone?
What is Accessibility?
If anyone can use something, it's accessible. Yet, most products focus on the majority of potential users. For instance, users with no issues handling a traditional website or mobile app. But what about people with disabilities or impairments?
Well, accessibility revolves around these people. In design, accessibility means you are aware of these users' needs and build a product that fits them.
Accessibility vs Usability
Often, accessibility and usability are seen as the same thing. Yet, there are some significant differences between them. Usability should include accessibility. This approach focuses on a product that would be unusable for a person with a disability. Nonetheless, usability's emphasis lies in making effective and satisfying to use products. It doesn't focus on the experiences of people with disabilities as accessibility does.
Accessibility vs Universal Design
As a discipline, universal design focuses on making accessible-to-all products and services. Accessibility and universal design may sound synonymous. But, the former is the consequence of the latter.
Accessibility helps a specific section of the population access a product or service. Universal design aims at making a product or service accessible to as many users as possible.
Why is Accessibility Important?
Every person on the planet should be able to access any tool or product they desire. Thus, the principal value of accessibility lies in making that a reality. Beyond that, focusing on accessibility has many benefits:
● People with disabilities make up 15% of the world’s population, according to a WHO study. Not only are they relevant by themselves, but it’s also a considerable untapped market.
● If you have a website, focusing on accessibility can do wonders for your SEO.
● Regardless of the product type, making it accessible is bound to improve your brand image.
● Increased accessibility means a better User Experience (UX). The better the UX, the more people will want to use and continue using your product. So, accessibility can help you improve user acquisition, retention, and engagement.
What is Product Design?
Through Product Design, designers integrate users' needs and stakeholders' expectations. As a result, they create successful products for both ends. Moreover, the process includes a website or app's ideation, creation, and iteration. Further, Product Designers solve problems users may have in business-compatible manners.
What is User Interface?
The User Interface (UI) comprises all elements that make it possible to interact with a device. This procedure includes appearance, presentation, and interactivity. A good UI will make it easy for users to use a website or app.
At this point, we should pinpoint that User Interface differs from User Experience. They are, regardless, inextricably connected. UX revolves around users' needs and spans the entire development process. It also looks into how competitors are fulfilling user needs. Meanwhile, UI focuses on visual aspects or aesthetics.
Why is User Interface (UI) Design important?
As we've established, users interact with your product through the UI. So, UI Design makes the interface that makes it possible to use a website or app. Further, good UI Design ensures users have a positive experience through all steps.
We've all visited a website where we needed help finding the information we wanted. Perhaps you gave up on a mobile app because you couldn't understand how to perform a specific action. These are examples of lousy UI Designs that can cause a product to fail.
Your UI has the potential to drive traffic, attracting and acquiring new users. It can also boost retention, reduce dev and customer support costs, and improve UX. As you can see, the UI can make or break a product. Focusing on User Interface design is crucial for a healthy website or app.
What to consider for UI Accessibility?
This question is quite simple. UI Accessibility ensures easy navigation on your product's interface for people with disabilities. A product's UI will be accessible if it's clear, robust, and specific. Fifteen percent of the world's population currently live with disabilities. Below, we'll focus on some need-to-tackle edges while making an accessible product.
1. Visual Impairments. Vision impairments and blindness affect o ver 2 billion people worldwide. Of these, 43 million are blind, and 300 million are colorblind. Visual impairments can keep users from seeing clearly or perceiving color contrasts.
2. Auditory Impairments. According to the WHO, over 1.5 billion people across the globe are deaf or have hearing loss. That's almost 20% of the population, which specialists expect to reach 2.5 billion by 2050.
3. Mobility Impairments. Over 130 million people worldwide need a wheelchair. Also, a million people have a limb amputated yearly. Mobility impairments can impact users' skills to make precise movements.
4. Seizure Impairments. Fifty million people live with epilepsy, while 5 million get diagnosed yearly. Three percent of these will have photosensitive epilepsy. This subset means that flashing lights or some visual patterns can trigger seizures.
6. Speech Impairments. In the US, 18 million people have speech, language, or voice disorders. These include stuttering, selective mutism, articulation errors, and apraxia.
6. Cognitive Impairments. Almost 240 million children have learning or cognitive disabilities. These include, among others, dyslexia, dyscalculia, ADHD, and autism. Also, there are over 50 million people with dementia. Intellectual disabilities affect another 200 million people worldwide. Likewise, these include down syndrome, cerebral palsy, and fetal alcohol syndrome.
How to Build Accessible UIs?
So, how can you help all the people above easily access your user interface? It may take some planning, but we promise it will be worthwhile. In this section, we'll go over various tips to help you make your UI accessible.
Further, you can find an excellent reference in the WCAG. The Web Content Accessibility Guidelines are all-around and quite complete. Further, its 2.0 version reached the ISO standard in 2012 and has translations into several languages.
1. Accessible UIs Contrast
This area is excellent for helping those with color blindness or visual impairments. High contrast between your text and background color can be helpful. Often, the relation is 4.5:1 for standard text and 3:1 for large text and icons. You can use accessible color palettes and contrast checkers to ensure it works for all users.
2. Accessible UIs Colors
Leveraging contrast with color is essential. Yet, you shouldn't rely only on it to convey information. Colorblind people might not notice these distinctions appropriately. Further, they might miss out on important information.
You should find alternatives for elements like links, success, or error messages. Also, avoiding certain combinations, like red and green, red and black, and yellow and blue would be best.
3. Accessible UIs Media
It's good to include text alternatives. You could use audio and video to aid those with dyslexia or visual impairments. Make sure there are identifiable play and pause buttons.
Moreover, including speed adjustments is a great strategy. For audio or video, you should add captions or transcripts. This approach helps those who are deaf or have hearing impairments.
Further, all images and non-text elements should have Alt Text. Alternative Text helps those with visual impairments to understand an image. Screen readers can convert text to speech so people can hear the alt text in an app or website.
A good alt text describes the idea and how it relates to your product. Yet, it would be best to be careful to make it short.
4. Accessible UIs Typography
We all love an original typeface, but there are some things to remember to ensure everyone can read them. Sans serif typefaces like Arial are more convenient for people with dyslexia. You should also use a 14-16pt text size to help people with visual impairments or dyslexia.
Use bold instead of italics for emphasis and have around 60-70 characters per line. Victor Widell's project is an excellent example of how dyslexia affects reading. We must add a warning here since Widell’s site can be triggering for other impairments. Please be careful!
5. Accessible UIs Navigation
Users should be able to navigate your app or website intuitively. Navigation elements should follow the same order on all pages or screens. Plus, users shouldn't need search tools to use your product.
Clear visual hierarchies with organically-related details should be a no-brainer. But that's not always the case. You can ensure that UI elements create a coherent narrative map. Avoid overcrowding, and use an easy-to-read font and different heading sizes. Also, keep your headers informative and ensure your content is relevant.
Another tip is to use related-items lists. It helps users view and interpret information. And, since we’re on this path, your links and buttons should have a clear and meaningful purpose. Go for descriptive information rather than the overused “click here.” It will help people with cognitive and visual impairments easily access your site or app!
In this context, responsive design is another great friend of accessibility. It allows users with different screen sizes or orientations to get the most out of your app or website. You can go further by enabling users to adapt and rearrange their UI!
But remember to present this feature to users and make it easy to spot. Another excellent accessibility tool to add is an accessible toggle. Plus, it doesn't interfere with UX for other users. You can have a default and an accessible mode, with a switch for users to move from one to the other.
Conclusion
Making your Product Design's UI accessible should be a core focus for your business. Everyone should have access to all available content! Not only unrestricted access helps users. Also, it opens a whole new profitable market for your company.
We hope this article gave you enough information to sway you into accessible UIs. We also hope we have provided you with enough tools to make it a reality!
