Creating user-centred accessible websites | Den Creative
accessibility blog hero

Knowledge sharing

28/10/2021

Creating user-centred accessible websites

Building equitable digital products starts with accessibility, usability and inclusion. We thought we’d explain what it means to have an accessible website, why it matters and what guidelines you should follow, in case you haven’t already.

Time taken to read blog post

7 mins

What is accessibility?

According to the latest estimates, around 15% of the world’s population have some form of disability, which represents a massive underserved customer group in most industries. In the UK, 1 in 5 people have a disability – this could be visual, hearing, motor (affecting fine movement) or cognitive (affecting memory and thinking).

Accessibility is a series of activities aimed at creating equitable digital products, focusing in particular on people with disabilities, the elderly and those affected by many other limitations.

A couple of figures

  • 48% of the UK population could potentially have problems accessing your website
  • 9% of the UK population have some form of colour blindness (1 in 12 men and 1 in 200 women)
  • 4% are visually impaired
  • 12 million are over 60 years old; that is 21% of the entire population

Types of disabilities

  • Problems with sight
  • Problems using a mouse or keyboard
  • Problems with hearing
  • Problems with reading and understanding

But web accessibility also helps people who

  • Have a slow internet connection
  • Have a small screen or unusual device
  • Can’t listen to sound at work
  • Use an old web browser or operating system

What are the benefits of having an accessible website?

Web accessibility protects your website against demographic changes and opens your business to everyone with an internet connection.

  1. It’s the right thing to do

Historically, people with disabilities have had a hard time interacting with technology. Limiting access to technology based on disabilities creates discrimination and inequality of opportunity. Making the internet a more accessible and equitable place will benefit everybody. 

  1. It’s good for branding

Having an accessible website enables more users to have positive experiences with your brand and could potentially convert them into brand advocates, increasing your brand awareness through word-of-mouth. Read more about it here.

  1. It’s good business

Globally, people with disabilities represent one of the most neglected segments of the consumer population, forming the largest “minority” in terms of spending power. In the UK, people with disabilities and their households have significant spending power, accounting for the disposable income of approximately £274 billion, which continues to increase. Read more about it here.

  1. Boosts conversion

Accessible websites have increased conversion rates because they are more usable to a larger percentage of their user base. 

  1. It’s good for SEO

Search engines will rank your website higher. Both Assistive technologies and search engines rely on machine-readable content, thus having an accessible website provides a natural boost to your SEO endeavours. 

Which guidelines do you need to follow for developing an accessible website?

Web Content Accessibility Guidelines (or WCAG) were developed by the World Wide Web Consortium and represents an internationally accepted standard for web accessibility of sites and applications. From its release in 2008, the WCAG 2.0 principles and guidelines have been consistent and since then have only had additional “success criteria” implemented via the latest version WCAG 2.1.0

Given the rapidly changing technological landscape, companies should try and adhere to the latest version of the guidelines to offer an inclusive experience to all of their users.

WCAG 2.0 has 12 guidelines that are organised under 4 principles:

Perceivable

Content and user interface components must be presented so that users can perceive and should not be imperceptible to all of their senses. One of the most common colour vision deficiencies is difficulty distinguishing between red, yellow, and green shades. This is referred to as “red-green” colour vision deficiency. It’s a common problem that affects around 1 in 12 men and 1 in 200 women. This is why according to Success Criterion 1.4.1 “colour shouldn’t be the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element”. 

An example of a colour contrast guideline from WCAG 2.1 is Success Criterion 1.4.3, which states that “the visual presentation of text and images of text has a contrast ratio of at least 4.5:1.”

Operable

Navigation and User interface components must be operable by the users and should not require interaction that users cannot perform. For example Success Criterion 2.1.1 states that “all functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes” to always offer users a fallback by using.

Understandable

Information and the operation of the user interface must be understandable. This means that users must be able to understand the information and the operation of the user interface. The Level A Success Criterion 3.1.1 encourages companies to offer multi-language support for their products so that “The default human language of each Web page can be programmatically determined.”

Robust

Content must be robust enough to be interpreted reliably by various user agents such as assistive technologies. One such criterion (Success Criterion 4.1.3) refers to status messages and the manner in which they are presented to the user through assistive technologies.

Each Guideline has several success criteria associated with it, and these are grouped under three importance levels.

Text size and colour contrast guidelines exampleText size and colour contrast guidelines example

Level A

Success criteria in level “A” are critical; failure to meet these criteria will limit access to your content for some users. An example of this would be Success Criterion 2.5.4 Motion Actuation which states that functionality that can be operated by motion can also be operated by user interface components.

Level AA

Success criteria in level “AA” are highly important; some users might have severe difficulties accessing your content if these haven’t been met. An example of level AA criteria is Success Criterion 1.4.4 Resize text, which states that users should be able to resize the text without assistive technology up to 200 per cent without loss of content or functionality, except for captions and images of text.

Level AAA

Success criteria in level “AAA” are useful, but only target a small portion of users. Depending on your user base, you would select only the most relevant as these are typically treated as nice-to-haves. For example, Success Criterion 2.4.8 Location, which encourages websites to provide information about the location (the typical mechanism being breadcrumbs), is a very useful feature but only critical to a portion of the user base.

You can read more about the WCAG guidelines here.

Meeting government accessibility requirements

To meet government accessibility requirements, digital services must:

  • Meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1) as a minimum
  • Work on the most commonly used assistive technologies – including screen magnifiers, screen readers and speech recognition tools
  • Consider personas/users with disabilities during research and testing
  • Have an accessibility statement that explains how accessible the service is – you need to publish this when the service moves into public beta

More and more people will be gaining access to the internet in the following years and as your user base becomes more diverse, you’ll want to make your website more inclusive and accessible. Meeting accessibility goals feels like a big responsibility and, at times, overwhelming, given the number of guidelines and user needs you need to take into account. Luckily, the WCAG and trailblazing organisations like the a11y Initiative are fighting to make them as clear and easy to implement as possible. 

We at Den Creative strive to make the experiences we create as inclusive as we can.

If you’d like to read more about our approach to accessibility and how that impacts the way we design websites, apps, wireframes, prototypes or anything else, please get in touch. We’d love to hear from you.

Headshot of Vanessa Jaramillo.

Vanessa Jaramillo

Creative Designer

Created with Sketch.

Reducing Dezeen's carbon footprint

Created with Sketch.

Meet the team - Richard Starr