Make your website accessible

DESIGN AND IMPROVE YOUR WEBSITE

Jump to Chapter

Introduction 1. What is accessibility? 2. What are the rules? 3. Getting started 4. Next steps

Introduction to 'Make your website accessible'

More than 14 million people in the UK have a disability. We call their spending power ‘the purple pound’. Online, this is worth over £16 billion. So it’s worth designing a website that they can use. An accessible website helps others, too. If you make your site clear and easy to use, all your visitors will benefit.

In this lesson, we’ll show you how to design your website with accessibility in mind. You’ll learn the guidelines and how you can build your site to meet these. Our hints and tips will help you make sure everyone who visits your site can have an equal and engaging experience.

1 in 5

People in the UK have a disability.

GOV.UK Opens in a new tab

£274 billion 

Spending power of people with disabilities in the UK.

WeArePurple Opens in a new tab

43%

Disabled UK adults cabandoned their online shop due to inaccessible websites or apps.

Business Disability Forum Opens in a new tab

What you'll learn

  • What ‘accessible’ means.
  • The guidelines to follow.
  • How to identify the needs of your users.
  • Tips to help you design and update your website to meet these needs.

How long it takes

15 minutes

Chapter 1 - What is accessibility?

What is accessibility?

Chapter 1

How long it takes

3 minutes

Including everyone

When we talk about something being accessible, we tend to mean that anyone can use it.

We’re often thinking here about people who have disabilities. These could affect their ability to see, hear, move about, or understand. An accessible shop may be one with wide aisles. This means someone in a wheelchair can move through the shop as easily as others. A cinema might install induction loops so those with hearing loss can enjoy the film as much as their hearing friends. The main point here is that everyone has equal access.

Let’s think about what this means for a website. What could stop a person with disabilities from using a website? If they’re blind, they may have tools that ‘read’ screens for them. So we design websites that these tools can read. For users who can’t hold a mouse, we build sites they can use with just their keyboard.

It’s good to remember that your users may have different needs at different times. The student with a broken arm, the worker in a noisy office, the person starting to learn the language of their new home country. To make your site accessible, you need to design it to work well for all those needs and more. The good news is that when you design for those who need it, your other users will benefit too. You’ll have a website that is clear and easy for everyone to use.

 

Someone’s needs may be due to:

Location

They could be in a noisy cafe, a sunny park or an area with slow Wi-Fi.

Health

They may have long-term or temporary health issues that need support.

Tools

They may use tools to use your site. So your site needs to be adaptable.

Skills

They may be learning to use digital or English language skills.

Areas of need

So your audience may have a wide range of different needs. We’ve grouped these needs into four main areas, with examples in each.

Select each area to find out more

 

  • Some people are colour blind. This means they can't see the difference between certain colours. A website might be confusing if it asks them to select a green button to confirm or red to cancel. Others may need to use tools to increase the size of text so they can see it. A screen reader is software that reads aloud what is on the screen. It helps people who have no or little sight.

    Sometimes, what's on the screen can make symptoms worse. For example, flashing images may trigger a seizure. Think too about those who are looking at your website in bright sunlight. How do you think this affects their online experience?

  • Many things can lead to temporary or permanent hearing loss. Even being in a noisy room can make it much harder to hear. What kind of web content do you think might affect those with hearing issues?

    Some people who are Deaf use British Sign Language (BSL). This is their first language, so be aware that they may find English hard to read.

  • When we talk about motor skills, we mean anything to do with movement. You might think about someone moving around. It also covers smaller movements, too. The hand movements we use to control a mouse, for example. These are the ones to focus on.

    So who does this affect? People with arthritis or some nerve disorders may have long-term loss of movement. Broken bones, strokes and even some medicines could cause short-term hand control issues.

  • This is all about the way we think, learn and understand. For example, people with dyslexia can find it hard to process text. While someone with autism may read text literally. Phrases like 'it's raining cats and dogs' or 'a chip on your shoulder' would make no sense to them.

    Some people find it difficult to concentrate or remember. Others have learning disabilities that slow down their understanding. Can you think of a website you've seen recently that would be hard for them to use?

Accessibility can enhance your brand, drive innovation, and extend your market reach.

  W3C

Introduction - Make your website accessible
Chapter 2 - What are the rules?

What are the rules?

Chapter 2

How long it takes

4 minutes

Laws and guidelines

The UN Convention on the Rights of Persons with Disabilities lists the right to information (including the Web) as a basic human right. Most countries endorse this, and some have their own laws and policies.

In the UK, we all need to follow the Equality Act to avoid discrimination. There’s not much detail here for web designers, though. The law simply says that you must make ‘reasonable adjustments’ for people with disabilities. Public sector websites and apps also need to meet the accessibility regulations.

The rules for other countries vary – you can find some in the World Wide Web Consortium (W3C) site. The W3C created a set of standards on accessibility. These go into detail about what an accessible site or app looks like. Most laws mention these too, so let’s look at them.

Web Content Accessibility Guidelines

The W3C is a non-profit organisation. They created a set of web content accessibility guidelines (WCAG). People all over the world use these, to help improve web and mobile app accessibility.

The guidelines list all the different elements of a website or app, and what ‘accessible’ means for each one. So it’s quite a long document. The four design principles that guide these standards are quite simple, though.

 

The principles say that your design should be:

Perceivable

Operable

Understandable

Robust

What do these mean? Let’s look at each one in turn.

 

Perceivable

For sighted users, this means they can see the content. Those with low or no sight should be able to access it by other means. This could be by using a screen reader to hear the content, or a braille device for touch access.

 

Operable

This means someone can use the website or app. It includes finding their way around, using forms to add information and working buttons and other controls. Bear in mind they may be using something other than a mouse to do these things.

 

Understandable

Your web content should make sense to the people who visit the site. Visitors with dyslexia, learning needs or whose first language isn’t English may struggle with text. You can help your audience understand what’s on their screen. We’ve got tips on how to do this, in the next chapter.

 

Robust

Your audience may use different accessibility tools. For instance, a screen reader or voice recognition software. A robust website will work with these tools. This means visitors who use these tools get the same experience as those who don’t use them.

Audit your website

Is your website already active? It’s a good idea to check it for accessibility. This shows you if your site is accessible. If it’s not, you’ll be able to see where you need to make changes. Do this after you’ve built your site too, so you can see how accessible it is.

You may decide to do this yourself. The GOV.UK site tells you how to do this. There are also organisations like AbilityNet or Purple Tuesday who can do this for you.

Most of these audits will compare your site with the WCAG standards.

 

There are three levels of compliance with the WCAG standards:

  • A – This is the lowest level. Meeting this level is essential for a site to be accessible.
  • AA – This marks a higher degree of accessibility. Most organisations aim for this level.
  • AAA – This is the highest level. Few sites achieve this.

 

So what’s the difference between levels A and AA? Let’s take an example of a level A requirement. You should be able to use the website with just a keyboard. This is level A because there’s no way a user can work around it. If you can only use a keyboard, you need the website to work that way.

An example of level AA is about colour contrast for text. You’re aiming for a good contrast between the colour of the text and its background. We measure contrast as a ratio. It shows the difference between the brightness of the lighter colour and the darker one.

A ratio of 1:1 means the two colours are the same brightness – so the contrast is poor. The level AA standard for large text is at least 3:1. For most text, it’s higher, at 4.5:1. This is level AA because there are ways to work around it. If you wanted to reach the AAA standard, the ratio goes up to 7:1.

There are plenty of tools that can help you meet the WCAG standards. We'll point these out in the next chapter.

Chapter 1 - What is accessibility?
Chapter 3 - Getting started

Getting started

Chapter 3

How long it takes

7 minutes

Your approach

As you design, think about whether your design meets the four WCAG design principles we mentioned in the last chapter. This will help you meet the needs of all your users.

 

User research

Research is key to making your website accessible. It can help you understand what it’s like to use a screen reader, voice recognition software or to use your site with just a keyboard. During research, you’ll learn how people with disabilities might use your service, and the barriers they face.

To help you, the GOV.UK site has a set of user profiles. These show different needs and ways that people access online content. This can help you shape your design to meet the needs of all your users.

Idea

If you know someone who uses accessibility tools, why not ask them to review your website? They may find issues you hadn’t thought of.

Their experience with other sites may also help you improve your own.

Options for your website

Here are some accessibility options to help as you build or change your website.

Titles

‘Front-load’ titles. What does this mean?

Here are some examples:

  • ‘About Jane’s Bakery’ rather than ‘Jane’s bakery – about us’.
  • ‘Contact Jane’s Bakery’ rather than ‘Jane’s bakery – contact us’.
  • ‘Jane’s Bakery home page’ rather than ‘Welcome to the home page of Jane’s bakery’.

Text

Check your language. Is it easy to read by screen reader tools or those who speak English as a second language? Making your text content clear and simple will help all your users. Easy words in short sentences work best. Try to avoid jargon and complex sentences.

There are many free tools like Hemingway or Grammarly to help. These show how easy it is to read your text. Some also suggest other options.

Look at the colour of your text and its background. We talked earlier about colour contrast standards. Having high contrast helps people with low vision. This includes anyone who needs to see their screen in brightly-lit environments. High means a ratio of 4.5:1 for normal size text. So what’s the ratio for your text? Use a free tool like WebAIM’s contrast checker or AccessibilityChecker to find out.

Think about adding an image if this helps people understand the text. For example, you could add a diagram to show them how your booking process works. If your text describes a location, you might add a ‘pin’ icon or a map beside it.

Idea

Sometimes, you can replace text with an image, icon, or diagram. This can make it easier for those who struggle to read. Just make sure the meaning is clear, whatever format you use.

Images

If you use photos, icons or other images, think about adding ‘alt text’. This is text that screen readers can use, to describe the image to users who can’t see it.

Not all images need alt text. Some are just there to make our websites look nice. Others are what the guidelines call ‘informative’. We should add alt text to these.

So how do you know if an image needs it? Ask yourself ‘does this show important information that isn’t anywhere else on the page?’. If the answer is yes, add alt text. Still not sure? Remove the image from the page to see if you’re missing information. If you are, that image needs alt text.

Images that always need alt text include:

  • Links or buttons – For instance, an image of a product that links to details of that product.
  • Logos – If these link to your home page, the alt text should say this. For example, ‘Cake for all – Home’.
  • Images that include important text – Try not to use these. Instead, keep text and images separate.

Videos

Videos can bring your website to life. They can also help to make it more accessible, by making it easier for people to see and hear content. Think of your users with low reading skills. Those who find it hard to concentrate or who need to see what is going on, to understand it. All these people will benefit from video content.

If you decide to use video, add captions and a transcript. This helps users who can’t hear it or prefer to read.

Add play/pause, fast-forward and rewind options, too. These let people view your content at their own pace and skip to the end if they want to.

Buttons and links

Think about how the buttons you want your users to use. How do people know what these do?

For instance, you may have a green button with the word ‘confirm’ on it. Changing the text to a tick symbol helps those with low literacy skills. It also adds meaning for colour-blind users.

Make sure your buttons and other controls are consistent. Planning a ‘back to our home page’ link? Make sure this looks the same and is in the same place in every page that has this option.

Forms

Will your users need to complete a form on your website? Some sites use these so that people can get in touch. Users might want to ask for information, make a booking, or ask a question. Forms can help make sure you have all the contact details you need.

Check you can use your forms just by using a keyboard. Give clear instructions on how to complete the form. Are there any mandatory fields? Make this clear, too. If a user enters the wrong information, the error messages should be easy to read and understand. The GOV.UK site has some good templates for input fields and their error messages.

Navigation

Plan your content so it has a logical heading structure. Screen readers can ‘skim through’ content by picking out just these headings. It’s a good idea to read all the headings on a page, then the content. Does it make sense? You may need to reword or change headings.

Try moving through your website by using the Tab key on your keyboard. Does this flow logically? This is how someone who relies on a keyboard will find their way around your site. The ‘tab order’ is something you can change, to improve the flow for these users.

General tips

Avoid flashing or blinking content. The official guidance says that three flashes per second may trigger seizures. This format can often annoy users too, so it’s best to avoid it completely.

Do you have moving content, like scrolling news feeds? Think about how a user could slow down this movement.

Instead of building different websites for different devices, create one responsive site. This means it can see and adapt to the user’s device. So whether your screen is a large desktop monitor or a mobile phone, you get the same experience with not too much resizing and scrolling. This can help users with disabilities, no matter what device they’re using. The Level Access site has more details on this.

Add an accessibility statement. This shows your users you’re working to make the site as accessible as possible. List any less accessible parts of the site here. It’s also where you can show people how to access other formats if they need these. Need help with this? The GOV.UK site has an example of what this might look like.

Remember

Include an accessibility audit as part of the website testing stage. Do this when you add new features or make major changes to the site, too.

Test your knowledge

Try again - that's not quite right!

Hint: Alex uses assistive technology that reads the website aloud to them. So they need features that work with this tool.

Try again

That's right!

Alex uses a screen reader to scan content. So clear headings will give them a good idea of what's on the page. Plus, the alt text means Alex won't miss any image-based information either.

Chapter 2 - What are the rules?
Chapter 4 - Next steps

Next steps

Chapter 4

How long it takes

1 minute

What you've learnt

In this lesson, we’ve talked about what accessibility is, and the rules around it. You’ve seen how the WCAG principles help you make sure all your users get the best experience from your websites. We’ve also given you some hints and tips to get you started.

What next?

There’s so much to take in when you’re designing for accessibility. Hopefully, this lesson has given you a few ideas to get you started. It’s worth taking time now to follow any links you’re interested in. These give you more information on how to design for all your users.

Useful sites

We often refer to the W3C site and there are links to some of their pages throughout this lesson. They have a great range of resources to help you make your website accessible.

To learn more about how different design features help your users, we recommend this set of short videos. They each show a feature from a user’s point of view. You can see from them how making small design changes can help all your users.

We’ve also mentioned AbilityNet and the website audits they can do for you. This is just part of how they can help, so it’s worth checking out their site.

Remember

Web accessibility is essential for some, but useful for all.

W3C Opens in a new tab

Related learning links

Designing your website

View lesson

Telling your story in an online world

View lesson
Chapter 3 - Getting started

Want to learn more?

There are many more lessons to help you design your website and digital channels.

Go to this topic Design your website and digital channels

 

Lloyds Bank Academy is committed to providing information in a way that is accessible and useful for our users. This information, however, is not in any way intended to amount to authority or advice on which reliance should be placed. You should seek professional advice as appropriate and required. Any sites, products or services named in this module are just examples of what's available. Lloyds Bank does not endorse the services they provide. The information in this module was last updated on 26th November 2025.

Back to top Click to jump to top of page