Barrierefreiheit des Widgets

 

📘 Was ist der European Accessibility Act?

Die EAA ist eine EU-Richtlinie, die sicherstellen soll, dass digitale Services für alle Menschen zugänglich sind – auch für Personen mit Einschränkungen. Dazu zählen Websites, Apps, Formulare und Online-Buchungssysteme wie das aleno Widget.

Das Gesetz orientiert sich an den WCAG 2.2 (Web Content Accessibility Guidelines), Level AA. Ab dem 28. Juni 2025 müssen alle Unternehmen in der EU, die digitale Dienste anbieten – also auch Restaurants und Hotels – diese Anforderungen erfüllen.

🧾 Was bedeutet das für dein aleno Widget?

Da das aleno Widget Teil deines digitalen Angebots ist, muss auch dieses den Barrierefreiheitsstandards entsprechen.

Die gute Nachricht: Wir haben das bereits für dich umgesetzt.

✅ Was wurde am Widget verbessert?

Das Widget erfüllt jetzt den Standard WCAG 2.2, Level AA.

Die wichtigsten Verbesserungen:

• 🔁 Tastaturbedienung: Reservierungen lassen sich komplett ohne Maus durchführen

• 🗣️ Screenreader-Unterstützung: Alle Elemente sind korrekt beschriftet und werden vorgelesen

• 🔍 Automatisierte Tests auf typische Barrierefreiheitsprobleme wie:

  • Farbkontraste

  • Fehlende Alternativtexte bei Bildern

  • Unklare Überschriftenstruktur

   

🛠️ Was solltest du prüfen oder anpassen?

Je nachdem, wie du das Widget eingebunden oder angepasst hast, können zusätzliche Schritte nötig sein.

🎨 1. Farbkontraste prüfen

Wenn du die Widget-Farben geändert hast, prüfe bitte den Kontrast zwischen Text und Hintergrund.

• Der Mindestkontrast für normalen Text ist 4.5:1

• Nützliche Tools:

   

  • WebAIM Contrast Checker

  • Color Contrast Accessibility Validator

   

🖼️ 2. Alt-Texte für eigene Bilder

Wenn du eigene Bilder (z. B. Banner) im Widget verwendest, stelle sicher, dass sie mit Alternativtexten (“alt”) versehen sind.

So können Screenreader den Inhalt verständlich wiedergeben.

📌 Wir veröffentlichen bald eine Anleitung zur Konfiguration dieser Alt-Texte.

🔗 3. Widget im iFrame eingebettet? Fokussteuerung beachten

Wenn du das Widget über ein iFrame einbindest, kann der restliche Seiteninhalt im Hintergrund weiterhin fokussierbar bleiben. Für Nutzer*innen mit Screenreader oder Tastatur-Navigation kann das verwirrend sein.

Damit sich der Fokus während einer laufenden Reservierung ausschließlich auf das Widget richtet, solltest du beim Öffnen und Schließen des Widgets das inert-Attribut dynamisch setzen bzw. entfernen.

So geht’s:

Verwende dafür unsere Widget Hooks, zum Beispiel so:

So geht’s mit unseren Widget Hooks:

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

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

👉 Wichtig: Passe #content ggf. an dein Seitengerüst an.

⌨️ Tastatur-Navigation im Widget

So funktioniert die Navigation:

• TAB: Zum nächsten Element springen

• SHIFT + TAB: Zum vorherigen Element

• ENTER: Auswahl bestätigen

Teste es selbst – die Bedienung ist intuitiv.

📬 Barriere gefunden?

Wenn dir eine Stelle im Widget auffällt, die nicht barrierefrei ist, sende uns bitte eine kurze Nachricht an:

📧 accessibility@aleno.me

Dein Feedback hilft uns, die digitale Gastronomie für alle zugänglich zu machen.