Make your website accessible

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 be accessible, you need to design your site to work well for all those needs and more. The good news is that by designing 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:

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

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 reference 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:

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 AAA standard, the ratio goes up to 7:1.

Your approach

During design, you should be thinking 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.

Top tips

Here are some of our top accessibility tips to help as you build or change your website.

Titles

‘Front-load’ titles. What does this mean? Here are some examples:

Try:

• ‘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 bright light glare 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.

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 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 colourblind 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 people can get in touch. Users might want to request 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 irritate 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.

Where you are now

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.

The W3C site

We often refer to this 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.

Related learning links