Make an appointment

Kom bij ons werken. We zoeken een Data-analist! Bekijk de vacature

Is your webshop accessible to everyone? Use this checklist!

01-02-2023 - 8 minutes reading time

From June 28, 2025, the European Accessibility Act (EAA) will go into effect. This law should ensure that this large group of people can use products and services as easily as people without disabilities. The EAA also requires Web shops to be accessible and is based on the WCAG 2.1 guidelines. In this article, UX designer Niels van der Leeuw and Developer Yuran van den Bosch explain what this means for your webshop and what you need to pay attention to in order to comply with the EAA legislation.

Who does the European Accessibility Act apply to?

In the Netherlands we know about 4 million people with a disability. Think for example of people with a visual impairment or people who cannot use a mouse and/or keyboard due to a physical disability. Research by Level-Level has shown that even large companies such as Jumbo, Mediamarkt and Hema do not yet succeed in helping this group of people to place an order. Therefore, in the coming years it will only become more important to set up your website, product or service in the right way so that it is always accessible in the right way.

To whom does this legislation apply?

  • Webshops
  • Telecommunications services, such as your provider's apps and websites
  • Audio-visual services, such as Netflix, Videoland and Spotify
  • Online and offline services related to transportation, such as apps and websites
  • Other, for example: operating software, ATMs, smartphones etcetera

JavaScript Screen Reader Accessibility

People with visual impairments often rely on Screen Readers to read Web pages. These Screen Readers translate visual pages into (spoken or tactile) text. When creating a visual Web page, you take into account font size, a picture that fits your story, quantity of images, etc. But people using a Screen Reader depend on the data you give the visual components. That's why it's important to consciously think about the attributes on your page. Developer Yuran van den Bosch you explain what you need to pay attention to in order to comply with the EAA legislation and make your webshop accessible to everyone:

Long attribute

The lang attribute is used, among other things, to indicate to a screen reader which language to use. The lang attribute is used in the HTML element to indicate in which language the page is written.

Example:

<html lang="”nl”">

The lang attribute can also be used in individual elements to let the screen reader know that the element differs from the language the HTML element specifies.

Example: 

<html lang="”nl”">

  <body>

    <p>Welcome to our website!</p>

    <p lang="”en”">Welcome to our webpage!</p>

    <p lang="”de”">Willkommen auf unserer Webseite!</p>


Alt

Among other things, the alt attribute is used by screen readers to describe images so that the image can be read. If you use an abbreviation that must be pronounced letter by letter, make sure you write the text in capital letters so that the letters are read out separately. 

image of a dog playing with a ball

Sample ALT text that fits this page: image of a dog playing with a ball

Example: 

<img src="”url”" alt="” image" van een hond die met bal speelt” />

Roles

Roles is an HTML attribute that indicates the function of an element. Many elements already possess this attribute automatically. For example, a radio button automatically already has the role “radio” and the nav element has the role “navigation”.

Examples of roles:

  • Button
  • Checkbox
  • Link
  • Radiogroup
  • Radio
  • Searchbox
  • Tooltip

Landmarks

Landmarks are HTML5 semantic elements that can directly tell a screen reader what the function of an HTML element is. These landmark elements automatically possess a role attribute used by screen readers.

Landmark elements:

  • Header
  • Aside
  • Nav
  • Main
  • Footer

ARIA

ARIA stands for Accessible Rich Internet Applications, and is a set of technical specifications that Web developers can apply to improve the accessibility of their Web sites and Web applications for people with disabilities. This can be done, for example, by adding additional information about elements on a Web site, such as descriptions of images or indicating the role of a button, so that users with screen readers or other aids can better understand the content. ARIA can also be used to improve the interaction of a Web site, such as by indicating which element is currently the active element, so that users with disabilities know where they are on the Web site.

ARIA label

Where the role attribute indicates the function of the element, such as e.g. “Navigation”. The Aria tag provides additional information or a “name” such as, e.g., “Main Navigation” or “Social media Navigation.”.

The ARIA label helps screen reader users best navigate the website and can be used on all elements, but is generally only needed for elements that do not possess text content (text content is read by the speech reader).

Sample code ARIA

Examples:

  • Select element with label “Phone number country code”
  • Input element labeled “Your name”
  • Nav element with label “Prima”
  • Button with text content “Send” and label “Send email”

ARIA labelledby

Aria-labeledby allows you to use the text content of other elements to describe the labeled element by an ID.

... Just a quick note: we send out a newsletter every three weeks that includes the latest blogs, team updates and, of course, news about the offerings in our academy. Click here to subscribe.


Newsletter sign up

The accessibility checklist

Are you going to work on the accessibility of your Web site or Web shop? Below is a checklist you can use as a desktop background or forward to your content team.

The Accessibility Checklist

The Accessibility Checklist

Because this checklist cannot be read aloud by screen readers, we have written out the full checklist below. Good to know: always use the bullet points/numbered list from the web editor instead of imported symbol. This helps in correct identification and translation of lists by screen readers.

Titles

  •  Does the page title describe what the purpose or topic of the page is?
  • Do titles that are titles look like this?
  • Is there a hierarchical structure made between the titles?

Navigation

  • Is there a method to skip repeated navigation and navigate directly to the page content? (Including HTML/ARIA landmarks)

Links

  • Does the link text describe the ultimate goal or destination of the link?

Color/Contrast

  • Is information conveyed without using only color? For example, consider an error message in an input field supported by both color and text
  • Does all text have a minimum contrast value of 4.5/1 (or 3/1 for large text)? You can use the contrast value of your chosen colors with the tool from WebAIM
  • Can a link be identified and distinguished by more than just the color of the text?
  • Do elements have a clear focus to ensure that people who don't use a mouse know which element is active?

Zooming in / Responsiveness

  • Can a user enlarge / zoom the website on their chosen device?
  • Can a user use the website in both “Landscape” and “Portrait” mode?

Images

  • Do images use “Alt text” so that screen readers can describe what the image is about?
  • Is content placed on the website and not embedded in an image? (With the exception of logos)

Forms

  • Do all input fields have a label that is always visible to the user?
  • If necessary, are all elements present near the input field that a user can make changes with? Think of an “Edit” or “Delete” button
  • Are the forms developed so that “Auto-fill” can be used?

What does this mean for your e-commerce shop?

The European law must ensure that anyone with a disability can use your webshop at all times as easily as someone without a disability. Users of your web shop must be able to access its content and structure and navigate through web pages using the aids they need. Think for example of a screen reader, which reads the content on a page to visually impaired people. If you want to learn more about this legislation, take a look at the official website where everything related to the European Accessibility Act can be found.
Do you want to prepare for the legislation and ensure that everyone can use your website in an accessible way? Then follow the accessibility checklist and try to comply with as many points as possible. Need more help with this? Then please contact us.

Resources

https://www.frankwatching.com/archive/2022/11/15/european-accessibility-act-webshops/
https://digitaaltoegankelijk.nl/nieuws/european-accessibility-act-2025/
https://ec.europa.eu/social/main.jsp?catId=1202&intPageId=5581&langId=en
https://technobility.nl/blog/digitale-toegankelijkheid-webshops/#:~:text=Wettelijke%20verplichtingen%20webshops%20en%20digitale,voor%20online%20bedrijven%2C%20zoals%20webshops
https://dequeuniversity.com/assets/pdf/module-design/dq-designers-checklist.pdf
https://webaim.org/resources/contrastchecker/
https://level-level.com/nl/webwinkel-onderzoek-2021/
https://www.w3.org/TR/WCAG21/ 

You may also find these blogs interesting