Is my website accessible?

Reading Time: 11 minutes

Well, if you are asking, it probably isn’t. Accessibility is usually not that hard to achieve but you have to have this in mind while creating your website, not as an after thought.

This post is written for people who are new to digital accessibility and want to learn how to improve it.

screenshot of the website Lingscars.com . There is text, drawings pictures everywhere, very flashy colours, different fonts, everything is competing for your attention
Example of a terrible website. You can see it for yourself warning: flashing colours, sounds, animations and more …

Quick access

What is digital accessibility?

Digital accessibility is the ability of a website, mobile application or electronic document to be easily navigated and understood by a wide range of users, including those with visual, auditory, motor or cognitive impairments.

The concept of accessibility doesn’t just apply to disabled people – all users will have different needs at different times and in different circumstances.

It can, and it will affect everyone at some point in life.

How people use websites?

People might use your website in a way you did not expect.

For example:

  • someone with dyslexia might use a screen reader even though they can see
  • someone with a motor  impairment might be using a switch or their voice to interact instead of a keyboard, or a mouse
  • some will change the colours of your website because clear text on dark background works better for them (dyslexia, migraine, light sensitivity)
  • scrolling or motion might make a person physically sick (vestibular issues)
  • a person with a low vision might be zooming to see or use a large mouse pointer. They might need to scroll horizontally as well as vertically

Worth keeping in mind as well that some will only have a mobile phone to use internet, or have an old laptop with a small screen or a slow internet connexion.

Quick checks

There are a few things you can try:

  • Can you still use your website on a tablet or a phone with a small screen?
  • zoom up to 400%, try to navigate your website
  • don’t use your mouse and navigate your website using the Tab key to move forward, shift + Tab key to move backward and Enter to select something
  • play with your device settings and make all the colours a greyscale, can you read all texts, understand the importance of some buttons, menus and do you notice warnings, errors messages and links?

You can also try to use a screen reader on your phone, check the accessibility settings:

  • VoiceOver (for Apple devices – it’s built in)
  • Voice Assistant (for Android devices – built in as well)

By now, you probably have a list of problems you didn’t realise you had before.

Chrome devtools

There are some automatic tools which can give you a rough idea of some of the problems you have. Like any automatic testing tool, this is only a quick audit and won’t reveal all the problems. A good score, especially for accessibility doesn’t mean you’re doing great. It’s always better to test with real users.

If you are using Google Chrome for your browser, you can check your website, page by page:

From one page, right click and select ‘Inspect’.

screenshot of the menu where Inspect is highlighted

This should open the ‘Dock’ in a column on the right of your screen. You can change this if you want to have it on the left or at the bottom of the screen, using the 3 vertical dots menus and changing the Dock side

screenshot showing the Dock and 3 dots menus once opened
On the top right, you can see the menu once you selected the 3 dots if you want to change the dock side

Look for ‘Lighthouse‘ in the top menus, you might have to select >> to see it. Select it and you should see this menu:

screenshot showing the Lighthouse menu option with Desktop and Accessibility selected

You can select Desktop or mobile on the right and then select as many categories as you want. Here I’m only talking about Accessibility so only selected this one.

Select: “Generate report“. At the time of writing, trying this on the Halford homepage returns a score of 74 out 100 and a list of issues like alternative text for images missing, poor contrast and more.

screenshot showing the report in the dock on the right part and halford homepage on the left. There is a list of warnings in the report stating the issues

Plugins you can use

There are a lot of plugins you can add to your browser which will check your website for you. Wave is often used and will show you some issues to solve as well, like headings structure. You can learn more about this plugin here.

Below is how it looks for the same homepage for Halford.

screenshot of the homepage with a summary of issues detected by WAVE plugin in the left column and the homepage in the right part of the screen is covered in little warning icons.

Common issues

  • using text in all caps
  • poor contrast
  • images don’t have an alternative text
  • there is text on pictures
  • fancy fonts or extra spacing between characters
  • text is justified or centred
  • media files are not accessible
  • motion and animation
  • images and icons are pixelated once magnified
  • side buttons or navigation bar take too much space once magnified
  • the structure of your page makes no sense when using a screen reader

We will see each point in details with some examples.

Using text in all caps

This is very commonly used for button text and some headings. You should avoid it as it’s harder to read for everyone and for people with dyslexia in particular.

THIS IS HARDER TO READ BECAUSE YOU LOSE THE SHAPE OF THE WORD.

This is easier to read because you can see the shape of the words to read quicker.

screenshot from the Halford homepage with 3 box of text in all caps
An example on the Halford page again

Poor contrast

Buttons, texts, icons need to be contrasted enough or people might struggle to read them or even spot them. This will affect people with low vision, colour blind people but also anyone using their device when the lightning is too bright or too dark potentially.

In the screenshot below, from the Morrisons homepage, the icons are very hard to see and the checkout button is very faint. It’s because it’s disabled at the moment as the basket is empty, but still not great as people might try to read it.

screenshot of the banner and top menu bars from Morrisons, some icons are light green on dark green and very hard to notice.

On the Halford page again, can you see the link in the text for ‘cycling’ and ‘tyres’?

screenshot of Halfords homepage, one paragraph of black text has soem links in light grey with a background which is also light grey.

You can test your contrast with various online tools, like accessible-colors.com for example. You usually enter the colour code of the text and the background and it will return the contrast ratio. Ideally, you want everything to be AA compliant. This is an accessibility standard, set by WCAG (Web Content Accessibility Guidelines).

Using this tool with the Halfords page, you can see that the text in the paragraph passes the AA standard.

screenshot of accessibility tool used on the page with the colour code of the text and the one from the background entered
https://accessible-colors.com/

Now using the same tool, but entering the colour of the link text, you can see it fails. The tool gives you suggestions to fix this with a different background or text colour.

Screenshot of the same tool but this time the result is a fails, there is suggestions on screen with the colour code that would help you reach the AA standard.
https://accessible-colors.com/

Make sure you also test in dark mode if you have one on your website. Also test buttons and links on hover (= when you move your mouse over them).

Images don’t have an alternative text

This is a big one. A lot of people still think that blind people don’t use websites but they do.

All your pictures (including diagrams) should have an Alt text (= alternative text) which will be read by a screen reader for users who can’t see them unless they are purely decorative. In that case you should set the all text to “” which will make the screen reader ignore this image otherwise the user will hear ‘image’ and will think they are missing out.

This is also good for your SEO (Search Engine Optimisation)

A good link to understand more about alt text and how to do a good one. And a longer guidance.

Video illustrating how a screen reader deal with a picture if there is an alt text or not

There is text on pictures

This is pretty common and make the text hard to read.

Below is an illustration of bad practice, the text is in white against a clear area of a photo, it’s really small as well. You might remember the first point about avoiding all caps text, so a lot of things to correct here.

screenshot of a page where the background is a woman with a dress with her legs in a lake, the water is clear and the  white text is on this part of the photo making it very hard to read
From the Zara website

One way to fix this is to add a background to the text area, it’s not as nice from an aesthetic point of view but at least you can read the text and spot the button now. I have also made the text bigger (18px instead of 12px initially and removed the all caps for the text in this area).

The same photo as above but this time the text has a plain dark blue background making the text easier to read

A trade off you can sometime make is a slightly transparent background as below.

the same photo as above but this time the background is slightly transparent allowing to see the photo through it but still making the text easier to read than without background

Fancy fonts or extra spacing between characters

Some websites using fancy fonts for branding and aesthetic reasons. This makes it harder to read for some. This example below is also using all caps and contrast of one of the sentence is poor.

Extra spacing between characters like for this sentence is harder to read.

Reducing spacing between characters like for this sentence is problematic too.

Italics text should be avoided as well.

screenshot of a page where the text "What is your future?" has some unusual way to display some letters, for example, the H has a double horizontal bar and the U has an horizontal bar at the top closing the shape.
From this website

Text is justified or centred

Justified text will introduce extra spacing between words which again is harder to read.

Text should be left-aligned, as some people struggle to find the start of the text otherwise and people who magnify their text (= zoom) might completely miss it if it’s further on the right.

some text start on the left, further on the left and some in the middle of the page
From Dobbies website

Media files are not accessible

You need to provide an alternative for people who can’t hear or see.

Videos with audio require captions synchronised with the audio track. Everything said in the video should be included in the captions. It should  include names, sounds and descriptions.

2 types of captions:

  • Open caption: is embedded into the video itself, and cannot be turned off
  • Closed captioning: can be turned on and off

Auto-generated captions are better than nothing but usually not great: Often inaccurate, especially if the speaker has an accent or when captioning names (people, brand, places etc…)

This will also be used by many people who are not native speakers, or are in a noisy environment or don’t want others to hear what they are watching for example.

Ideally, provide a transcript of your media, so users can either read it or use a screen reader to hear it. 

  • allow users to scan the content and see if they want to engage with it 
  • can be searched by people and search engines so better for SEO

Audio descriptions speak out what is happening in the video so that it’s accessible to people with low vision. There are two ways to create audio descriptions:

  1. a narrator describes all the visual information
  2. add a separate audio track that describes the visual information

Motion and animation

Motion and animation can make people physically sick. Always warned people and offer a way to stop it. You can learn more about this in this article on vestibular disorder.

This is an example of websites with a lot of motion and animation

Images and icons are pixelated once magnified

Use good quality images and prefer SVG files for your images, including logos and icons. This is a format of pictures which will stay clear if you magnify your screen ( = using the Zoom functionality).

an image with text and a union jack flag is very pixelated
From Morrisons – when zooming up to 400%, the text in green and the flag are pixelated

Never use an image of text like below on the Amazon website when you zoom to 400%.

some text is on an image so once magnified you can see it's very blurry compared to text next to it
The text at the bottom is part of an image which makes it blurry, same for the magnifier and basket icons

Side buttons or navigation bar take too much space once magnified

Once your screen is magnified up to 400% on LinkedIn as the top menu and the messaging menu are sticky (not disappearing when you scroll) there is very little space in between to read posts.

Some buttons on the side might also get in the way on some websites.

there is a large menu bar at the top, a big part of the bottom of the screen is used by the messaging menu which is sticky and there isn't much space  in between to read a post

The structure of your page makes no sense when using a screen reader

Headings communicate the organisation of a page. Screen readers will pick up your structure and a lot of screen readers users are using this to create a mental image of your page. Headings are ranked from H1, the most important, to H6 the least.

  • each page should have one H1 which contains the most important information
  • headings should separate content into meaningful sections
  • don’t use bold, italicise, underline or bigger font only in your style to define sections, as screen reader would not know it’s a heading
  • don’t skip headings, for example having an H4 following an H2

How to fix the problems

Some of these issues are easy to fix: style, colour contrast, alt text for your photos, font choice for example. But it might be harder depending how your website was built initially, if you have some developers in house or if you are using a CMS (Content Management System). How much access do you have to make changes if an agency built the website for you?

This is why it’s always easier to build a website with accessibility in mind instead of trying to fix the issues once the website is already built.

Sadly, accessibility is still not a priority for a lot of people.

When you create a website using WordPress for example, you start by selecting a Theme. This will be the frame of what you can do, with some things you can customise and others that are already done for you.

At the time of writing, there are 7,917 themes to chose from, only 113 of them are ‘Accessibility ready’ (less than 2%). This doesn’t even guaranty that your website will be accessible if you use them, but if you don’t, then it’s very likely that your website won’t be accessible.

screenshot of the wordpress screen showing the number of websites and how many are left once you apply the 'Accessibility Ready' filter

If you have already found a lot of issues you are unsure you can fix yourself, then you probably need some professional help to do it. It might be some accessibility training for your developers/designers, or getting advice from an accessibility expert to review your website with you.

It might be a good time to re-do your whole website with clear accessibility requirements in mind right from the start? This could potentially be quicker depending how your current website was made and how much control you have on the code.

How do I get better at this and learn?

If you are a company: have a diverse team and hire disabled people. Invite feedback from your audience. Get your site tested and if you ask disabled people to test your website then pay them for their work.

If you are on social media, follow and connect with diverse people and learn from them. You can also follow accessibility advocates who will relay some advice and sources to learn more.

And make sure your social media are accessible (see this post about it)! This is an easy place to start.

Two recent online events could be a good place to start as well: this one below organised by Accessibility Manchester: Real World Accessibility Stories and 24hours of video about accessibility by ID24.


This post was written after a friend asked me if her company website was accessible. I thought a lot of people might be wondering the same and not knowing where to start.

I hope this was useful.

If you think something is missing or incorrect, please get in touch. I have a keen interest in Accessibility but I’m not an expert.