Many of us have disabilities that greatly affect everyday life. Accessibility means creating digital services that take this into account, making them usable for a larger number of people.

Historically, accessibility has been a blind spot for both designers and their clients. Too often, it is seen as not worth the trouble or simply not given any thought at all. We have been guilty of this numerous times as well. But now, the times are slowly but inevitably changing.

Historically, accessibility has been a blind spot for both designers and their clients.

In Europe, the EU Web Accessibility Directive will greatly affect this. Any new public sector websites must meet accessibility standards immediately. For pre-existing websites, the deadline is set to September 2020.

In this article, I present an overview of why accessibility is such a big deal – and how we can make the internet better by taking it into account in our designs.

In plain sight

First, let’s tackle visual accessibility. This means that anyone should be able to perceive, understand, navigate and interact with the service. The topics I discuss in this section are based on the Web Content Accessibility Guidelines (WCAG).

Colour should complement, not lead. Colour brings interfaces to life, creates atmosphere and enhances branding. That being said, colours are best used when highlighting information that is already visible.

An example image of a traffic light color scheme and how people with various color blindness see it.

Traffic light colours have been used in user interfaces since forever. This image exemplifies why it’s not such a hot idea, after all.

It’s not uncommon that brand colours dictate the palette of the user interfaces. This might lead to accessibility problems, usually with contrast. When background and foreground colours have insufficient contrast, text, icons and other interface elements can become inaccessible.

WCAG suggests a perceived contrast of 4.5:1 in order for a website to receive their second-highest AA rating. Reaching the highest AAA level requires offering the users the possibility to modify interface colours and font sizes by themselves.

To check the current colour contrast on your site, we recommend using one of the many free tools available, such as Colorable.

Contrast is crucial for written content readability. Not only does this apply to headlines, but also buttons and badges. Text that is part of a logo or brand name must also be taken into account.

Three examples of various contrast ratios, all of them insufficient in terms of readability guidelines.

Happens to the best of us: here are a few colours used in interfaces by some of the most valuable brands in the world – none of which would pass accessibility recommendations.

To keep text readable, we aim to keep the font sizes at a minimum of 12pt in the tiniest label texts. With longer text sections, it is reasonable to use a font size of 18pt or bigger. It should also be noted that fonts are of different weights and thus, designer discretion is advised. Generally speaking, no one will ever complain that your font is too big.

Text paragraphs should be around 50-80 characters long for optimal reading speed and comprehension. Justification will make distinguishing lines harder while adding a bit of line spacing will make it easier.

Two paragraphs compared: one with full justification and another with insufficient line height.

Line height and justification are essential in making longer texts pleasant to read.

Visual accessibility checklist

  • All information should be visible on greyscale, colour can be used to highlight
  • Make sure colours have enough contrast, especially in text and elements that display information
  • Use tools like Colorable, Able and Stark
  • Use a minimum of 12pt font in short label texts
  • Go bigger than 18pt font in long paragraphs
  • Keep the paragraph width at 80 characters
  • Avoid full justification on paragraphs
  • Add 1,5 or more line-height in long text

Out of sight

Accessibility is not limited to what can be perceived at first sight. There are a great number of things under a website’s hood we should consider making it accessible for people using screen readers, alternative input devices and other assistive technologies.

Markup tags can make a website’s content readable with all devices. Any website should have a structure that’s clear and easy to read, even with all visual candy removed. HTML markups are essential in conveying the content and hierarchy of the site. Proper use of markup tags makes it easy to navigate and read the website with assistive technologies. Tags should never be used for merely styling purposes, that’s what CSS is for.

Any website should have a structure that’s clear and easy to read, even without any visual eye candy.

The website structure should start from a descriptive page title that gives the visitors an idea of what lies ahead. Likewise, keeping the following heading copy informative will make it easier for all users to understand what you have to say.

Markups are also immensely helpful with more complex interface elements such as forms. Different form sections such as labels, indicators and errors should have their own tags. Also, you should design your forms so that each of these elements is in a logical order when reading with assistive technologies.

Navigating the site with just a keyboard will follow the structure you have created with your markups. Including a visible keyboard focus in elements that can receive input (such as forms and search bars) is critical.

Describe the key visual elements with text. Photos, illustrations and graphs should always come equipped with descriptive text – unless they’re just decoration. These alternative text descriptions help people understand an image that is not visible, either due to a disability or even low bandwidth. The same advice goes for video, audio and other multimedia content. With videos, captions should always be included.

Under the hood checklist

  • Use page title to describe webpage content
  • Markup headings to separate content and ease navigation
  • Use markups to make all form elements accessible by keyboard and place them in a way that reading them makes sense
  • Add a visible keyboard focus that follows a logical order through the page when a tab is clicked
  • Use alternative texts to describe pictures that are essential for conveying information, this helps people who can’t see and people who have problems with bandwidth
  • Multimedia content should have keyboard accessible controls and include alternative formats such as captions and transcripts
  • The basic structure should be viewed as a linear one-column layout as this is how a screen readers will go through the website

Closing thoughts: it’s not an edge case

According to the World Health Organisation, 1 in 7 people experience some kind of disability. That makes up for over 1,1 billion individuals. This is made even more staggering by the fact that this number only includes those with permanent disabilities.

Let’s face it, we all experience temporary disabilities. It can be something major like a broken arm, or situational such as carrying a baby.

Accessibility, then, not only helps the disabled (which in itself would be a big enough reason) but also everyone else. This is called the curb cut effect: solutions that are helpful to some are often helpful to everyone else, too. It is frankly baffling that to us designers, it is so often treated as an afterthought. Let’s change that – starting now.

Are you interested in finding out how you could make your digital service more accessible? We should definitely talk. Start by dropping us a line and describing your situation.