Schedule a call

We can all agree that everyone deserves equal access to the Web – but that’s not the case. A study has shown that over 70% of websites in the UK have serious accessibility issues. This makes the majority of the Internet unapproachable for over 12 million Brits suffering from various disabilities. One in four disabled adults in the UK has never browsed the Internet.

This has been confirmed in our 2020 British e-commerce report, where we’ve tested the 100 biggest digital retailers in the UK. Every single website was reported as “unusable to some”.

How to make your website accessible

Using good design and development practices is crucial to ensure website accessibility, but the responsibility isn’t only on the developers. They have to build a website using semantic code, but it’s your editorial team that has to ensure the website stays accessible and this is the focus of our article.

Alternative text for images

Images that are essential to telling your story need to have descriptive alt attributes. Screen reader software scans the code of the website and announces the text in alt tags. Leaving alt text empty is the equivalent of removing the images for everyone.

In the age of content management systems, everyone can set alt attributes for images – you don’t need to know anything about the code. It’s incredibly easy and you should make it your habit to include an alternative description for every descriptive image.

You can easily add an alt attribute to WordPress media.
WordPress allows editors to easily set alt attributes for images.

Be mindful of colour contrast

Colour contrast isn’t something you can fix outright, but it’s helpful to be aware of contrast rules before approaching a web agency. In fact, this aspect is far bigger than web design and starts at the branding stage of your company.

Businesses often approach web designers with pre-made colour palettes and are reluctant to change. There’s one major problem with that – the palettes are usually prepared by branding agencies that didn’t consider accessibility criteria.

Web Content Accessibility Guidelines contain detailed information about minimum contrast ratios for different text formats. You don’t need to read them thoroughly, and they’re not always spot on. Being aware is all that matters. There are fantastic online tools that check whether your colour scheme is compatible with legibility standards.

A few minutes of experimenting with Contrast Checker is enough to realise that the subject is delicate. It’s easy to name a website that uses a white background. We are also used to red being the colour for errors. But does a white background go well with pure red? The answer might surprise you.

Pure red colour (#FF0000) does not meet the WCAG standards for contrast, while a different shade (#AA0000) does.
Pure red (second row in the picture) does not meet the WCAG standards for contrast with a white background. You should use a different shade of red in this case.

USEFUL WEBSITE & MARKETING TIPS DELIVERED ONCE A WEEK

Includes tools to maximise your website potential.

Accessible information

Structuring the page in the code used to be exclusively the developer’s task, but these days WYSIWG editors and content management systems enable editors to make their articles and pages user-friendly.

Increasing the font on a headline and making it bold makes its function visually obvious. But it doesn’t work like that for screen readers. If you don’t explicitly include the text in a heading tag, they won’t be able to properly structure the content for the impaired visitor.

How to set accessible heading tags in WordPress Gutenberg editor.
Gutenberg heading block uses HTML tag naming scheme to make the content accessible.

At the same time, content structure benefits every user of your website.

Readability

Making your website easy to read is important even for people without disabilities. But those that struggle to read – and that number can be as high as 14% of adults over 16 years of age in the US – will appreciate it a lot.

You can easily test the readability of your website by measuring the Flesch Reading Ease score of your content. The test takes into account the length of sentences and the number of syllables in each word. The target score for web copy is 60 or higher, and we’ve covered website readability at length in one of our articles.

The twist

We are all aware that a website should be functional, but we often get lost in making sure it “looks good” above everything else.

Why not both? When approaching web agencies for a new website, make accessibility one of your priorities. It’s the developer’s job to make the website accessible, but yours to keep it that way.

If your previous project resulted in a poorly optimised website, you’re going to need help from a web agency to fix it. But with the above tips for your marketing team, you can address at least some of the accessibility issues right away.

USEFUL WEBSITE & MARKETING TIPS DELIVERED ONCE A WEEK

Includes tools to maximise your website potential.

Originally published Jan 31, 2019 9:11:40 AM, updated June 7 2022.

Don't forget to share this post!