Article
July 8, 2020

Accessibility in Design

Introducing web accessibility standards and principles in user interfaces.

Accessibility in design

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.

A variation of colour blindness. The hidden eye icon beside each colour blindess type indicates which colours can not be seen.

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. 

Where accessibility standards come from

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:

  1. Perceivable - Users must be able to perceive information and user interface components with consideration to all senses (Seeing, hearing, etc.).
  2. Operable - Users must be able to interact with interface components and navigation.
  3. Understandable - Users must be able to understand information and how to use user interfaces in its intended way.
  4. Robust - Users must be able to access content that can be interpreted reliably by varieties of user agents, including assistive technologies.

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.

The higher we aim for achieving ease of access of level AA and above, the easier it is for users to understand and interact with the content.

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. 

Principle of Accessibility in user interfaces

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.

Accessibility and scalability are heavily valued as STORYHIVE has an inclusive audience, including a range of users with least familiarity to most familiarity with the web.


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

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.


Designers can use tools to measure contrast and its accessibility. Higher the number against ratio of 1, the stronger the contrast is and easier to see.

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

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. 

Setting up typography system help to create visual hierarchy, consistency, and content organization in design.


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.

As an example, using bigger sized texts for headlines against smaller texts used for descriptions or contents, can help users understand the organization and grouping of contents on the page.

Visual cues 

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: 

  • An input field that highlights with a different colour border when the user clicks into it
  • A red border and an error message below a field to indicate that the form has been filled out incorrectly
  • The background of a button changing colour when the user hovers on it

These visual cues tell the user what has happened or what they can expect to happen.

Visual presentation

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.

  • Adjusting the line height (or leading) so there’s enough space for the eye to separate lines of text
  • Using space to group similar or related content and separate unrelated content
  • Sequencing content so that the design follows a logical and understandable structure

Patterning content structure can help users understand how to use the platform across all pages.

How we ensure accessibility in design 

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.

The tip of the iceberg

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.

We made our own design kit that you can use as a starting point. Download it here.


More Articles

Peter in Logo Lounge 10

Read Article

How I Design Custom Icons

Read Article