How to build an inclusive website

Inaccessibility in the online world can limit people just as much as the physical world, and poorly designed websites are no exception, meaning that people with disabilities have less access to information than others.

One in five British people have a disability, yet less than 1% of website homepages are likely to meet accessibility standards. So, for 20% of the UK population, using the internet is more of a challenge, causing frustration, anxiety, and isolation, and limiting the ability to do things independently.

Having an accessible website is like having a physical venue with accessibility features, such as wheelchair access and disabled parking. It is about taking basic measures to provide an equal experience to all. And with only 23% of charities saying their digital services are accessible to a great extent, charities can do better.

So, what does it take to build an inclusive website? This article explores the steps charities should take. 

Know your legal responsibilities for accessibility

It’s illegal to discriminate against disabled people online. The Equality Act (UK) prohibits discrimination based on disability and applies to all web products, including websites.

To comply with most accessibility laws, develop a thorough understanding of the Web Content Accessibility Guidelines (WCAG). According to Recite Me, the minimum baseline for “making a website accessible” is typically considered to be WCAG version 2.1, Level AA.  

Audit the website for accessibility

You can use manual and automated testing techniques for your website accessibility audit. Scanning tools like the Recite Me Accessibility Checker provides a prioritised list of points to fix based on compliance with the WCAG criteria, while manual methods like user testing with real people can identify usability issues that aren’t discovered by conformance evaluation alone. 

Design the website for universal usability 

Universal design means that a product, service, or environment is designed to meet the needs of all people who wish to use it. We explore the key approaches below. 

Optimise website structure 

Having a clear and consistent structure ensures that a diverse range of visitors can access your content. To achieve this, use a content management system that supports accessibility both now and as you maintain and develop it in the future. 

To keep the website clear and consistent, watch out for your page layouts, themes, widgets, and plugins. They should all be WCAG compliant.  

In addition, format written content using a clear heading structure, meaning it is able to be read by a screen reader. That means using H1 for the title of the page, and H2 for subheadings, H3 for headings under that, and so on. 

Achieve intuitive website navigation 

Not everyone is able to or prefers to navigate websites in the same way. Using the keyboard to move around websites and follow links, for example, is important for people with motor disabilities and vision impairments. There are lots of ways to design websites that are navigable by keyboard. 

Provide users with the option to “skip navigation” by creating a link that “anchors” to somewhere lower down on the page. By clicking the link, users will be automatically taken to the location lower down on the page without having to manually navigate there. 

Another way to make navigation intuitive is ensuring that you give descriptive names to all hyperlinks, giving users specific information of what page the link will take them to or the additional information they’ll find there. 

Tweak usual practice

Tweaking your brand guidelines and styling toolkit can make your website more usable, with teammates working together at a higher standard of accessibility. 

This includes making sure all written content is clear, consistent, and concise, using a dyslexia-friendly font style and size. It also means conveying meaning in a number of different ways instead of just relying on colour and ensuring a colour contrast ratio of at least 4:5:1 between text and the background. 

Add alt text to every image, graphic, and video to ensure that context is provided for people with vision impairments. 

Finally, allow users to send you information by designing inclusive forms. That means avoiding placeholders and time limits and ensuring that the ‘question’ and ‘answer’ fields have a clear relationship to each other.