Voices is an online marketplace connecting voice actors with people who need voice overs. At Voices we strive to follow our E for Everyone value, meaning that any content posted on the site should be suitable for all ages. It’s also important that our marketplace can be accessed and used by everyone regardless of their abilities. With approximately 22% of Canadians having one or more disabilities, inclusive design is crucial.
Inclusive design can help bridge the gap between accessibility and usability. The Web Accessibility Initiative (WAI) defines these two as:
Taking this into perspective, we have accumulated five design practices to be aware of while striving for inclusive design.
1. Design System Colours
Worldwide, there are approximately 300 million people who have a colour vision deficiency. As a result, paying attention to the colours used in your design system is important.
The Voices design system passes the WCAG AA standards, the contrast ratios are 4.5:1 for normal text and 3:1 for large text. When designing, you can check your contrast by using an online contrast checker (WebAim, or WCAG Contrast Checker), or run software plugins like Stark, or Color Contrast Analyser.
A key feature to keep in mind when incorporating colours into UI design, is that colour should not be the only indicator of actions. This is due to colour blindness and other visual impairments. In other words, avoid using only colour to explain the UI (do not rely on red for “bad” and green for “good”). Rather, it is best practice to add helper text to explain what is needed or missing.
Red-green blindness is the most common colour blindness as stated by the National Eye Institute. “Protanopia and deuteranopia both make you unable to tell the difference between red and green at all.”
Here’s an example of a Voices form input error. Notice the red outline is accompanied by an exclamation point icon and a text explanation of what is missing.
2. Text Sizing
Although text sizing can be changed on the user’s side to fit their preferences or needs, there are some guides that we should follow to allow for comfort across devices. It’s important to note that different fonts and styles can represent the same size, differently. Generally, 16px is a good starting point, and this is increased for text-heavy pages vs. interaction-heavy pages. The Learn UI Design Blog outlines the differences between these pages.
Text-heavy pages are when the user is primarily expected to read the content on the page. An example of this would be our How It Works page on Voices. Our users come to this page to learn and read more about Voices, so we want this to be an easy and enjoyable reading experience. Since text-heavy pages should have a text size between 16px and 20px, we chose 18px for this page.
Interaction-heavy pages have different guidelines. This is where the main content isn’t text, but an interaction the user is expected to take. For example, when searching through voice actors on our site (take the audiobook category as an example), we decrease the text to include a range from 16px to 12 px depending on the importance. This allows the user to not be overwhelmed with the text, and let the actor’s voices speak for themselves.
When designing for mobile, it is always recommended to double check your designs on the appropriate size screen. We all know text sizes look different on mobile devices than on a desktop. To aid this, you can use mirroring applications to ensure the specs are as expected.
3. Touch Points
Touch points are critical for people to utilize any platform. Touch points refers to the clickable area of a link or button — usually with your thumb while using a mobile device. We understand touch points can be difficult for a wide variety of users.
There are varying touch point standards. For example, WAG 2.0 and iOS have a 44px by 44px standard, while Material Design has a 48px by 48px touch point standard. The touch points include interactive components actions that are directly relevant to the primary task or flow. It’s important to note that the entire component doesn’t need to be 48px by 48px (or 44px by 44px) but can include the component plus the padding space around it.
However, there are some exceptions. It is best practice to increase the touch target size in specific scenarios, such as when the results of the interaction cannot be easily undone. Increasing the touch size can help the user avoid accidental stressful situations.
Other exceptions include multiple links to the same location, anchor links within a paragraph or sentence, and footnote links.
4. Alt Text
Alt text is important for users who use a screen reader as it describes the image using words instead of skipping over the image completely.
Generally, it is best practice to keep your alt text fewer than 125 characters. Keeping it short and simple will help the user navigate the platform quickly. It’s also good to know that some screen readers will completely stop reading at 125 characters, so keep it short so the users can get all the information. However not all images require descriptions via alt text. Linked images do not need descriptive alt text, as the alt text can simply include where the link will take the user.
It is important to remember not to start your alt text with “picture of…” or “image of…”, the screen reader will announce that it is an image. You can just jump right into what the user came here for.
When writing, make sure to describe the image and be specific. Here’s an example:
Bad Alt Text: A person sitting at a computer with a graphic behind them.
Good Alt Text: A man working at a computer and smiling, with a network of voice talent avatars in the background behind him.
Complex images such as graphs, charts, maps, diagrams and illustrations require a short description as well as a long description. The long description can be found on screen or can be linked to a separate page, however the alt text must include where to find the long description. The Web Accessibility Initiative outlines four approaches you can take when writing alt text for complex images.
5. Keyboard Functions & Focus States
The focus state helps identify which component has the focus. Focus states are mainly for users who rely on the keyboard to navigate a site. This can range from mobility disabilities to visual disabilities. WCAG 2.0 lists the following users as, “People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.” Without keyboard navigation, the platform’s experience can be completely exclusive to large groups of users.
Focus states are needed on any interactive portion of the website, not just buttons or links. When the interactive element receives the keyboard focus, a visible border should be displayed. Here is an example of our focus states. The user can switch between the buttons via the tab key:
If no focus state is designed, developers can specify a default focus state which will automatically be applied to the entire platform. Here’s an example:
A Final Note
We understand that this isn’t a be-all and end-all solution when it comes to accessibility and that people’s needs can’t always be met by following guidelines. Further, we understand that every accessibility guide can’t always happen at once, especially in a fast-moving company, but accessibility is an ongoing growth opportunity in which we are constantly trying to improve.
These five components of inclusive design outlined in this article are a great start for designers to make inclusive design a part of their design system from the beginning.
Let us know how you design for everyone, and thanks for reading!
