Inhaltsverzeichnis
Inhaltsverzeichnis
Digitale Barrierefreiheit
Unser Ziel ist, für alle Gäste ein möglichst einfaches und bequemes Reservierungserlebnis zu schaffen. Deshalb werden wir unsere Widgets sukzessiv entsprechend den gesetzlichen Regelungen barrierefrei gestalten. Weitere Details in unserer Erklärung zur Barrierefreiheit. Was Barrierefreiheit bedeutet und Empfehlungen für Gastronomen haben wir in diesem Beitrag zusammengefasst.
Allgemein
Das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland verpflichtet u.a. auch Bars, Cafés und Restaurants zum 28. Juni 2025, ihre digitalen Angebote barrierefrei zu gestalten. Es setzt dabei Richtlinien des bereits geltenden European Accessibility Act (EAA) um und referenziert die Gestaltungsprinzipien der Web Content Accessibilty Guidelines (WCAG).
Das Gesetz verfolgt das Ziel gesellschaftlicher Teilhabe: Menschen mit Beeinträchtigungen sollen einen gleichberechtigten Zugang zu Online-Services erhalten, darunter fallen auch bestimmte Webseiten, Online-Shops sowie Online-Reservierungstools wie jenes von resmio.
Ausnahmen gelten für sogenannte Kleinstunternehmen mit weniger als 10 Mitarbeiternden und weniger als 2 Millionen Jahresumsatz. Der interaktive BFSG-Check liefert einen ersten Anhaltspunkt, ob dein Unternehmen betroffen ist. Rechtsverbindlich ist das Ergebnis des Selbstchecks indes nicht!
Gäste können über unser Widget einen Tisch im Restaurant online reservieren. Restaurantbetreiber verlassen sich berechtigterweise darauf, dass alle Gäste gleichberechtigt ein reibungsloses Buchungserlebnis erfahren.
Unabhängig von der gesetzlichen Verpflichtung haben wir es uns deshalb zur Aufgabe gemacht, das Nutzungserlebnis in allen unseren Widgets und über resmio erstellen Restaurant-Webseiten zu verbessern. Dabei orientieren wir uns an den vier Grundprinzipien der Barrierefreiheit der WCAG: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit.
Bekannte Hürden, die in unserer Erklärung zur Barrierefreiheit aufgeführt sind, möchten wir schrittweise abbauen. Zusätzlich haben wir Kontaktinformationen und einen Feedback-Prozess für Gäste implementiert, die Hilfe benötigen oder etwaige Bedienungsprobleme melden möchten.
Die zwei wesentlichen Optimierungen am Online-Reservierungswidget von resmio betreffen die Tastaturbedienung und die Screenreader-Kompatibilität. Ferner verzichten wir im Widget auf blinkende und blitzende Animationen sowie künstliche Zeitbegrenzungen, die den Druck aufrechterhalten, den Reservierungsprozess abzuschließen.
Bitte beachte die Tipps zur Farbkontrastgestaltung für Widgets und Emails.
Alle relevanten Eingabefelder (Auswahl der Personenanzahl, Datumsauswahl usw.) und Buttons sind über die Tastatur mittels der Tabulator-Taste zu erreichen und lösen mit Eingabe der Enter-Taste die gewünschte Aktion aus.
Auf diese Weise sind Gäste mit motorischen Einschränkungen in der Lage, ihre Online-Reservierung auch ohne Computermaus abzuschließen.
Screenreader unterstützen Menschen mit Sehbeeinträchtigungen dabei, Bildschirminhalte zu erfassen, indem sie sie „vorlesen“.
Vor diesem Hintergrund haben wir sprechende Beschriftungen (ARIA-Labels) und Rollenzuordnungen für alle wesentlichen Bereiche und Funktionen implementiert. Dadurch erfahren Betroffene genauer, wo sie sich im Online-Reservierungsprozess befinden und welche Aktionen sie vornehmen können.
Wir erstellen Webseiten für Restaurants und nutzen hierfür das technische Grundgerüst unseres Partners Sitejet.
Sitejet stellt bereits umfangreiche Funktionen bereit, die uns und unsere Kunden dabei unterstützen, geltende Anforderungen gemäß BFSG und EAA zu erfüllen.
Hierzu gehören u.a. :
- Tastaturbedienung und Fokusführung
- Alt-Texte für Bilder und Icons
- Title-Tag für eingebundene iFrames (relevant fürs resmio Widget)
- Skip-to-main-content-Link
- Aria-Labels für einzelne Module
- Design-Optionen für Website-Farben und -schriften
Wir orientieren uns bei der Gestaltung von Restaurant-Webseiten an Best Practices zur barrierearmen Gestaltung.
Diese umfassen etwa die logische Strukturierung von Inhalten mittels Überschriften-Hierarchien und Absätzen, den weitgehenden Verzicht auf automatisch startende animierte Inhalte, den Verzicht auf Zeitdruck bei Eingabefeldern, der Wahl eindeutiger Seitentitel, das Setzen von Alternativtexten für Bilder (nicht bei dekorativen Elementen / Icons).
Das Reservierungswidget von resmio wird als iFrame mit einem eindeutigen Title-Tag auf den von uns erstellten Restaurant-Webseiten eingebunden. Dadurch können sehbeeinträchtigte Menschen die Funktion und den Zweck des Widgets erkennen.
Einschränkungen im Hinblick auf Vereinbarkeit mit den Anforderungen für Barrierefreiheit sind vor allem im Hinblick auf Farbkontraste / Schriften (bedingt durch Umsetzung der Webseiten in Restaurantmarkenfarben), Alt-Texten von Bildern und Einsatz von PDF-Speisekarten möglich. Bitte beachte die Tipps weiter unten.
Tipps für Barrierefreiheit
Damit Menschen mit Sehbeeinträchtigung deine Inhalte auf der Webseite und im Widget klar erkennen können, müssen Schrift und Hintergrund einen ausreichend hohen Farbkontrast aufweisen.
Gut sichtbare Farben verbessern die Lesbarkeit allgemein für alle Gäste – und entscheiden schlussendlich darüber, ob ein Gast reserviert oder nicht.
Einige allgemeine Tipps:
- Kontrast prüfen: Nach WCAG 2.0 ist ein Kontrastverhältnis von 4:5:1 erforderlich. Kostenlose Online-Tools wie Webaim Contrast Checker oder WCAG Color Contrast Checker von Accessibleweb helfen dir dabei, den optimalen Farbkontrast zu ermitteln.
- Klare Farbtrennung zwischen Text und Hintergrund: Dunkle Schrift auf hellem Grund (oder umgekehrt) sorgt für einen angenehmen Kontrast.
- Akzentfarben sparsam einsetzen: Helle Pastelltöne sind für interaktive Elemente wie Buttons oft zu schwach (Beispiele: ✅ Dunkelblau auf Weiß = gut lesbar // ❌ Hellgelb auf Weiß = kaum erkennbar).
- Die Wahl einer größeren Schriftgröße sorgt für bessere Lesbarkeit. Auf der Webseite sollten möglichst serifenlose Schriftarten wie z.B. Roboto, Open Sans, Lato, Nunito oder Montserrat eingesetzt werden.
Du kannst dein Widget-Design (Hintergrundfarbe, Schriftfarbe, Akzentfarbe sowie Schriftgröße) jederzeit über 
Einstellungen > Integrationen > Widgets & Newsletter >Widget anpassen in deinem Konto konfigurieren.
Alle gespeicherten Änderungen werden sofort übernommen, du musst dein Widget nicht umständlich neu auf deiner Webseite oder sozialen Kanälen integrieren.
Auch Gäste-E-Mail-Benachrichtigungen (bspw. Reservierungsbestätigungen) sollten idealerweise barrierefrei gestaltet sein. Wir ermöglichen die Farbgestaltung im System vorzunehmen.
- Klicke auf
Einstellungen > E-Mails und wähle dort oben E-Mail-Design aus. - Im darauffolgenden Dialogfenster kannst du deine Gäste-Emails nun farblich anpassen.
- Alle hier getroffenen Einstellungen wirken sich auf alle automatisiert versandten Gäste-Emails aus, nicht aber individuelle E-Mail-Newsletter!
Ausführliche Details findest du im Hilfebereich unter Benachrichtigungen und Emails.
Um die globalen Design-Einstellungen deiner Webseite einzusehen und ggf. anzupassen, logge dich zunächst mit deinen Zugangsdaten ins Kundenportal ein.
Klicke nach dem Log-in anschließend auf die Kachel „Webseite bearbeiten„, um in den Editor zu wechseln.
- Im Webseite-Baukasten klicke rechts oben in der Kopfzeile auf den Navigationspunkt Design.
- Unter Farben kannst du jetzt die Hintergrundfarbe, Primärfarbe, Sekundärfarbe sowie Schriftfarbe entsprechend den WCAG-Richtlinien für die gesamte Webseite anpassen.
- Vergiss nicht, deine Änderungen zu speichern.
- Sollten vereinzelt Website-Elemente dennoch andere Farben aufweisen, kannst du diese händisch mit Klick auf den jeweiligen Container anpassen.
Schriften / Fonts
- Um die aktuellen Schriftenarten für Fließtexte und Überschriften zu ersetzen, klicke in der Kopfzeile auf Mehr und dort darauffolgenden Menü auf Fonts.
- Du kannst jetzt nach verfügbaren Google Fonts suchen und mit dem +-Symbol deiner Webseite hinzufügen.
- Aktiv werden so geladene Schriften erst durch das Bestätigen der jeweiligen Checkbox (Font Standard / Font Überschrift).
- Um die Schriftgrößen der Fließtexte und einzelner Überschriften-Hierarchien anzupassen, klicke in der Kopfzeile auf Design und dort auf Text
Sehschwache Menschen können den Inhalt von relevanten Bildern, Grafiken und Fotos möglicherweise nicht richtig erfassen.
Abhilfe schaffen Screenreader – sofern du für die jeweiligen Bilder einen entsprechenden Alternativtext hinterlegt hast, den der Reader dann vorlesen kann.
So kannst du Alternativtexte für Fotos und Grafiken auf deiner resmio Webseite festlegen:
- Klicke im Website-Baukasten auf das jeweilige Foto / die Grafik.
- In der linken Spalte öffnet sich ein Menü mit Detaileinstellungen zum Bild
- Scrolle hier nach unten bis zur Kategorie Text und gib in dem Eingabefeld für Alternativtext deinen aussagekräftigen Alttext ein, der den Bildinhalt kurz und kompakt beschreibt
- Speichere deine Änderungen
Die allermeisten PDF-Dokumente, darunter viele Speisekarten von Restaurants, dürften nicht vollständig barrierefrei sein und Screenreadern Probleme bereiten.
Einige grundsätzliche Empfehlungen, um PDF-Speisekarten barriereärmer zu gestalten:
- Echte PDF-Dokumente statt Bilder verwenden: Vermeide, eingescannte Speisekarten oder Fotos hochzuladen. Denn Screenreader können nur echten Text erkennen und vorlesen. Sehschwache Menschen können deine Speisekarte so vielleicht gar nicht registrieren.
- Logische Struktur mit Überschriften: Gliedere deine Speisekarte entlang der Überschriften-Hirarchie (h1, h2, h3 usw.), damit Screenreader besser durch die Karte navigieren können. Du könntest Kategorien wie bspw. Vorspeisen, Hauptspeisen, Desserts als h2 gliedern.
- Kontraste und Schriftgrößen beachten: Wähle nach Möglichkeit mindestens 16 pt Schriftgröße und arbeite mit serifenlosen Schriften wie Arial, Roboto oder Open Sans.
- Alternativtexte für Bilder: Bebilderte Gerichte in der Speisekarte sollten mit einem sinnvollen Alt-Text ausgestattet werden, damit Screenreader den Inhalt dieser erfassen können.
- Speisekarten ggf. auf der Webseite darstellen: Anstelle eines PDFs, kannst du auf deiner Webseite die Speisekarte auch vollständig in Tabellenform wiedergeben. Das ist barrierearm, erhöht aber u.U. den Pflegeaufwand.
Ergänzende Hinweise und Umsetzungshilfen auf der Webseite des Bundesministeriums des Inneren.
Wenn dein digitales Angebot unter das BFSG fällt, bist du nach § 12 BFSG möglicherweise verpflichtet, eine Erklärung zur Barrierefreiheit auf deiner Webseite zu veröffentlichen (etwa auf einer dafür klar ausgewiesenen Unterseite).
Diese gibt individuell Auskunft über die Vereinbarkeit mit den Anforderungen des Barrierefreiheitstärkunggesetzes sowie etwaiger Hürden. Sie enthält außerdem Kontaktinformationen zum Restaurant und Hinweise zum Durchsetzungsverfahren bei Beschwerden.
Als Orientierung findest du hier eine beispielhafte Mustererklärung zur Barrierefreiheit.
Diese Erklärung zur Barrierefreiheit gilt für die Website [www.mustermuster-restaurant.de] sowie für die darüber erreichbaren Online-Reservierungsfunktionen (z. B. über ein eingebundenes Reservierungs-Widget). Stand der Erklärung ist der [z. B. 12. Juni 2025]. Wir sind bestrebt, unsere digitalen Angebote im Einklang mit dem Barrierefreiheitsstärkungsgesetz (BFSG) barrierefrei zugänglich zu machen. Grundlage ist die Richtlinie (EU) 2019/882 über barrierefreie Produkte und Dienstleistungen. Stand der Vereinbarkeit mit den Anforderungen Unsere Website ist derzeit teilweise barrierefrei. Wir arbeiten kontinuierlich daran, die Inhalte für alle Nutzer:innen zugänglich zu gestalten – insbesondere Menschen mit Einschränkungen des Sehens, Hörens oder der Motorik. Noch bestehende Barrieren Einige Inhalte und Funktionen erfüllen derzeit bislang nicht alle Anforderungen an Barrierefreiheit. Dies betrifft beispielsweise: - Die kontrastreiche Darstellung bei bestimmten Farbkombinationen (abhängig vom gewählten Design) - Die vollständige Barrierefreiheit eingebetteter Drittinhalte (bspw. Kartendienst Google Maps) - Verlinkte PDF-Speisekarten sind möglicherweise nicht vollständig barrierefrei - Es sind ggf. nicht alle Bilder mit einem passenden Alt-Text versehen Wir arbeiten daran, diese Barrieren schrittweise zu reduzieren. Feedback und Kontakt Wenn Ihnen Barrieren auf unserer Website oder im Reservierungsvorgang auffallen oder Sie Schwierigkeiten bei der Nutzung haben, freuen wir uns über Ihre Hinweise. E-Mail: [info@mustermuster-restaurant.de] Telefon: [01234 56789] Betreff: Barrierefreiheit Durchsetzungsverfahren Wenn Sie uns eine Barriere gemeldet haben und innerhalb eines Monats keine zufriedenstellende Rückmeldung erhalten, können Sie sich an die Durchsetzungsstelle wenden: Schlichtungsstelle BGG bei der Beauftragten der Bundesregierung für die Belange von Menschen mit Behinderungen Mauerstraße 53, 10117 Berlin E-Mail: info@schlichtungsstelle-bgg.de Web: www.schlichtungsstelle-bgg.de
Diese Themen könnten dich auch interessieren
Gäste- und Feedbackmanagment
Erste Schritte
Google Business
Reservierungen verwalten
1 & 1 Ionos
Konto & Einstellungen
Speisekarte / Bestellsystem einrichten
FAQ zur Webseite
