BFSG für Gastronomie: Muss meine Restaurant-Webseite barrierefrei sein?

Wann gilt das BFSG für Restaurants?

Das Barrierefreiheitsstärkungsgesetz (BFSG) greift gemäß §1 BFSG, sobald ein Restaurant digitale Dienstleistungen für Verbraucher anbietet. Konkret fallen darunter:

• Online-Bestellsysteme (eigene Webseite als Lieferando-Alternative)
• Digitale Reservierungssysteme (OpenTable, Quandoo, eigene Lösungen)
• Online-Speisekarten mit Bestell- oder Warenkorbfunktion
• Gutschein-Shops und Geschenkkarten-Bestellungen
• Tischreservierungen über eingebettete Widgets

Eine rein informative Webseite mit Adresse und Öffnungszeiten ist weniger kritisch, sollte aber trotzdem grundlegende WCAG-Standards erfüllen – ausserdem, weil Google barrierefreie Seiten im Ranking bevorzugt.

Hinweis: Dieser Artikel dient der allgemeinen Orientierung und ersetzt keine Rechtsberatung. Für verbindliche Auskünfte zur BFSG-Pflicht deines Betriebs wende dich an einen spezialisierten Anwalt.

Typische Barrierefreiheits-Probleme in der Gastronomie

Die Gastronomie-Branche hat einige branchentypische Stolperfallen, die immer wieder auftauchen: Weitere Informationen finden Sie im BFSG-Glossar.

• Speisekarten als Bild-PDF: Nicht von Screenreadern lesbar, kein Text auswählbar. Verstößt gegen WCAG SC 1.1.1 (Nicht-Text-Inhalte) und SC 1.3.1 (Info und Beziehungen).
• Zu kleine Schrift auf mobilen Geräten: Gerade bei Speisekarten-PDFs oft unter 12px, nicht zoombar.
• Bestell-Buttons ohne ausreichenden Kontrast: Verstößt gegen WCAG SC 1.4.3 (Kontrast Minimum, Verhältnis 4,5:1).
• Allergen-Informationen nur als Tooltip: Nicht tastaturzugänglich, nicht von Screenreadern erfassbar.
• Fehlende Sprach-Deklaration: Bei mehrsprachigen Karten (deutsch/englisch) fehlt oft lang-Attribut für fremdsprachige Abschnitte.
• Reservierungsformulare ohne Labels: Verletzt WCAG SC 1.3.1 und SC 4.1.2 (Name, Rolle, Wert).

Online-Speisekarten richtig umsetzen

Die digitale Speisekarte ist das Herzstück jeder Restaurant-Webseite. Leider sind die meisten Speisekarten als gescannte PDFs oder Bilder eingebunden – für Screenreader-Nutzer komplett unlesbar.

So machst du es richtig:

• Speisekarte als HTML-Seite statt als PDF-Bild anbieten. Jedes Gericht als eigenes Element mit Beschreibung und Preis.
• Verwende semantische Überschriften (<h2>, <h3>) für Kategorien wie „Vorspeisen“, „Hauptgerichte“, „Desserts“.
• Wenn du ein PDF brauchst: Erstelle ein barrierefreies PDF mit Tags und Alternativtexten.
• Allergen-Kennzeichnung direkt im Text, nicht als Tooltip oder Fußnote. Eine barrierefreie Tabelle mit Allergen-Matrix ist ideal.

Allergen-Informationen barrierefrei darstellen

Die Lebensmittelinformationsverordnung (LMIV) verpflichtet Gastronomen ohnehin zur Allergen-Kennzeichnung. Digital muss diese Information zusätzlich barrierefrei sein.

Vermeiden: Allergen-Icons als reine Bilder ohne Alt-Text, Tooltips die nur per Maus-Hover erscheinen, Allergen-Infos in einem separaten PDF-Download.

Besser: Allergene direkt beim jeweiligen Gericht im Fließtext nennen. Oder eine übersichtliche Allergen-Tabelle mit korrekten <th>-Headern und scope-Attributen. Screenreader können so die Zuordnung Gericht → Allergen sauber vorlesen.

Reservierungssysteme barrierefrei einbinden

Online-Reservierungen über Plattformen wie OpenTable, Quandoo oder TheFork werden häufig als Widget in die eigene Webseite eingebettet. Das Problem: Du bist mitverantwortlich für die Barrierefreiheit auf deiner Seite – auch bei Drittanbieter-Widgets.

Prüfe folgende Punkte:

• Ist das Reservierungs-Widget komplett per Tastatur bedienbar?
• Haben alle Formularfelder (Datum, Uhrzeit, Personenzahl, Name) sichtbare Labels?
• Werden Fehlermeldungen klar kommuniziert und sind sie für Screenreader lesbar (z. B. via aria-live)?
• Funktioniert der Datepicker ohne Maus? Viele Kalender-Widgets sind nicht tastaturzugänglich.

Tipp: Teste das Widget einmal komplett nur mit der Tastatur. Wenn du nicht ohne Maus reservieren kannst, können es deine Gäste mit Einschränkungen auch nicht. Mehr dazu in unserem Artikel über barrierefreie Buchungs- und Reservierungssysteme.

Lieferdienste und Bestell-Plattformen

Wenn du über Lieferando, Wolt oder eigene Apps bestellbar bist, liegt die Barrierefreiheits-Verantwortung bei der Plattform. Aber: Deine eigene Webseite mit eigenem Bestellsystem muss selbst BFSG-konform sein.

Besonders kritisch bei eigenen Bestell-Lösungen:

• Warenkorb-Funktion muss per Tastatur bedienbar sein (WCAG SC 2.1.1)
• Mengenauswahl und Extras (z. B. „ohne Zwiebeln“) brauchen korrekte Labels
• Der gesamte Checkout-Prozess muss ohne Maus funktionieren
• Bezahlseiten müssen Screenreader-kompatibel sein

Prüfe auch eingebettete Widgets von Drittanbietern – ein nicht-barrierefreies Bestell-Widget macht deine gesamte Seite angreifbar.

Schritt für Schritt: Restaurant-Webseite BFSG-konform machen

So gehst du systematisch vor:

1. Ist-Zustand prüfen: Nutze den kostenlosen BFSG-Scanner, um einen ersten Überblick über Verstöße zu bekommen.
2. Speisekarte umstellen: PDF-Bilder durch HTML-Speisekarte ersetzen. Allergene direkt im Text kennzeichnen.
3. Reservierungs-Widget prüfen: Tastatur-Test, Label-Check, Screenreader-Test.
4. Kontraste korrigieren: Besonders bei dunklen Restaurant-Themes fallen Buttons und Links gerne unter das 4,5:1-Minimum (WCAG SC 1.4.3).
5. Formulare reparieren: Jedes Eingabefeld braucht ein sichtbares <label>-Element.
6. Bilder mit Alt-Texten versehen: Gerichte-Fotos brauchen beschreibende Alternativtexte (WCAG SC 1.1.1).
7. Tastatur-Test: Gesamte Seite einmal komplett per Tab durchgehen. Jeder Button, jeder Link, jedes Formularfeld muss erreichbar sein.
8. Erneut scannen: Nach den Korrekturen nochmals prüfen und dokumentieren.

Quick Wins für Gastronomen

Diese Maßnahmen sind mit minimalem Aufwand umsetzbar und haben große Wirkung:

• Speisekarte als HTML statt als PDF-Bild anbieten
• Allergen-Informationen direkt im Text statt in Hover-Tooltips
• Reservierungsformular mit korrekten <label>-Elementen versehen
• Kontraste prüfen – besonders bei dunklen Restaurant-Themes
• Den Bestellprozess einmal komplett nur mit der Tastatur durchgehen
• Alt-Texte für alle Gerichte-Fotos hinzufügen
• lang="de" im <html>-Tag setzen, bei mehrsprachigen Karten lang-Attribute für fremdsprachige Abschnitte

Häufig gestellte Fragen

Barrierefreie Anfahrtsbeschreibung und Standortkarten

Eine eingebettete Google-Maps-Karte ist für viele Screenreader-Nutzer wertlos, weil sie als reine Grafik ohne Beschriftung eingebunden wird. Wer den Weg zum Restaurant nur über die Karte kommuniziert, schließt Gäste aus, die auf Textbeschreibungen angewiesen sind.

Neben der Karte sollte deshalb immer eine textliche Wegbeschreibung stehen: Adresse, nächstgelegene Haltestelle, Gehzeit ab dem Bahnhof, Hinweise auf Baustellen oder unebenes Pflaster. Für Gäste mit Sehbehinderung oder Rollstuhlnutzer sind diese Angaben oft wichtiger als die Karte selbst.

• Iframe der Karte mit einem title-Attribut versehen, das den Inhalt beschreibt, zum Beispiel „Standort Restaurant Musterstraße 12“.
• Einen Link zur Route in der jeweiligen Karten-App zusätzlich als Text anbieten, nicht nur als Icon.
• Angaben zu Parkplätzen, Behindertenparkplätzen und stufenlosem Zugang direkt im Fließtext nennen, nicht nur als Symbol.
• Bei mehreren Standorten jede Filiale mit eigener, vollständiger Adresse auflisten statt nur „siehe Karte“.

Ein häufiger Grenzfall: Restaurants in Innenhöfen oder Passagen, deren Eingang von der Straße aus nicht sichtbar ist. Hier hilft eine kurze zusätzliche Beschreibung wie „Eingang über den Hinterhof, Klingel rechts neben der blauen Tür“ – eine Information, die eine Karte allein nicht liefern kann.

Öffnungszeiten, Sonderangebote und tagesaktuelle Hinweise barrierefrei pflegen

Öffnungszeiten werden auf Restaurant-Webseiten oft als Bild eingebunden, weil sich damit schnell ein gestaltetes Wochenraster erzeugen lässt. Für Screenreader-Nutzer ist ein solches Bild aber nicht vorlesbar, und bei Änderungen – etwa an Feiertagen – muss zusätzlich zur Bild-Datei auch der unsichtbare Text gepflegt werden, was in der Praxis häufig vergessen wird.

Besser ist eine strukturierte Liste oder Tabelle mit Wochentag und Uhrzeit als echtem Text. Abweichende Zeiten an Feiertagen oder bei Betriebsurlaub lassen sich dann direkt daneben ergänzen, ohne dass eine neue Grafik erstellt werden muss.

Auch tagesaktuelle Hinweise wie eine Tageskarte, kurzfristig ausverkaufte Gerichte oder ein spontan verkürzter Öffnungstag sollten nicht ausschließlich über Instagram-Storys kommuniziert werden. Diese Inhalte sind für Screenreader nicht zugänglich und verschwinden zudem nach 24 Stunden. Ein kurzer Hinweistext auf der Startseite, der bei Bedarf aktualisiert wird, erreicht auch Gäste ohne Instagram-Zugang oder ohne Bildwahrnehmung.

Ein sinnvoller Zwischenschritt für kleinere Betriebe ohne eigenes Redaktionssystem: ein einzelner Textbaustein auf der Startseite, der bei kurzfristigen Änderungen manuell angepasst wird, statt eine neue Grafik zu gestalten. Das kostet wenige Minuten und bleibt für alle Gäste lesbar.

Kontaktformular und telefonische Alternative richtig anbieten

Nicht jeder Gast kann oder möchte ein Online-Formular ausfüllen. Wer ausschließlich digitale Kontaktwege anbietet, schließt Menschen aus, für die eine Sprachein- oder -ausgabe die zugänglichere Option ist. Eine barrierefreie Webseite bietet deshalb neben dem Formular immer auch eine deutlich sichtbare Telefonnummer und eine E-Mail-Adresse als Klartext an.

Beim Formular selbst zählen die Grundlagen: jedes Feld braucht ein sichtbares, korrekt verknüpftes Label, Pflichtfelder werden zusätzlich zur farblichen Markierung auch im Text als „Pflichtfeld“ ausgewiesen, und Fehlermeldungen erscheinen als Text direkt am betroffenen Feld.

• Telefonnummer als anklickbaren tel:-Link hinterlegen, damit Screenreader- und Mobilnutzer sie direkt antippen können.
• Bei Formularen mit Datumsauswahl für Reservierungsanfragen zusätzlich ein Textfeld für die manuelle Eingabe erlauben, falls der Kalender-Picker nicht per Tastatur bedienbar ist.
• Captcha-Abfragen möglichst vermeiden oder durch eine barrierefreie Alternative wie eine einfache Rechenaufgabe mit Textausgabe ersetzen.
• Nach dem Absenden eine klare Erfolgsmeldung als Text anzeigen, nicht nur als Pop-up-Animation ohne Ankündigung für Screenreader.

Bei kleinen Betrieben lohnt sich der einfache Test durch eine externe Person: Formular einmal ausschließlich mit der Tastatur ausfüllen und absenden. Bleibt an irgendeiner Stelle der Fokus hängen oder ist ein Button nicht erreichbar, liegt ein Mangel vor, der sich meist mit wenig Aufwand beheben lässt.

Physische Barrierefreiheit vor Ort digital ankündigen

Ob ein Restaurant stufenlos erreichbar ist, ob es eine rollstuhlgerechte Toilette gibt oder ob Servicekräfte bei Bedarf unterstützen können, erfährt ein Gast oft erst vor Ort, oder gar nicht, weil er sich vorher gegen einen Besuch entscheidet. Diese Informationen gehören auf die Webseite, am besten als kurzer Textabschnitt in der Nähe der Anfahrtsbeschreibung, nicht nur als Symbol ohne Erklärung.

Ein Rollstuhl-Icon allein, ohne begleitenden Text, ist für Screenreader-Nutzer wertlos und für sehende Gäste oft mehrdeutig, denn gilt es für den Eingang, die Toilette oder den gesamten Gastraum? Eine knappe Formulierung wie "Ebenerdiger Zugang über den Haupteingang, WC im Erdgeschoss nicht rollstuhlgerecht" liefert genau die Information, die eine Entscheidung vor dem Besuch ermöglicht, und vermeidet Enttäuschung an der Tür.

QR-Code-Speisekarten am Tisch barrierefrei ergänzen

QR-Codes auf dem Tisch, die zur digitalen Speisekarte führen, sind inzwischen in vielen Restaurants Standard, doch für Gäste ohne Smartphone, mit Sehbehinderung oder ohne mobiles Datenvolumen sind sie eine zusätzliche Hürde, wenn keine Alternative existiert. Ein kleiner, kontrastarmer Code ohne begleitenden Text ist zudem selbst für sehende Gäste manchmal schwer zu scannen.

Sinnvoll ist deshalb, den QR-Code immer mit einer gedruckten Speisekarte oder zumindest der Möglichkeit zu kombinieren, das Personal um Vorlesen oder eine gedruckte Fassung zu bitten. Die verlinkte digitale Speisekarte selbst sollte denselben Regeln folgen wie der Rest der Webseite: echter Text statt Bild, ausreichender Kontrast und eine Schriftgröße, die sich ohne Verzerrung vergrößern lässt.

Google-Bewertungen und Kundenstimmen barrierefrei einbinden

Viele Restaurant-Webseiten binden Google-Bewertungen oder Kundenstimmen als Widget ein, oft in Form eines automatisch durchlaufenden Karussells mit Sternebildern. Für Screenreader-Nutzer sind reine Stern-Grafiken ohne Textalternative wertlos: Eine Bewertung mit vier von fünf Sternen muss auch als Text vorhanden sein, nicht nur als eingefärbte Icon-Reihe.

Automatisch rotierende Karussells bringen ein zweites Problem mit sich: Bewegt sich der Inhalt ohne Pause-Möglichkeit weiter, kann ein Screenreader-Nutzer den gerade vorgelesenen Text verlieren, bevor er ihn zu Ende gehört hat. Ein sichtbarer Pause-Button, der auch per Tastatur erreichbar ist, behebt das und kommt zusätzlich Nutzern mit kognitiven Einschränkungen zugute, die mehr Zeit zum Lesen brauchen.

Bei eingebetteten Bewertungsportalen – etwa einem eingebetteten Fenster von Google oder TripAdvisor – hast du als Betreiber wenig Einfluss auf den internen Code des Widgets. Umso wichtiger ist es, vor der Einbindung zu prüfen, ob sich das Widget wenigstens per Tastatur bedienen lässt und ob es den Fokus sinnvoll setzt. Bei mehreren Anbietern zeigen sich hier deutliche Qualitätsunterschiede, weshalb sich ein kurzer Test vor der endgültigen Auswahl lohnt.

Wo ein Widget nachweislich nicht barrierefrei nachgerüstet werden kann, ist eine einfache, textbasierte Auflistung ausgewählter Kundenstimmen auf der eigenen Seite oft die robustere Lösung: weniger visuell aufwendig, dafür für jeden lesbar und ohne Abhängigkeit von fremdem Code.