Good websites always comply

What is a good website? There are, of course, several answers to this question. Different people have different needs. Good websites actually take into account that everyone is different, so that everyone can use the website. What should a good accessible website comply with?

Web Content Accessibility Guidelines

The Web Content Accessibility Guidelines (WCAG) are designed to ensure that a website is digitally accessible for everyone. The WCAG consists of four principles:

  1. Discernible

  2. Operatorial

  3. Incomprehensible

  4. Robust

These principles take into account all kinds of different people in different situations. A good website ensures that all WCAG success criteria are met. This is because then the website is accessible to different users.

Good websites can be observed by everyone

On a good website, you can perceive all information, whether by seeing, hearing or feeling it. Perhaps you are now reading this text by looking at it, or you are listening to it through read-aloud software or reading it through a braille reader. Whereas a website may seem good for someone who can see, the website may not be good at all for someone who cannot see and uses assistive software. Imagine there is an infographic with important information, but there is no text alternative available for this image. Then you miss this information if you cannot see the image.

Also remember that not everyone views the website on the same kind of screen. A phone or tablet can be rotated, so you want to be able to view the website properly in both landscape mode and portrait mode. And if you can't see properly and therefore zoom in, you don't want things to suddenly disappear from the page (this happens more often than you think). Also make sure the website is responsive, adapting to the size of the screen. If the text falls nicely within the width of the screen, you won't have to scroll horizontally.

In this animation, Technobility's homepage is zoomed in the browser from 100% to 400%. The website is responsive. The standard menu changes to a hamburger menu. The text continues to fit the width of the screen.

It can also be very inconvenient if the contrast of the text on a website is too low. This is not only a problem for people with poor eyesight, it can also be awkward if you are outside and looking at your phone in bright sunlight. A good website has sufficient contrast, not only for text, but also for icons, input fields and the like.

Good websites can be operated by anyone

A mouse or touchpad allows you to click and scroll through a website. Some users will not use a mouse, but the keyboard to navigate through a site. The Tab key lets you navigate past all the interactive parts on a page (have you ever tried this?). On a good website, you don't get stuck using the keyboard and you can control everything. You should also be able to know where you are on the page: the keyboard focus should be visible. So while a website may be good to operate with a mouse, it does not necessarily make a good website for a keyboard user.

This animation shows keyboard navigation through Technobility's website. The keyboard focus is visible here. It first navigates through the main menu, then follows a link with the keyboard. On the new page, the skip link is followed to skip the menu with the keyboard. On this page, it navigates past a number of links and finally follows a link to another page.

Some people will not use a mouse or keyboard, but, for example, voice controls. You can then speak text to control a button or link, for example. A good website is built in such a way that the button or link can then actually be operated. Of course, it is very annoying to give commands and nothing happens (although I am used to this with my dog). Curious about how voice control works? Then watch this short video from Apple about someone using voice control.

Furthermore, everything on the website should also be operable with a single pointer. This is important for people who use a pointer or who control a website through eye movements, for example. It may not be possible for them to use gestures such as swiping or "pinch-to zoom".

Good websites are understandable for everyone

“A good website is understandable for everyone!”

If you speak English and can see this text, you probably understand what is written here. But what if you are using pre-reading software and you hear something like "aa goood websiete is understandaablu for everiejoone". If the language in the code is set as Dutch, pre-reading software will also read out English text "in Dutch". This one line may then still be understandable, but an entire article becomes very difficult to follow. This can be solved by indicating in the code that a piece of text is English. Read-aloud software can then read it out in English, making it understandable for everyone.

Many websites contain forms, for example a contact form or a form to sign up for a newsletter. For some people, it can be difficult to fill in and submit a form correctly in one go. So make sure there are clear labels and instructions with the input fields. And if something does go wrong when filling it in, make sure there is a good error message indicating what went wrong.

Good websites are robust

Finally, you want a good website to work well on different devices and in different browsers. This can be done by ensuring in the code that software can determine, among other things, the accessibility name and role of interactive elements. For example, a button should be able to determine that it is a button and what the button is called. If this is specified properly in the code, different auxiliary software in different browsers can determine that this is a button and what the button does.

You also want to ensure that auxiliary software does not crash because of certain errors in the code. This can be done by checking the code with a validator.

More than just the WCAG

So good websites at least comply with the WCAG. This article has given some examples, but there are many other success criteria in the WCAG where other issues are addressed. Here you can find the success criteria of WCAG 2.1. In a few time, some success criteria will also be added in WCAG 2.2.

If your website is fully WCAG compliant, is it automatically a good website? Well, there are of course other things to consider besides the WCAG. A website that meets all the success criteria, but crashes every time, can obviously not be called a good website.

There are also functionalities that are not mandatory for the WCAG, but can give users a finer experience on the website. For example, WCAG requires sufficient contrast of text, but it is not mandatory to offer users a "dark mode". However, some users may really like this and find it a good website as a result. A particular font is also not mandatory for the WCAG, but a clearly readable font is fine for many people.

So there is no single answer to the question "What is a good website?", but a good website is accessible to everyone anyway!

Need help creating a good accessible website?

Neem contact met ons op!