Accessibility Act - what you need know

📘 What is the European Accessibility Act?

The EAA is an EU directive designed to ensure that digital services are accessible to all users, including people with disabilities. This includes websites, apps, online forms, and booking tools — such as the aleno widget.

The law is based on the WCAG 2.2 (Web Content Accessibility Guidelines) and requires compliance with Level AA standards. From June 28, 2025, any business providing digital services in the EU must meet these standards — including restaurants and hotels offering online reservations.

🧾 What does this mean for your aleno widget?

Because the aleno widget is part of your digital service offering, it must also meet accessibility standards. The good news: aleno has already made the necessary changes to ensure the widget is compliant.

✅ What’s new in the aleno widget?

The widget is now fully aligned with WCAG 2.2 Level AA. Key improvements include:

• 🔁 Keyboard-only navigation: All elements can be accessed and used via keyboard only (no mouse required).

• 🗣️ Screen reader support: All relevant fields and buttons are labeled properly and announced to assistive technologies.

• 🔍 Automated accessibility checks: The widget is tested regularly for key issues such as:

  • Low color contrast

  • Missing alternative texts for images

  • Incomplete or incorrect heading structures

   

🛠️ What do you need to check or adjust?

Although the widget is accessible by default, customizations or the way it is embedded on your website may affect accessibility. Please review the following areas:

🎨 1. Color Customizations

If you have adjusted the widget’s colors (e.g., to match your brand), make sure the text-to-background contrast remains compliant.

• The minimum contrast ratio for normal text is 4.5:1 (Level AA).

• You can test contrast using free tools like:

  • WebAIM Contrast Checker

  • Color Contrast Accessibility Validator

   

🖼️ 2. Alt Texts for Custom Images

If you’ve added custom graphics, such as banners or menu visuals inside the widget, make sure to provide descriptive alternative (“alt”) text for each image. This allows screen readers to describe the images to visually impaired users.

📌 A configuration guide for setting alt texts will be published very soon.

🔗 3. Using the Widget in an iFrame? Handle Focus Properly

If you embed the widget using an iFrame, your main page might still be focusable in the background — which can be confusing for screen reader or keyboard users.

To prevent this and ensure that only the widget is focusable while it’s open, you can dynamically toggle the inert attribute on your main page content.

Here’s how to do it:

Use our Widget Hooks to set the inert attribute (MDN) as follows:

alenoPopup.on("widget-opened", () => {
  document.querySelector("#content").setAttribute("inert", "");
});

alenoPopup.on("widget-closed", () => {
  document.querySelector("#content").removeAttribute("inert");
});

(Here we assume that #content wraps your page's content. If there are more elements, adjust the code appropriately.)

⌨️ Keyboard Navigation Guide

The aleno widget supports full keyboard navigation. Here are the main keys:

• TAB: Move forward to the next focusable element

• SHIFT + TAB: Move backward

• ENTER: Select or confirm an option

We encourage you to try navigating the widget using only your keyboard to ensure the experience is smooth and intuitive.

📬 Report an Issue

If you encounter a screen or element in the widget that does not appear accessible, please report it by emailing:

📧 accessibility@aleno.me

Our team is actively working on making digital hospitality inclusive, and your feedback is highly appreciated.