From Our Digital Agency

Home Blog Web design and accessibility (a11y): what can you take into account?

Web design and accessibility (a11y): what can you take into account?

Creating a website that is also easy to view for visitors with a (temporary or permanent) disability is nowadays the rule rather than the exception. And that's a good thing, because 1 in 5 visitors to your website has a disability that makes it more difficult for him or her to view your site. What can you take into account in your design to make your website easily accessible to everyone?

The list of things you can add to your design to make it more accessible is long. They are laid down in the W3C WCAG guidelines. Below we have made a list of a number of important things that you can pay attention to when you are working on your web design.

Colors and contrast ratios

One of the most prominent things in your site's design is the colors and the contrast they provide with the text. The colors must be clear, pleasant to read and the contrast between text and background color must be good.

But what is good? With various tools you can easily calculate the contrast ratios between text and the background color. As this tool from WebAim. The tool calculates for each combination of text color and background whether it meets the W3C guidelines. W3C uses different grades, ranging from A to AAA (most comprehensive). When your text and background colors comply with AA or AAA, you can be sure that the text is easy to read.

An example of a contrast ratio that makes the title not so pleasant to read
An example of a contrast ratio where the title is pleasant to read

Give clear labels to your form

Most websites have a form somewhere to sign up for the newsletter or to leave your contact details. You can add labels to the input fields of your form in various ways to make it clear to the user what he needs to enter there.

Providing labels is by definition good practice from a UI perspective. From an accessibility perspective, it is better to use the labels above the input field in the form, instead of as a placeholder in the input field. A placeholder often has a lower contrast ratio and is therefore more difficult to read. In addition, placeholders are not always selected when the user navigates through your site with the TAB key. And the TAB key is indispensable to make your website accessible to everyone.

Place the labels of your form above the input fields.

Finally, using labels instead of placeholders is preferable because placeholders disappear as soon as you click on the input field. If you don't pay attention, you won't remember exactly what you had to enter in that field!

Design is also the focus

Users who are not good with the mouse mainly use their keyboard to browse your site. The TAB key is often used to select elements on your site. For example, buttons, links in the text or input fields. It is therefore important that you give the so-called focus a clear style that is clearly distinguishable from the rest of the style used in the design.

Make sure that when the user selects elements with the TAB key, they are clearly designed. For example, with a clear color and in good contrast with the other elements. Also check upon delivery how you can navigate through the website with the TAB key.

Don't forget to design the headlines!

For an easily accessible website, it is necessary that you also use headings (h1 to h6) correctly. Sometimes it is determined in a design which pieces of text are the headings (for example titles), but for other pieces of text the responsibility lies with the user. And that's where things can sometimes go wrong, because a user forgets to apply the correct headings or they can't be used because they haven't been designed.

An example of a design indicating which types of heads should be used in which place.

In the design phase it is therefore important that all headings are designed. The designer also prefers to indicate which heading should be used when and in what place, when the user has more freedom to layout pages themselves. Then you can be sure that the headings are present and that they are applied correctly.

The design of headings 1 to 6

Who is responsible for an accessible website?

Above we discuss a number of things that you can take into account in your design to make your website accessible. But making the website accessible actually starts earlier, namely in the UX/UI phase or for functional design phase. That is the stage at which you think about the user experience of your website, including the experience for the limited user. Also in the development phase there is still work to be done in this area. Ultimately, the developers must ensure that navigation via the TAB key, for example, works properly. And that the accessibility elements from the design have been properly implemented in the site.

Making your website accessible is therefore something that occurs in every phase of developing a digital channel. Do you want your website to meet 100% the requirements of W3C/WCAG? Make this known to your agency, the designer and later also to the developers during the strategy phase. A UX professional or designer naturally makes a website as accessible as possible, but not immediately 100% W3C/WCAG proof. That is a more precise job where you also have to check afterwards per point whether the WCAG guidelines have been properly applied.