10 typical (WCAG) errors on websites​

With alt text on images on the website, screen readers have the opportunity to convey image content to the blind and visually impaired. We often see that images either have no alt text, or simply say something bland like “image1.” This means that screen readers cannot convey the content of an image either.

When you add alt texts (alternative texts) to the images on your website, you must therefore ensure that these are descriptive and informative.

For users with low vision or color blindness, it is important that there is a high contrast between text and background. If the contrast is too low, it can be difficult to read. Therefore, it is a good idea to test the contrast between two colors on e.g. WebAIM Contrast Checker – here you can quickly see whether the contrast meets the minimum limits in WCAG (at least 4.5:1 for body text).

It is important that all information on the website is communicated to all users regardless of their background. Therefore, it is important that, for example, error messages are not only marked with color, as screen readers do not see this - and thus there is also a risk that some users will not see it.

To ensure that all information is accessible to everyone (including screen readers), you should supplement colors with, for example, text or icons. This can be in contact forms, where you add an error message such as "This field must be filled in" instead of just marking the field with a red frame.

Many websites contain elements such as drop-down menus or burger menus that only work with a mouse. This means that users who rely on keyboard navigation cannot navigate around the website.

You can easily test this yourself: Can you open the dropdown menu on your website? Can you generally navigate around the website using the keyboard (Tab, Enter, Esc, Shift+Tab, etc.)

To ensure that website elements can be accessed with the keyboard, you must ensure that the website's HTML is set up correctly, e.g. <button> rather than <div>. You should also supplement with ARIA attributes where necessary.

When users navigate with the keyboard, they need to be able to see where they are, e.g. which button, link or form field is active. This can be done by ensuring that there is a visible border around the selected element or an underline, etc. If there is no clear focus marking, you risk your users getting lost in the navigation..

Therefore, make sure to add the necessary CSS styling that makes the focus visible (e.g. outline or border effects). Avoid turning it off with outline: none.

When users navigate via keyboard (and screen readers), they typically have to navigate through long menus or repetitive elements before reaching the main content. For screen reader or keyboard users, this can be both frustrating and time-consuming. Therefore, it is a good idea to have a hidden but focusable link at the top of the page (typically the first element in the HTML) that lets the user jump directly to the main content. This is called a “skip to content” link. For example, the link can be displayed when it gets focus via keyboard.

Link texts and buttons with the text “Read more” or “Click here” only make sense if you see them in the context of the visual content around them. For users with screen readers, who often jump directly from link to link, this type of link text is useless. It tells you nothing about where the link leads.

Instead, you should make sure to write descriptive link texts. Instead of writing “Read more”, you can write “Read more about our prices”. This way, users will know more about what they are linking to. If in doubt, try reading just the link text yourself – does it make sense without the surrounding content? 

If your website navigation changes from page to page, it can be difficult for some users to find their way around – and it can be confusing. Similarly, if headings are used randomly on every page, it can be confusing. That’s why it’s important to create consistent navigation across your entire website.

Make sure the placement and naming of menu items, buttons, and headings are consistent. Also, make sure to use the same heading levels and hierarchies (e.g. H1 for title, H2 for sections, H3 for sub-items, etc.) so that the user can easily navigate – even with a screen reader.

On many websites, headings are used primarily for visual styling – without considering the logical structure. This means, for example, jumping from an H1 to an H4, or using an H2 for design purposes even though it is not a real heading. This confuses both search engines and users with screen readers who navigate the content based on the headings.

Therefore, you should ensure that you use headings logically and hierarchically (H1 to H6). Each page should only have one H1, and then H2 to H6 in the correct order. For example, H3 is for subsections under H2, etc. 

Semantic correct code makes your website both more accessible and easier to maintain in the long run.

Some developers use <div> and <span> elements to build buttons, menus, and forms, even though native HTML elements (like <button>, <nav>, <form>) should have been used instead. If buttons and other components are built with <div> instead of semantic tags, they cannot be understood correctly by screen readers. In addition, it can also mean that these elements can become completely invisible or unusable for users who do not use a mouse.

Therefore, make sure that your website uses the built-in HTML elements for interactive functions as much as possible, e.g. <button>, <nav>, <form>, <label>, etc. If you need special components, you must add appropriate ARIA attributes (e.g. role="button", aria-label, aria-expanded) to ensure correct keyboard navigation.