.svg)
Approach
Work
Labs
Resources
Store
Talent ↗
Join Turtle
Introducing web accessibility standards and principles in user interfaces.
Imagine you’ve found a perfect food spot to try that you’ve been waiting in line for and when you finally get to the front you see a small, faded, hard to read “cash only” sign at the door. Unfortunately you have no cash with you, so you leave the line in shame.
Although this example is trivial, it’s easy to imagine how design that doesn’t account for accessibility issues can have a significant impact on people’s lives. This is especially true for people with visual impairments, or other challenges that we would not typically see as disabilities.
The concept and practice of accessibility ensures that people with disabilities understand how they could see, hear, and interact with spaces and structures around them. Although it may be less apparent, web accessibility allows people with disabilities to interact with digital environments through interfaces, therefore a core to good product design.
When we talk about web accessibility, we are talking about the Web Content Accessibility Guidelines (WCAG) standards that are defined by Tim Berners-Lee and the World Wide Web Consortium (W3C) organization. These standards are meant to ensure that the web works for everyone regardless of difference in their hardware, software, language, location or ability.
The standards and guidelines are based on these four main principles:
To ensure that the web meets these principles, WCAG standards are measured by three levels: A (lowest - least accessible), AA, and AAA (highest - most accessible). These levels describe the ease of access for people with disability in terms of usability and understandability. Usually we determine this with machine and human evaluation. As an example, designers use design principles as well as software to check accessibility, such as measuring the colour between elements to ensure there is enough contrast.
One note of caution is that even at the highest AAA level, designs may not be accessible to all types of disability, especially for cognitive and language and learning areas. That’s why it’s important that designers take into account the specific users they are designing for as well as pushing for accessibility standards to evolve and become more and more inclusive.
In this article we are going to focus on visual accessibility, the Perceivable pillar. However you should be aware that there are other aspects like content, copy, data analysis, and development that contribute to accessibility.
For tackling projects like TELUS STORYHIVE, where, from start to finish, we’ve been involved in each phase of the design process, from strategy to production, we focused on making their design system accessible, convenient, centralized, scalable to their growing needs. Their programs are inclusive to both emerging and more established film creators of a wide variety of ages and demographic backgrounds. Accordingly, users could have very different levels of comfort navigating the STORYHIVE website. Accessibility was a major concern for STORYHIVE and a key factor to successful experience.
Generally when we design accessible products, we focus on several main factors to ensure that the user interface is as inclusive as possible. They are contrast, typography, visual cues and visual presentation.
Contrast is the measure of the difference in brightness between colours. Contrast is what allows users to distinguish one element from another. The higher the contrast is, the easier it is for users to see the difference. The lower the contrast, the harder it is for users, especially in low light or bright light enviornments where the screen is impacted by glare.
Contrast is also an important measure because it accounts for users who might have colour deficiencies. While a certain colour combination may be easy for you to see, it might be nearly impossible for someone who is colour blind. That’s why relying on contrast, rather than colour, is important.
When designing a button, for example, we would test the contrast between the button text and the button background to make sure it’s high enough for users to be able to easily read them.
Typography is a key element in any design, and is typically the most important way to communicate information. Because of this, how well a typographic system is designed will have a big impact on how accessible your design is.
Along with contrast, text size is an important consideration for accessibility. The general rule is that type should be no smaller than 16px for readability purposes, but this is dependent on the specific typeface being used.
We also need to consider text size within the typographic system. The text sizes of your body text, labels, subheads, and headers should be accessible as individual pieces of text, but also as a system. This allows users to be able to understand how content is organized and grouped and to distinguish a title from the contents that relate to it.
Visual cues are patterns and elements that we can use to express the intended information. These patterns and elements include things like indicators, borders, animations, and even textures. Using a combination of visual cues can help to communicate even more clearly.
A simple example of this is the common visual cue of an underline to indicate text is clickable. When a user knows that underline text is clickable, they can assume that all underlined text is clickable.
Other common examples include:
These visual cues tell the user what has happened or what they can expect to happen.
Visual presentation, or layout, is the way that all components are arranged to create understanding. Generally, designers can use space, size, and organization of content to improve accessibility. These factors have a huge impact on legibility and can help users understand its content and purpose on the website.
As designers, some of the ways we can improve accessibility through our layouts are:
Ensuring text boxes are not too wide or narrow so that lines of text are easy to follow.
Now you might be thinking that these are a lot of considerations when designing for accessibility. How are we supposed to follow these rules throughout an entire product? The answer is an accessible design system.
Many design agencies, us included, will advocate for an accessible design system as the foundation of your product design. Design systems are essentially a set of reusable components along with the instructions that can be used to design larger components, pages, and the entire product. There are many articles on the benefits of design systems, including ours which you can read here, but for the purposes of this article it’s enough to understand that design systems are the building blocks for your product. And if the building blocks of your product are accessible, then it’s easier to ensure that the product as a whole is accessible.
This is just an introduction to accessibility standards. The WCAG guideline is very extensive and there are so many other standards that apply, such as alternative text, keyboard accessibility and audio assistance.
However, our encouragement to you is not to get overwhelmed by the breadth and depth of the accessibility standards. Doing what you can to design for accessibility is a great start and is also something that can be improved over time. Opening up your product to as many users as possible is a worthy goal and it improves user experience for everyone, not just those with disabilities. You might also be surprised to find that these perceived limitations will spur fresh and creative designs that take your product to new heights.
If you’re keen to learn more about the guideline, check out the page here.
