WCAG: 4 tips to make your website more digitally accessible

Of course, as an organization and as a brand you want to be inclusive and not exclude anyone. If you take into account that 3 to 4 million Dutch people have a functional disability, it quickly becomes clear that there is a lot to gain, also commercially. What's more, because a well accessible website is better indexed by Google, you also become more accessible to millions of others. All the more reason to get started.

But that is easier said than done, something I have experienced myself. In the past year, as a front-end developer, I spent a lot of time making HVC' s new website 'barrier-free' (you can read more about that here). And our own site has a lot of room for improvement in that regard as well. To get you started, I'll give you four tips that are fairly easy to implement but guaranteed to improve the accessibility of your website.

You will often see a "Read More" button below the "notch" (introduction) of a news item. This button makes perfect sense if you see that it belongs to the news item in question. However, people with visual impairments do not 'see' this button. Therefore, blind and visually impaired people often use a screen reader, a program that scans the website and then reads it aloud. To serve them, it is important to give individual links their own context. For example, a link text for this article could be: "Read Boaz's tips. In this way, you give a link the context that people with visual impairments need to understand where they are navigating.

As with the previous tip, it is important for screen readers that all html elements are "wrapped" in an area landmark such as , or . This way the screen reader can easily read out what the structure of the website is. It is preferable to use HTML5 elements (such as those mentioned above) but you can also indicate what landmark your html element is with the 'role attribute'. For example, you could use which works the same as .

People who are prone to nausea or have epilepsy would like to see as few animations as possible. Laptops and smartphones therefore often offer a "prefers-reduced-motion" setting. This completely disables 'movements' such as page transitions and other subtle animations. At least, all 'native' animations. These are the animations that are triggered by the device itself, as seen when opening an app or closing the device.

This setting is incredibly useful, also because it can be read into a website. This way you can make sure that the animations in your website adjust when a user has activated this setting. You do this by means of the css prefers-reduced-motion media query, which looks like this:

@media(prefers-reduced-motion) {
transition: none;
}

In the example above, using this media query, animations are conditionally turned on and off based on or the user's setting. Super handy and super simple!

Got the hang of it? Then pick this low-hanging fruit to further improve the accessibility of your website.

• Use a default font size of at least 9 pt (=12px) for optimal readability, even on smaller screens.
• People with a motor disability often navigate with the tab key instead of a mouse. With an attribute you can indicate for each link whether it belongs in the 'tabbing sequence'. Make it easy on yourself by ensuring that the order of the visible links matches the HTML, otherwise you have to correct for this using tab index attributes. Furthermore, make sure that the very first tab in the tabbing sequence is the skip-to-content link so that people with visual impairments can navigate directly to the content to be read by the aforementioned screen reader.
• Always ensure that the contrast ratio between text and background is at least but preferably more than 4.5:1. This article (and thus our own website) is unfortunately an example of how not to do it, the contrast between body text and background is not large enough. We will work on these and other areas of improvement early next year. Promise.

Some guidelines are at odds with the principles of good UX design. Take, for example, the semantics of your titles. To be compliant with WCAG 2.0 A + AA, they must follow the semantics of H1, H2, H3, H4. Sometimes, however, this rigid approach does not benefit the design and you are tempted to deviate from it. That choice, of course, is up to you and to what extent you are legally required to comply with it. Still, it is often a seeming contradiction and requires creativity above all else. In another article, my colleague, product designer Semih Yilmaz, elaborates on this and helps you reconcile the two. Read the article "How to design digitally accessible and aesthetically?".

Like HVC, could you use some help making your website accessible without sacrificing the user experience?