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

Date
15 November 2022

One in eight people in the Netherlands are living with a long-term physical, psychological, intellectual, sensory, or intellectual disability. If you offer products or services in the Netherlands, it is forbidden to discriminate between people with or without a disability. Yet there are still many companies that only assess their digital sales and service channels on the speed and responsiveness on each device. Why do companies often see digital accessibility, and therefore the WCAG 2.1 guidelines as optional? At iO, Software Architect Lucien Immink is committed to creating accessible webshops, applications and sites and explains how to make your digital channels accessible and inclusive.

iO Den Bosch

We sometimes hear: 'People with a disability aren’t in our target group, are they?' But if you look at the figures, it’s easy to conclude that this assumption is most likely incorrect. Have you ever realised that 2.5 million adults in the Netherlands have difficulty with reading, writing and/or arithmetic? And that they also have difficulty with essential digital skills? It’s also quite likely your target group will contain some people that are living with a disability, ranging from vision or auditory limitations, to not fully understanding texts or click paths. In addition, the environment in which someone visits a website can also contribute to limiting accessibility. For example, not everyone watches instructional videos with sound in a public or shared spaces. In short, by not including accessibility as a success criterion in the (further) development of your site, app or webshop, you limit access to your content and products for a large group of visitors. This can negatively impact your bottom line.

Digital accessibility and UX

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.

Screen readers and other assistive software

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'.

Accessibility is also influenced by the content team

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.

Accessibility and WCAG 2.1: how to get started

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.

Accessibility for better conversion

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?