Make your website accessible to everyone with WCAG

Sjoerd Walinga UX Researcher Concept7
Sjoerd Walinga
Last updated: 09-07-2024 8 min. read time
WCAG-richtlijnen website toegankelijk maken

Do you have or work within an organisation with your own website? Then it is important that you comply with the new WCAG guidelines. These are guidelines that allow you to make your website or app accessible to people with some form of disability: from the lightest degree to greater disabilities.

12% of the population aged 12 years and above experience one or more moderate or severe impairments related to vision, hearing or mobility.

Central government

,

2023

Über die Gesetzgebung

A few years ago, accessibility was still a choice. Only government organisations then adhered to the WCAG guidelines due to obligations. 

These guidelines have been tightened in recent years. Because: every website should be accessible to everyone, with or without disabilities.

That is why the European Accessibility Act was passed in 2019. From 2025, it will be compulsory for anyone with a Chamber of Commerce or equivalent in the EU to comply with the WCAG standards.

Grafiek gebruikersgemak: geluksvogels tot functie-beperkten

WCAG 2.1, 2.2 and 3 guidelines

The guidelines WCAG 2.1 and WCAG 2.2 have been mandatory for government organisations for some time. But just as a phone evolves, so do guidelines. This is because standards change in browsers. WCAG 2 (2.1 and 2.2) is still the standard now, but in the next few years we will move to WCAG 3. You can read about these new WCAG 3 changes here.

What are the WCAG guidelines?

The guidelines explain how to make web content accessible to the widest possible audience.

These WCAG guidelines are based on 4 principles:

Observable: people should be able to experience and use the website with the senses available to them.

Operable: people should be able to find and use content.

Understandable: people and software must be able to understand the content and understand how the website works.

Robust: the content must be reliably interpreted by a wide range of user agents, such as Google

Want to know more content about these 4 principles? WCAG explains for each principle what you can do for your website.

4 WCAG-richtlijnen: waarneembaar, bedienbaar, begrijpelijk en robuust

The different types of disabilities

You have different types of disabilities: from motor, physical to sensory. We divide these into 3 grades: A, AA and AAA. 

The A-level: mild degree of impairment

With the A-level, you have to think about colour-blindness, for example. With a simple and clear colour contrast on your website, you already make sure your website is more accessible to all these people.

Did you know that 1.3 million Dutch people experience some form of colour blindness?

digitaaltoegankelijk.nl

The AA level: average degree of impairment

Suppose someone has dyslexia or is low-literate. Then you can apply speech options or enlarge letters, for example. 

The AAA level: highest level of restriction

In this level, you are on the cutting edge that someone is so limited, for example when you have no vision. Mainly government websites have to comply with these guidelines. Provided you have set up a website properly, this target group can still use your website. Think of a read-aloud function and ALT-texts.

What can you do yourself as an entrepreneur?

You may be thinking: the cost I have to put into optimising my website does not outweigh the revenue I get from it. But the basic solutions are obvious and easily solvable. 

Save me your tips, I would like to use your expertise to sort this out on my website.

Taking contrast into account

We mentioned it briefly above. But taking contrast into account is really an easy-score. With the contrast-checker you can very easily test how your font colours work for the different A-levels on a background. You can also check whether the colour of a link text works.

Voorbeeld onduidelijk contrast en leesbaar contrast

Describe images with alt texts

If you add an image to your website, it should also be given a description. We call this Alt text. This is because visually impaired people go through your website with their tab key. An image with the title "547363" nobody understands.

So make sure:

Images during upload in the CMS already have a clear file name

The alt text has a clear description of what can be seen in the image. This need not be longer than one sentence.

The alt tags also include the main keyword, provided it is relevant to the image.

Is your website not yet able to add alt-texts? Then this needs to be set up via technology. Or contact contact for the best advice from one of our developers.

Voorbeeld onjuiste en juiste alt-tekst afbeelding

Pay attention to the comprehensibility of texts and language levels

The government must adhere to the B1 language level. This is comprehensible to the majority of adult readers. This percentage is between 80 and 90% of readers.

Voorbeeld onduidelijke tekst en duidelijke tekst

Use a minimum font size

Currently, 18 pixels is the general, minimum font size. But this varies depending on your target audience. Are your customers mainly seniors or elderly people? Then you structurally apply a larger font size. 

Interesting: seniors often put mobile screens at their very largest. They have much less in view because they use different settings. Check this yourself on your own website. Then your website will surely look very different! 

Algemene accessibility-check met Lighthouse

Wondering how your website currently ranks? The Lighthouse tool is on every Chrome browser. You can test your page on the technical part of accessibility. You will immediately see your score with advice on what could be better on your website. 

Shortcut to Lighthouse

Via Windows: F12 of Control+Shift+I

Via Mac: Command+Option+I

Try using the read-aloud function at your own website

Nice tip: your computer has a read-aloud function. Switch it on and go through your website with your tab key. Then you can see and hear how your website is structured. But also how quickly you can go wrong, how easily you can solve it and in which details it can be found.

Icoon tekst onduidelijk en icoon voorleesfunctie
A catchy example: making phone contact via your website. If you write out your 06 number without spacing, a reader will read it as a number with 10 zeros. (A billion - 700 million - what?) But if you put a space after every two digits, the website visitor will understand it.
Sjoerd Concept7

Sjoerd Walinga

UX expert at Concept7

Help, how should I do all this?

We understand that this is a lot of new information. We at Concept7 are happy to assist you! For example, we can perform a scan on your website and give you tools in understandable language for WCAG improvements on your website or app. 

Together with Concept7, we drew up a list of areas for improvement to make our website as accessible as possible. Especially in technology, Concept7 made a very important contribution. Visible and invisible.

Marco Bos

,

Digital service provider at Hunze and Aa's water board

Stay up to date with the WCAG guidelines and rank higher on Google

Besides the guidelines being enforced in 2025, there is another important reason why you want to keep optimising your website. Because when you follow the WCAG guidelines, you rank better in Google. This largest search engine has been taking this legislation very seriously for a long time. Optimised ALT texts, for example, are a must-have for SEO.

Why don't invest in your website with Concept7?

Planning to redesign your website or building a new one? Then you'll save a huge amount of money and time anyway if you include WCAG basics from moment 1. 

When we work with you to build your website, we automatically include the most important guidelines. We have the best experts on our team who have been scrutinising usability and accessibility for years.

Suppose you are building a house. Then you know you need doors and glass. Then it's nice that an organisation provides triple glass immediately and not that you have to arrange it yourself later. With us, that triple glass is a requirement. We don't deliver for less.
Sjoerd Concept7

Sjoerd Walinga

UX expert at Concept7

Human-centred design: put your target group first

Our main working method is human-centred design. This means that we don't start building your website or app right away, but first research your target audience. We really get around the table with them, listen to their needs and the things they encounter in the journey from product or service orientation, purchase to after-sales. 

Example case: a website redesign of a 5-star hotel

For this particular client, we wanted to know: is their website user-friendly and is it perceived as accessible? One of our respondents was a wheelchair user. He took us through his experience of booking a hotel room: "I use the room pictures on the website to see if I can get between the bed and the wall. I need to be able to see if I can make that turn to the bathroom. That's drama on all these websites. I always have to call back for more information".

Work with us to create a website that works for all your audiences?

Accessibility is the first step toward inclusive design

What does the future bring? Accessibility is the first step towards inclusive design. You no longer distinguish between culture, race, ethnicity or disabilities with your website. A website that welcomes all audiences and thus delivers more: don't we all want that?

When you decide who you’re designing for, you’re making an implicit statement about who you’re not designing for. For years we were making a decision that there were people in the world whose problems weren’t worth solving.

Mike Monteiro’s book Ruined by Design

What do you now know about the WCAG guidelines?

In this blog, you have become a lot wiser about building an accessible website and the WCAG guidelines. 

In brief. You comply with the WCAG guidelines by:

Making your text readable and understandable;

Technical adjustments to be made;

Visual adjustments to be made;

Looking closely at the content of your images and text.

Yes, Concept7 is happy to make your website or app WCAG-ready!

Do you have questions based on this article or want to spar with one of our colleagues? We can provide guidance in understandable language on WCAG improvements for your specific website. Or take over completely, of course!

Online growth begins with knowledge

Meld je aan voor onze nieuwsbrief en ontvang maandelijks praktische inzichten, tips en tricks om je op weg te helpen naar online groei!

Vul hieronder jouw e-mail in en ontvang direct een handig weetje 🙂

Preference