Website Accessibility Principles for Editors – 2019

With the ever-advancing technology, we now have more accessibility tools at our disposal than ever. People struggling with different types of sensory impairments can effectively browse websites, under one condition - the site has to be accessible. Unfortunately, the majority of the Internet is not friendly to the disabled.

Website accessibility banner displaying the struggle of navigation the cursor to a desired end point.
Article by Dawid Zimny
I am particularly interested in web analytics. Knowing the way your visitors browse your website will help you improve their browsing experience and is crucial for converting them into clients.

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 a 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.

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 them empty is the equivalent of removing the images altogether. If you wouldn’t remove them for every visitor, why do it to the disabled ones?

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.

You can even go as far as automating the process. Learn how to use artificial intelligence to generate the alt text of images for you.

Be mindful of colour contrast

Colour contrast isn’t something you can fix outright although it’s very important to know about 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 changes. There’s one major problem with that – the palettes are usually prepared by branding agencies that don’t have experience in web marketing.

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

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.

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.

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 you are responsible for ensuring they do so.

Responsive design isn’t for the mobile devices but for the people that use them. We approach website accessibility the same way. Building a people-centric site that works for your visitors will consequently make it work for your business.

Got Something To Share?

Your email address will not be published. Required fields are marked *