2025-11-12
Imagine you have broken your arm and need to fill out a form on a website. Since you can't use a mouse to navigate, you rely on the tab key instead. This shouldn't be a problem, but on many websites it is. Some websites become almost unusable when navigating with the keyboard. For example, you might lose track of which element is focused, or you may need to select a radio button but can't because the radio buttons aren't focusable. As a result, you're unable to submit the form, since choosing an option is required before submitting it. All of this sounds pretty frustrating, right? And this is just one example of accessibility issues I often encounter when testing websites.
These kind of issues are why since the 28th of June this year, the European Accessibility Act is in effect. This means that products and services need to comply according to this act. This includes websites that offer a service or product. For a website to comply with the European Accessibility Act, it must meet the 50 WCAG 2.1 A and AA criteria. It is also important that the website clearly states the accessibility level of the product or service, and which criteria aren't yet met and explaining how they are working to improve accessibility.
There are a few things to do to make a website naturally accessible. For example, use semantic HTML. Screenreaders can get information from semantic HTML. For example `<nav>` can be used for navigation, or when you have a list of newsitems you should use `<ul>` or `<ol>` with `<li>` elements. This way the screenreader knows that it is a list and the items within the list are related to each other.
Another thing to keep in mind when making an accessible website, is progressive enhancement. This means that you build your website in layers, you add another layer on top of the previous layer. For example, you start with semantic HTML, you add the CSS and then you add the JavaScript functionality. The idea is that with only the first layer, the website should remain functional and usable. This way, if for some reason one of the other layers doesn't load, the website will still be accessible and usable.
The performance of a website is also important for accessibility. There are some easy things you could do to improve the performance of your website. For example you could let the browser decide which image to choose based on the screensize. This way a mobile phone doesn't have to load a huge desktop image. Also consider lazy loading and using webp or avif formats for images (don't forget to add fallback image for browsers that don't support avif).
Apart from these three important aspects above, to comply with the EAA you need to know about the WCAG 2.1 guidelines, and comply with the A and AA criteria. You can find the guidelines here: