Posted by Nixon
9 April, 2018

This post is the first in a two-part series exploring how to make your website more accessible through design and content. Here, we’ll begin by considering how to design for accessibility.

In 1980, Sir Tim Berners-Lee created the World Wide Web and in 1990, the very first internet browser was released to the public. The demand for new technologies has been growing ever since. 

Nowadays, we’re lucky to be able to access information on the spot. Whenever and wherever we want to, we can learn new things, contact loved ones on the other side of the world, or stay up to date with the results of the Olympics. In 2017, 90% of households in Great Britain had internet access. Most are fortunate enough to surf the web without any problems, but 8.6 million of these people have disabilities. A whopping 71% of disabled people with access needs click away from inaccessible sites and 84% said they would spend more time on a website if it was more accessible.

Generally speaking, when we refer to an accessible website or app what we mean is that its content is useable by anyone. When we design for the web we don't tend to think about all of the different ways that people access our content. To create an inclusive website, it’s important to consider different disabilities to make sure it is accessible to everyone.

Hearing disabilities (deafness and impaired hearing)

Users with hearing impairments need captions for multimedia content (any video content that also has audio) and transcripts for audio-only content. Without captions or transcripts, only the visual content is accessible.

Motor disabilities (physical impairments)

Users with motor impairments are more likely to use only a mouse, keyboard, their voice or other inputs to control and navigate the web. Websites developed with flexibility of input options are more accessible to these people, as requiring mouse-only or keyboard-only control will create a barrier for some.

Visual disabilities (blindness and low vision) 

Users with vision loss can rely on screen enlargement, keyboard-only navigation, and/or the use of screen reader technology to help them. Accessing information through these means is dependent on sizeable fonts and good colour contrast, as well as the labelling of graphics, icons, buttons and multimedia, and the use of web standards for coding tables, forms and frames.

Cognitive disabilities 

Users with cognitive impairments rely on a consistent navigation structure. Overly complex presentation and flickering or strobing designs can be confusing.

These considerations don’t relate only to permanent disabilities, but also to those that are temporary (such as a broken arm) and even situational; like users that are unable to read the screen because of the sun shining onto it.

Computer screen bearing the text Do More

What should your design do?

When designing for the web, it’s tempting to choose all of the bells and whistles that available technology will allow. However, taking a breath to consider accessibility in the design can have a positive effect on the traffic to your site.

Web Content Accessibility Guidelines (WCAG) offer a set of guidelines and best practices, organised around four principles that can be abbreviated to POUR:

Perceivable
Content can be consumed and processed in more than one way, or its representation can be adjusted.

  • Can all users perceive the content? If it’s a multimedia object, can it be perceived in more than one way? For example, if it is an audio element, do you supply a text fallback? 
  • Make sure that the contrast between text and background is high.

Operable 
Content can be accessed and operated through various means and is structured in a logical way.

  • Make sure that your design doesn’t depend on a single action, such as a hover effect or mouse usage, as this is inaccessible on touch screens (like tablets or mobile phones) and screen readers. Designing for mobile first is a great approach. 
  • Ensure breadcrumbs and a sitemap are available. A simple navigation and page structure helps people with more limited perceptive capabilities to use the website.

Understandable 
Content behaves in a predictable manner.

  • Create designs that are clear and understandable. Forms should follow a logical flow and if users must go through a process, provide guidance to help them.
  • Follow The principle of least astonishment.

Robust 
Content is accessible via variety of devices, browsers, and technologies, including screen readers and mobile browsers.

  • Ensure that all functionality is designed to work across all devices.

By taking into account these simple steps, it’s possible to significantly increase the number of potential customers using your website – while also showing how much you care about your users’ experiences through inclusive design.

Tools and resources

The second part of our accessibility series is all about content; check it out.

Interested in design for the web? Check out What the heck is UX? or take a look at our website case studies.