How can you make your website accessible to anyone?

According to the UK government 1 in 5 people in the UK have reported a disability. That is almost 15 million people. Doesn’t that make you think? Up to 20% of your website visitors might be disabled. So how can you make your website accessible to anyone?

Consider this story about an unthinking janitor clearing snow from the school steps after heavy snowfall. A student waiting nearby in a wheelchair said: “if you clear the ramp first, then everyone can get in”.

In the same way, accessibility on the web isn’t always a priority. This could be a costly mistake; potential customers could give up on an inaccessible website. They could even take legal action if a site doesn’t meet disability standards.

For a number of years now, many websites have been designed for small screens first. In the same way we should also design for disability first. Then websites will be accessible to anyone, including you and me. I think of this approach as protective design. It sets boundaries to create a good basic website experience for everyone.

Below, I’ll suggest some protective design principles that will benefit anyone.

1. Write text using plain language

Begin with the basics. Keep your website copy simple for everyone to understand. The Literacy Trust reports that 1 in 7 of English adults have literacy levels of children age 9-11 and below. Even when writing about complex subjects, plain language benefits everybody according to UK government research.

I still find writing in plain language really hard, but rewarding!

Plain language resources that might help

The Pudding’s essay on plain language

2. Create a consistent heading structure

Headings create page structure and help users navigate content. They are good for:

• screenreader users who navigate content by using a list of headings
• skim-readers who make use of headings to scan content quickly
• making pages more visually pleasing by breaking up content

How should we use headings?

Every page title should be a heading level 1 (H1). You should use only one H1 per page. Headings after the page title should be heading level 2 (H2). Headings below that should be level 3 (H3), and so on.

I see two common problems in the use of headings. Firstly, writers sometimes use a particular heading level because they like the visual style. Don’t do this. You might skip heading levels, which confuses screen reader users. Always use the correct heading levels and change the heading appearance instead. If you don’t know how to do that, find a web developer who can help 👋!.

Secondly, don’t use bold text in place of headings. On a website it won’t be announced as a heading by screen readers and loses its meaning.

Resources on using website headings

Structuring website content well

3. Use good link practices

Some screen reader users navigate web pages using links. Thoughtful link text makes this process easier. “Click here” and “read more” are not helpful.

Link text should always make sense out of context. For example, you never see primary navigation menus where every link uses “click here” or “read more”!

Here are three good rules to follow:

1. Links to information should include a very short summary about the linked information. For example, one of my links above says “1 in 5 people in the UK have reported a disability”.
2. If the link is a call-to-action, begin it with a verb. “Send me an email” for example.
3. Avoid one or two word links. Firstly, they are less helpful in describing the link’s content. Secondly, they are harder to click for users with limited dexterity.

Resources for optimising website links

Writing good link text

4. Use large interactive elements

Links, buttons, and other controls should be large for those with limited dexterity. The newest version of the Web Content Accessibility Guidelines also recommends the space between clickable elements should be at least a certain size. This stops the wrong element being clicked.

Resources for optimising clickable elements

WCAG new guidelines for interactive elements

5. Choose colour combinations with enough contrast

Websites should have a good contrast between text and background colours. In my experience, the worst offenders for poor contrast are lighter greys, yellow, and orange.

As with many things, there are edge cases. For example, high contrast can cause problems for migraine sufferers. Those with astigmatism can struggle with light text on dark backgrounds.

Luckily there are tools that can help. It is now quite common to see options to switch between dark and light mode on devices and websites. Some devices even allow users to change contrast preferences. The ‘less’ contrast option would be perfect for someone with migraine sensitivity for example.

Also, don’t rely on colour alone. There’a a reason links are underlined as standard in browsers. Make sure your underline/highlight has plenty of contrast.

Resources for making accessible website colour contrast

WebAIM colour checker

6. Alt text and captions for images

Web images can have alt (short for alternative) text, and captions. You might wonder what the difference is? Alt text should be descriptive — it should describe what is in the image. Captions should be editorial — they add more information about the image, like who created it, or its history.

Alt text

In the WebAIM million pages survey, missing alt text is the second highest accessibility issue after colour contrast. They found “over one third of the images on popular home pages to have missing, questionable, or repetitive alternative text”.

Why is missing alt text a problem? Alt text makes images accessible to:

• screen reader users, because screen readers use alt text to describe the image
• users who cannot download the image. When an image is not downloaded, the alt text is displayed instead. Users may have connection problems or have chosen not to download images in their browser.
• search engines, because alt text helps them understand how relevant the content is to the search (on a side-note: don’t keyword-stuff your image alt text. That SEO trick has long been recognised and rejected by search engine algorithms!)

Not every image needs alt text. Some images are purely decorative, adding to the website’s design but not the content. Some icons are used next to text as a visual representation of that text; these icons don’t need alt text. Nor do stock images used purely for visual appeal.

Image captions

Before adding a caption to an image, ask yourself whether it needs one. Adding a caption should make an image self-contained; if you removed it from the page would the image and caption still make sense? The caption should provide additional information and context about the image, or relate it back to the containing document.

An image with a caption still requires alt text. Firstly, the caption should be adding information, not giving a detailed description of the image content. Secondly, some screen readers won’t read captions when alt text is missing.

Resources for website images

Gov.uk website image recommendations
WebAIM alt text examples

7. Keyboard-only navigation

Some users might use a computer keyboard to navigate websites. This isn’t only for disabled users; some people just prefer keyboards for computer work as it can be quicker. That includes me.

Tapping the TAB key moves through all the interactive elements on a page. When selected using the TAB key, an interactive element should be highlighted visually. This highlight helps users to see which element is selected. Unfortunately many web designers and developers hide this highlight. This might be intentional because they don’t like how it looks, or accidental if it was included in the website theme. Whatever you do, don’t leave the keyboard focus style hidden. That is an accessibility fail.

When testing your website for keyboard accessibility:

• Check you have a skip link. The first interactive item on every page should be a skip link. This allows keyboard users to move past repeating interactive content like header menus. Web AIM found that only 14% of the top million home pages had a “skip” link. That makes a huge majority of the web a real pain for keyboard users.
• Check you can tell where you are on the page with the focus highlight
• Check the order of elements makes sense when tabbing. Sometimes page elements are coded in a different order than they appear on the page. This can be confusing as the TAB control will follow the coded order rather than the visual order.
• Check nothing unexpected happens. For example, sometimes popup content can hijack the keyboard focus and confuse users.
• Check you do not get stuck when navigating through content
• Check forms are still usable without a mouse. You should be able to TAB from one form input to another, use SPACE to select checkboxes, and hit ENTER to submit forms, for example.

Resources for keyboard navigation

Videos about assistive technology

8. Accessible video and audio

Video is everywhere on the web these days. YouTube, TikTok and Instagram’s Reels dominate social media. However, I’d recommend avoiding it for vital website information where possible.

Why? Well, informational videos:

• make it harder for users and search engines to find the information they need quickly
• take longer to load and use much more data
• are harder to update if the information changes

Add closed captions to videos

If you must include video content, always provide closed captions (CC). Closed captions are not subtitles. Subtitles are a text alternative to dialogue, but they don’t include any other sounds. Closed captions include both dialogue and other sounds in the video. These other sounds might include [door knocks], [car horns] or [🎵 song titles] from the soundtrack. Make sure your video gives everyone a complete experience.

Transcripts for video and audio

Not all users will have access to audio. Some might even prefer to read content over watching or listening (holds up hand 👋). For those users, include transcripts of the entire video or audio file as an alternative.

Resources on video accessibility

UK gov recommendations

9. Pop-ups, animations and interactive content

Many people find pop-ups annoying or distracting. Animated or auto-playing interfaces can make some users feel unwell. Users need to be able to disable or dismiss these elements easily.

Limit or remove pop-ups

Pop-ups can be a pain for users, and are often not necessary. Newsletter and other subscription requests don’t need to be made using a pop-up. Pop-ups are also a common design pattern when requesting permission to store cookies in the user’s browser. However, a message fixed to the bottom of the browser window works just as well, and is less annoying. If you must use a pop-up, there should be a simple way to dismiss it. Make sure the dismissal method is accessible for keyboard and screen-reader users too.

Limit content that plays automatically

Some websites play audio or video content automatically. Since moving elements can cause some users to feel unwell, consider removing these entirely. Research suggests users rarely pay attention to a carousel beyond the first ‘slide’ anyway. If removing these elements is not an option, give your users control over when to play the content instead.

Users should have an option to disable animated content

You must give the option to disable any moving content. Some developers include ’toggle’ switches that let users disable animated elements globally or individually. Some browsers and operating systems provide a setting to reduce motion in the interface. Developers can use this setting to easily reduce motion by using the prefers-reduced-motion CSS media feature.

Give alternatives for interactive content

Always provide alternatives to interactive content. For example, maps can be hard for assistive technologies to communicate to the user. It’s even harder when a map is interactive.

For my work on the Killearn Heritage Trail, it was important to provide an accessible alternative for users who couldn’t see the map. Plenty of time was spent making the interactive maps a good experience for all users.

10. Accessible linked documents

Sometimes you might want to include a document as a link from your web page. Wherever possible, use a standard HTML web page rather than PDFs for linked documents. The benefits to this approach include:

• improved information architecture on your website.
• potential improvement of search engine rankings.
• being easier to find and maintain
• a better experience with assistive technologies like screen readers
• honouring your users’ custom browser settings

Resources to help create accessible linked documents

Why use PDF over standard HTML web page??
If you must use PDFs, create them with Microsoft Word

Checking if your website is accessible to anyone

So now you have a broad understanding of how you can make your website accessible to anyone. What next?

Time for a rebuild?

Ideally, the initial design process is the best time to make a website accessible. Good web designers/developers will have the skills to make your website accessible to all. They will also know how to manually check the website throughout the build process to keep the site accessible.

Perform an accessibility audit on your website

Of course, a website rebuild needs extra time and money. Another option is to perform an accessibility check on your current website.

Ideally this should be performed by specialist accessibility experts. They will do a thorough check on everything; this will include tests with disabled users, and using assistive technologies.

Of course accessibility experts will not come cheap. If this is out of your budget, the next best thing would be to find a web designer/developer who specialises in web accessibility & inclusivity. If you really are on a shoe-string budget, you’ll need to do the best you can with what you have. The gov.uk website has tips on how to perform a basic accessibility check

If you need some help, there are some excellent tools that flag accessibility problems. Tota11y is an easy to use non-techy accessibility tool. The WAVE tool from WebAIM is also good but more suitable for tech-savvy folk.

Of course even when using accessibility tools there are some things that can only be checked manually. These include:

• checking copy for plain language
• checking how the website works using a keyboard
• checking how content is presented using a variety of screenreaders

Whatever you do, good luck! I really hope this guide has been useful. If you have any questions please email me at [email protected].