Why is web accessibility relevant?
Web accessibility is about designing and developing websites in a way that makes it possible for all people to use them, regardless of any disabilities, such as impaired vision. By taking web accessibility into account, you can create more inclusive and accessible websites for all customers.
Based on this, it is therefore important that customer-facing content such as order forms, login, emails, and the self-service portal is created with accessibility for everyone in mind. This is especially important if you manage the layout of the content yourself, such as in the self-service portal and the welcome email.
How to make content accessible
Below you will find an overview of some of the most common focus areas within web accessibility.
Pay attention to color contrast. Color contrast is about making sure things are visible and readable for customers. This can involve the color difference between, for example;
text color vs. button color
button color vs. background color
text color vs. background color
The minimum requirement is a contrast ratio of 4.5:1.
There are online tools to check color contrast such as: https://webaim.org/resources/contrastchecker/ which also indicates whether the accessibility requirements are being met.
See examples of color contrasts below. Those marked with a red X do not meet the minimum requirement.
If the image contains information that is necessary or relevant to understand the content it is part of (for example charts or illustrations), you must ensure that the image has an associated alt text so screen readers can read the content aloud for the user. If the image is purely decorative, alt text is not necessary.
Link texts, both in text form and on buttons, must be descriptive of the content they link to. “Here”, “Read more”, or similar are therefore not good link texts.
If you add buttons yourself via code, for example in an email, you must ensure that they have, at minimum, a clickable area of 44*44 pixels.
Use headings in the correct order. If you use, for example, a screen reader or keyboard to navigate through the site, it helps that the hierarchy of the content is in order. For example, it is not appropriate if a heading jumps from H1 to H4.
If you make special changes in the self-service portal or embed it as an iframe on your site, you must also pay attention to ensuring that all functionality and all content can be accessed using a keyboard or a screen reader.
The above is a brief introduction to the web accessibility requirements.
If you want to dive deeper into the topic, there is additional material and video guides available on the Danish Agency for Digital Government’s website.