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?
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.
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.
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.
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.
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.
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.
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.
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.
Vision impairments and blindness affect over 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.
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.
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.
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.
In the US, 18 million people have speech, language, or voice disorders. These include stuttering, selective mutism, articulation errors, and apraxia.
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.
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.
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.
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.
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.
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 trigger warning here since Widell’s site can be triggering for other impairments. Please be careful!
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.
Below, we'll cover some examples that successfully incorporate accessible UI design.
This service is the BBC’s online streaming platform. Both web and app versions are easy to navigate and usable with assistive technology. There are mouse and keyboard-accessible tooltips with detailed alt texts. You can also navigate the whole site with the Tab key or button.
The iPlayer has an Accessibility Help section. There, it includes helpful information for users with disabilities. Finally, the streaming service includes subtitles and audio descriptions for all its content. It even has sign language in some cases! You can find more information about iPlayer’s accessibility features on this page.
Intercom Messenger is another example of an ideal accessible digital tool. The custom communication platform includes screen reader support, color contrast, and keyboard navigation. Also, Intercom compiled a list of accessible apps and integrations for their Messenger. You can customize the platform to make it even more accessible to disabled users.
Zendesk is a popular customer service software. Its accessibility features include straightforward navigation, keyboard shortcuts, and image tagging. Links have clear indications, and it offers several communication channels. Also, it keeps flashing and blinking to the bare least. You can find a list of all Zendesk’s accessible features here.
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!
