When many people hear the word accessibility, they think of ‘alt’ text and not much else. The truth is that when building a website, accessibility should be considered every step of the way. According to the WHO (in 2023) An estimated 1.3 billion people have a disability, an equivalent to 1 in 6 people. This means that 1 out of every 6 people who visit your website has the potential to need accessibility changes made to be able to read or understand your site. 

Important Notice:

As of June 28th, the EAA (European Accessibility Act) will be in effect, meaning that most websites (especially those selling goods or services) must be legally compatible with accessibility standards based on WCAG 2.1 Level AA. For more information visit Level Access. 

The Levels of Accessibility (WCAG)

WCAG stands for Web Content Accessibility Guidelines. Developed by the World Wide Web Consortium to make digital content more accessible for those with disabilities. 

1. A (Basic) – Minimum requirements (e.g., alt text, keyboard navigation).
2. AA (Standard) – Recommended for most websites (e.g., colour contrast, clear navigation)
3. AAA (Enhanced) – The highest level, but not always practical (e.g., sign language, multiple navigation options)

Why is Accessibility Important?

Imagine looking at a website and you couldn’t read it, because the colours were a horrible blend and the words looked odd. Now imagine if every website you looked at you struggled with the same issues- it would seriously hinder your ability to use the internet. Colour blindness affects roughly 1 in 12 men (8%) and 1 in 200 women. In addition, in Britain around 10% of the population has dyslexia.

Making sure your brand and website have highly contrasting colours means that it will be much easier to read for a reasonable chunk of your site visitors. 

When it comes to font type and size though, there are no real clear accessibility guidelines. However, as a general rule of thumb, 16px or larger for body text is a good place to start. Try to avoid fancier fonts such as script fonts like Pacifico or Lobster (example below) or italics as these can be harder to read. 

For disabilities such as dyslexia, you can also help optimise your site by writing using an active rather than passive voice and keep sentences concise. Also avoid long run-on paragraphs and unnecessary ‘waffle’ if you can help it. Use a dark text on a background that isn’t white ,and break up text regularly using H2’s and H3’s to allow users to see what the text contains without reading it all. For colour-blind users, avoid colours such as greens, pinks and reds as these are the most common colours that people have difficulty with.

The Importance of Alt Text

Many marketers are aware of ALT text (Alternative text) from an SEO perspective, and may use the space to cram in keywords to increase page crawl-ability for search engine bots. However, not many people consider the fact that Alt Text is there so website and screen readers can read it out and give context to the page. This enables people with slow internet speeds, and those who struggle to interpret images to still understand what the image contains, increasing website acessability. 

 

Alt Text Best Practices. 

The best way to optimise your alt text for accessibility (but also SEO), is to write a clear description of the image and incorporate your keyword naturally. For decorative images that don’t need keywords in the alt text, don’t leave them blank. Instead, provide a ‘Null Attribute’ so that screen readers know to skip the image.

Example of a null attribute:
<img src=”insertimagetitlehere.jpg” alt=””>

 

It’s best practice to write alt text for important images where possible. For example, your keyword is ‘Macbook’ so you want to write it into the alt text, but you also need the alt text to make sense. You also should not write extraneous text, your alt text should not explain that it is an image (for example, the photo contains the image contains).

 

The alt text for this image should be: “Person wearing a yellow  jumper and gold bracelets, sits at a desk typing on Macbook”

 

Apps and Add Ons: 

Open dyslexia font

Some dyslexic people use the extension Open-dyslexic to change the font on their browser to a font specifically designed for dyslexic people. By testing the compatibility of your website with this extension and building it with this in mind, you can make sure your website is as dyslexic-friendly and acessable as possible. 

Colourblindly and Colourcontrast.CC.

Colourblindly is another Chrome extension, this time however it simulates how your website may look to people with different types of colourblindness. By clicking through the types of colourblindness you can see how your website is viewed in real time.  This paired with Colourcontrast.cc is the perfect combination to make sure your website and branding is as accessible as possible. 

 

 

 

Alt text AI:

If you struggle to write alt text, there are AI tools out there that can help you. Alttext.AI ‘reads’ the image and generates an appropriate caption. Remember to make sure you double-check this and remember to add in your keyword (as seamlessly as possible) for SEO purposes. 

 

Other Ways to Ensure Website Accessability.

• Make interactive elements easy to spot – this includes making sure your links are a different colour and underlined and that buttons stand out easily against the background. Use tools such as Colourcontrast.cc to check the colour accessibility and make sure your colours are compatible. Avoid colour combinations like grey and yellow and pink and red.

 

• Ensure your site is keyboard accessible – Some disabilities such as muscular dystrophy can make using a mouse or trackpads hard, so users rely on keyboard navigation. Making sure your website can be navigated by keyboard or other accessibility devices is an important consideration when developing your website. Using the tab key, it should take you to each focusable element of the web page.
  • Elements that should be focusable include (but are by no means limited to): Call To Action Buttons, Summaries, and Audio and video controls.

 

• Design for mobile use – Some people find it difficult to use a laptop, so rely on mobiles or touchscreen devices such as iPads to navigate websites. Making sure your website has a responsive design and is optimised for mobile is a great way to make it more accessible. Especially as roughly 9 in 10 people now access the internet via a mobile device of some kind. 

 

• Descriptive anchor text. Also known as link text, anchor text is clickable text that links to somewhere else (usually another site or page). Ensuring this is descriptive and clear provides context to users, particularly those using screen readers or with slow internet speed who can’t click through to the link. 

Go Forward and Optimise!

Now you have all the tools and information to see just how important website accessibility really is. when designing your website, making sure you consider how all users can interact with your website can also increase your site’s crawl-ability, increase session duration and decrease bounce time; an all-around win. When it comes to accessibility, perfection is almost impossible. However, this does not mean it’s acceptable to admit defeat at the first hurdle. Optimise your site as best as possible, consider all of the above, and stay up to date with new ways to optimise your site for accessibility.