Accessibility and WCAG 2.1 for an accessible webshop, app and site

Accessibility and a webshop, app or site’s user experience go hand in hand. This is something that’s interwoven into the design of the UX and the wireframes. These early interventions are often decisive for the end result, because this is where a lot of user-friendliness comes from. As a general rule of thumb: if something doesn't work as a visitor expects, it's probably not very accessible. Are you deviating from standard web conventions and well-known UX patterns? Then you will run the risk that visitors won’t be able to navigate easily, or you may end up missing out on turnover, because they are confused and don’t understand. Some examples:

• An input field that doesn’t highlight when you click on the label in front of it.

• A menu that only expands with a double-click.

• Or using orange instead of red to indicate that a field is mandatory.

Now you may sometimes think that there are good reasons to deviate from the standards, because you’ve got data that proves that there is a better way. If you deviate from user expectations, it is important to remember that the dev team should pay extra time and attention to the accessibility of the unique components or elements that you introduce. Unfortunately, this is something that is regularly forgotten, which limits accessibility and lead to disappointing results.

In addition to the user experience, accessibility also applies to the HTML. You wouldn’t immediately expect your visitors to read the source code using inspector tools, but auxiliary software like screen readers use the source code structure to describe the elements to the visitor. A menu that only expands with a double click or a mandatory input field in the check-out are examples of things that need to be described technically in the code so that any auxiliary software knows how to deal with it. And this doesn’t just benefit assistance software, but also your visibility in search engines. Which ultimately also contributes to your relevance and findability.

And then another important user group: the visitors without a mouse. They are often forgotten, mouseless users are also the people who visit a website or shop using a mobile device. Things that go wrong for them often include illogical tab order, bad content focus or a pop-up that only disappears after clicking 'exit'.

It’s not just the technical aspects of the website that have to be correct. The content team can also play their part when it comes to accessibility. Some examples:

• When deciding on colours, it’s important for designers to look at the contrast and the corresponding readability. Is the text readable by everyone? Also, for people who are colour blind?

• The readability of texts is another contributory factor when it comes to accessibility. For example, think about the font size, font, and line spacing, but also the length of the sentences and the use of language.

• Accessibility is also influenced by how you input the content in the CMS. Do you use headers and headings correctly? For example, don’t jump from H2 to H4, and make sure that the page only has one H1. Do links open in a new tab automatically when you’re navigating within the same site? And also remember that including alt texts for images assists both the screen reader as it reads the descriptions aloud and is also good for SEO.

In short, we can break digital accessibility down to four points that you should always keep in mind:

• Observation: is all the information on my website clear and visible to visitors?

• Operation: are all components in the interface operable for all types of visitors?

• Understanding: is the information and the user interface understandable?

• Robustness: is the content sufficiently robust and do you adhere to web standards so that it can be reliably interpreted by a wide range of users? We call these user agents, for example a browser, a printer, beamer, or a screen reader.

The W3C website is home to the WCAG 2.1. accessibility guidelines. You will find explanations of how you can improve your webshop, app or site’s accessibility on the basis of the above four points. A lot of these are technical points that a digital agency can help you with. A good start is to carry out an Accessibility Scan that gives you insights into the stumbling blocks that hinder your visitors and will give you useful tips about improvements you can make, and their impact.

The internet is the greatest source of information ever created, made for people, by people. The value of digital transactions continues to grow. E-commerce grew as fast in the first 3 months of the pandemic as had been predicted for the next decade. There is no debate about whether the internet and the digital world are indispensable, and every new development emphasises this. The fact that these important facilities should be accessible to everyone is – if you ask Lucien – also a matter of course rather than a question. By making a website, app or shop accessible to everyone, you don’t just improve the user experience, but also the relevance, findability, and conversion. Are you going to implement digital accessibility today?