Restaurant-Websites: barrierefreie Navigation, erfolgreiche Bestellung!

Auf einer Restaurant-Website zu navigieren, besonders wenn man schnellen Hunger stillen will, sollte eine flüssige, angenehme und mühelose Erfahrung sein. Leider ist das nicht immer der Fall, und manche Praktiken können sofortige Frustration auslösen. Das Hauptziel besteht darin, Besuchern zu ermöglichen, die gewünschte Information oder das gewünschte Produkt schnell und einfach zu finden — eine wesentliche Unterscheidung, die sich aus der Beobachtung von Interaktionen ergibt.

1. Die Punkte, die nicht funktionieren: Die Frustration des Kunden

Diese fehlerhaften Elemente sind wahre Quellen von Frustration für den Kunden, die seine Fähigkeit, mit dem angebotenen Service zu interagieren, direkt beeinträchtigen.

A. Komplexe Suche

Eines der am häufigsten auf Restaurant-Websites auftretenden Probleme ist die Schwierigkeit, schnell auf den Hauptinhalt zugreifen, angefangen bei der Speisekarte. Was eine einfache Handlung sein sollte — wie die Speisekarte einzusehen oder eine Bestellung aufzugeben — verwandelt sich manchmal in einen wahren Hindernisparcours, besonders für Nutzer, die mit den Gepflogenheiten des Webs wenig vertraut sind oder eine Behinderung haben.

Diese Komplexität resultiert in der Regel aus einem schlecht strukturiertes oder wenig aussagekräftiges Navigationsmenü. Die Bezeichnungen sind manchmal zu vage ("Unsere Produkte", "Entdecken", "Erkunden") oder über mehrere Untermenüs verteilt, sodass der Nutzer raten, wahllos klicken oder aufgeben muss. Hinzu kommt die Verwendung kaum zugänglicher interaktiver Elemente, wie Dropdown-Menüs, die nicht per Tastatur bedienbar sind, oder dynamischer Elemente, die von Bildschirmlesern nicht erkannt werden.

Dieser Mangel an Klarheit ist umso problematischer, da er einen kritischen Moment der Nutzerreise betrifft: die Suche nach der zentralen Information. Wenn die Speisekarte oder der Bestellbutton nicht sofort sichtbar oder verständlich sind, erzeugt das nahezu sofort Frustration. Und diese Frustration kann direkte Folgen haben der Nutzer die Seite verlässt und zu einem zugänglicheren und übersichtlicheren Mitbewerber wechselt.

Kurz gesagt, ein ungeschickt gestaltetes Navigationsmenü ist nicht nur ein Gebrauchshindernis, es wird zu einem geschäftlichen Hemmnis.

B. Karte nicht direkt auf der Website verfügbar

Zu den unverständlichsten Fehlern gehört das völlige Fehlen der Speisekarte auf der Website des RestaurantsIn diesem Fall steht der Nutzer, obwohl er zum Bestellen motiviert ist, vor einer Sackgasse: keine Informationen zu den angebotenen Gerichten, kein direkter Zugang zum Angebot, nichts als ein vager Verweis auf einen Beitrag in den sozialen Medien.

Diese Praxis ist in der digitalen Ära kontraproduktiv. Die Website sollte die wichtigste und zuverlässigste Informationsquelle sein, besonders für etwas so Grundlegendes wie die Speisekarte. Sie woanders einsehen zu müssen — in einer flüchtigen Instagram-Story, einem schlecht lesbaren Facebook-Beitrag oder in einem nicht barrierefreien PDF — bedeutet, vom Nutzer zu verlangen, dass er... einen zusätzlichen und nicht gerechtfertigten Aufwand.

Für Nutzer mit Behinderung kann das schnell zu einer unüberwindbaren Barriere werden Inhalte in sozialen Netzwerken sind nicht immer für Screenreader zugänglich, Menübilder sind nicht mit Alternativtext versehen, und Drittplattformen garantieren weder Ergonomie noch Kompatibilität mit Hilfstechnologien.

Doch über die Barrierefreiheit hinaus erzeugt dieses Fehlen von Informationen auf der Website allgemeine Verärgerung. Jeder Kunde, unabhängig von seinem Profil, erwartet zu Recht, die wesentlichen Informationen dort zu finden, wo er sie suchen würde: auf der offiziellen Website. Die Speisekarte nicht dort einzubinden bricht mit dieser Logik und riskiert, den Kunden schon in den ersten Sekunden der Navigation zu verlieren.

C. Folgen der Navigationsschwierigkeiten

Diese „schlechten Praktiken“ bei der Navigation haben direkte und negative Auswirkungen auf den Nutzer und damit auf das Geschäft des Restaurants:

• Sie erzeugen Nutzerfrustration.

• Sie verlangen vom Kunden zusätzlichen Aufwand um zu bekommen, was er sucht.

• Angesichts dieser Hindernisse bestellt nicht und wendet sich an einen Mitbewerber, was zu einem direkten Umsatzausfall führt.

Darüber hinaus stellt diese Navigationsschwierigkeit einen Reibungspunkt dar, der nicht nur die Zufriedenheit des Kunden beeinträchtigt, sondern auch die Glaubwürdigkeit der Marke und die positiven Signale an Suchmaschinen. Mit anderen Worten: eine schlechte Nutzererfahrung kann dem Ruf des Restaurants und seiner Online-Sichtbarkeit schaden.

2. Die Punkte, die funktionieren: Einfachheit und Zugänglichkeit für alle

Glücklicherweise gibt es gute Beispiele, die die Bedeutung einer klaren und eindeutigen Navigation verstehen. Als Beispiel nehme ich die Website einer Pizzeria, bei der ich normalerweise bestelle.

A. Klare und eindeutige Navigation

Diese Pizzeria hat einen sehr effektiven Ansatz umgesetzt: Sie zeigt direkt in ihrem Hauptmenü zwei wichtige Schaltflächen. Die eine trägt die Bezeichnung „Online-Bestellung“ und die andere „Telefonisch bestellen“. 

Welchen Nutzen hat dieser auf den ersten Blick einfache Ansatz?

1. Sofortige Zeitersparnis : Nutzer finden sofort, wonach sie suchen, ohne raten zu müssen, wohin sie klicken sollen oder mehrere Seiten durchblättern zu müssen.

2. Erhöhte Barrierefreiheit : Ein oft unterschätzter Punkt ist, dass diese Buttons für sehbehinderte oder blinde Personen, die Screenreader und Sprachsuche verwenden, ein großer Vorteil sind. Eine klare Beschriftung, die genau angibt, wohin der Button führt, macht die Sprachsuche deutlich einfacher. Ein Button wie „hier klicken“ ist für diese Technologien nicht hilfreich, im Gegensatz zu „unsere Speisekarte ansehen“. Das ist ein großer Schritt hin zur digitalen Inklusion.

B. Fotos und Zutaten eines Gerichts

Über die reine Navigation hinaus erstrecken sich Nutzererlebnis und Barrierefreiheit auf die Art und Weise, wie Inhalte präsentiert werden. Auf der von mir analysierten Website habe ich Aspekte beobachtet, die hervorgehoben werden sollten:

1. Beschreibung der Zutaten neben den Fotos : Ein sehr positiver Punkt ist die Anwesenheit von Zutatenbeschreibungen neben jedem Gerichtsfoto. Das ermöglicht dem Nutzer, die Zusammensetzung genau zu kennen, was besonders nützlich für Personen mit Ernährungsbeschränkungen oder Allergien ist oder für alle, die eine informierte Entscheidung treffen möchten. Das ist ein hervorragendes Beispiel für Transparenz und Kundenorientierung.

2. Umgang mit Bildern : Die Seite mit den Pizzen folgt einer klaren Logik. Jedes Bild wird von einer vollständigen textlichen Beschreibung der Zutaten begleitet, sodass die Bilder für das Verständnis nicht zwingend erforderlich sind. Sie haben eine rein illustrative Funktion und können daher als dekorativ angesehen werden. Damit eine Seite jedoch vollständig zugänglich ist, sollten diese Bilder den assistiven Technologien explizit als dekorativ signalisiert werden, indem ihnen ein leeres alt-Attribut zugewiesen wird (alt=""). Wenn Sie hingegen der Meinung sind, dass Ihr Bild nicht nur dekorativ ist, können Sie das alt-Attribut mit „[Name der Pizza] mit [den Zutaten]“ ausfüllen.

Bei dieser Pizzeria-Website ist jedoch kein Alt-Attribut vorhanden, was eine störende Vorleseausgabe durch Screenreader verursachen (Dateiname oder technischer Pfad). Es reicht daher nicht, gar nichts anzugeben: das Fehlen eines Attributs wird anders interpretiert als ein leeres Attribut. Dieser Punkt sollte korrigiert werden, um die Barrierefreiheitsstandards vollständig einzuhalten.

3. Nun zu den Empfehlungen 

Nachdem wir nun analysiert haben, was in puncto Barrierefreiheit bei Restaurant-Websites funktioniert und was nicht, ist es Zeit, diese Beobachtungen in konkrete Maßnahmen umzusetzen.

A. Allgemeine Empfehlungen für eine optimale Navigation

Um ein reibungsloses und zugängliches Nutzererlebnis zu gewährleisten, sind hier die wesentlichen Maßnahmen, die auf der Website Ihres Restaurants umgesetzt werden sollten:

• Machen Sie die Karte Ihres Restaurants leicht zugänglich : Der Link zu Ihrer Speisekarte sollte von der Startseite aus sichtbar und klar benannt sein oder im Hauptnavigationsmenü stehen.

• Verwenden Sie aussagekräftige Schaltflächenbeschriftungen : Verwenden Sie statt allgemeiner Begriffe klare Ausdrücke, die genau die Aktion oder das Ziel des Klicks angeben. Zum Beispiel sind „Speisekarte anzeigen“, „Online bestellen“, „Tisch reservieren“, „Kontakt“ effektive Beschriftungen.

• Erleichtern Sie die Hauptaktionen : Wenn die telefonische Bestellung eine beliebte Option ist, ist eine Schaltfläche „Per Telefon bestellen“ mit der deutlich angezeigten Nummer sehr hilfreich.

• Denken Sie an Sprachzugänglichkeit : Schaltflächen mit präzisen und beschreibenden Beschriftungen sind nicht nur für alle Nutzer hilfreich, sondern unerlässlich für Personen, die Sprachassistenten oder Bildschirmleser verwenden. Das macht Ihre Seite für ein viel breiteres Publikum nutzbar.

• Vermeiden Sie verstreute Informationen : Alle wichtigen Informationen (Karte, Öffnungszeiten, Kontakt, Adresse) sollten zentralisiert und leicht auf Ihrer Website zu finden sein, ohne dass der Nutzer gezwungen ist, auf andere Plattformen wie soziale Netzwerke zu wechseln.

B. Konkrete Empfehlungen für Bilder

Bilder spielen eine grundlegende Rolle in der visuellen Kommunikation im Web. Aber für viele Nutzer, insbesondere für diejenigen, die einen Screenreader verwenden oder kognitive bzw. visuelle Beeinträchtigungen haben, können sie zu einem Hindernis werden, wenn sie nicht richtig eingebunden sind. 

Jedes Bild sollte von einem Alternativtext (alt) begleitet sein, der seinen Inhalt oder seine Funktion kurz beschreibt.

• Für eine informatives Bild, muss das alt-Attribut die durch das Bild vermittelte Information übermitteln.

• Für eine rein dekoratives Bild, verwenden Sie ein leeres alt (alt="") und schließen Sie es mit role="presentation" oder aria-hidden="true" aus der Navigation aus.

Bilder dürfen nicht der einzige Informationskanal sein. Wenn eine wichtige Information durch ein Bild vermittelt wird (Diagramm, Piktogramm, Karte usw.):

• Stellen Sie eine textliche Beschreibung in der Nähe

• Verwenden Sie aria-describedby um bei Bedarf eine ausführliche Beschreibung damit zu verknüpfen.

Für komplexe Bilder (Schemata, Infografiken, Diagramme):

• Verwenden Sie eine erklärende Bildunterschrift unter dem Bild.

• Geben Sie einen äquivalenten Text oder eine detaillierte Zusammenfassung an, angrenzend oder per ARIA verlinkt.

Wenn Sie ein Bild als Link oder als interaktiven Button verwenden:

• Das Alt-Attribut des Bildes muss klar die Aktion angeben, die ausgelöst wird, oder das Ziel, zu dem der Link führt, statt das Bild selbst oder seinen Dateinamen einfach zu beschreiben. Zum Beispiel sollte bei einer Download-Schaltfläche das Alt „PDF der Broschüre herunterladen“ lauten.

Zusammenfassung: Was Sie immer überprüfen sollten

Bildtyp	Alt-Attribut erforderlich?	Inhalt des Alt-Attributs
Informatives Bild	Ja	Beschreiben, was das Bild darstellt
Dekoratives Bild	Ja (alt="")	Leer, damit Screenreader sie ignorieren
Schaltfläche / Link	Ja	Aktion oder Ziel angeben
Logo	Ja	Marken- oder Firmenname
Komplexe Grafik	Ja + Beschreibung	Zusammenfassung oder separates Textäquivalent (Beschriftung, verknüpfte Beschreibung)

Die Zugänglichkeit von Bildern wird oft vernachlässigt, ist jedoch ein wesentlicher Bestandteil einer inklusiven Website. Wenn Sie diese bewährten Praktiken anwenden, gewährleisten Sie eine bessere Erfahrung für alle Nutzer und erfüllen gleichzeitig die gesetzlichen Vorgaben zur digitalen Barrierefreiheit.

C. Empfehlungen: barrierefreie Kontaktformulare

Bei Kontaktformularen ist ihre Zugänglichkeit grundlegend, um sicherzustellen, dass alle Nutzer, einschließlich Menschen mit Behinderungen, interagieren und auf wichtige Dienste zugreifen können. Ein gut gestaltetes Kontaktformular ist für alle leicht nutzbar.

Das sind die wichtigsten Punkte für ein barrierefreies Kontaktformular, basierend auf den WCAG-Standards und dem RGAA:

• Klare Feldbeschriftung : Jedes Feld (z. B. Name, E-Mail-Adresse, Nachricht) muss ein sichtbares und eindeutiges Label haben, das seine Funktion beschreibt, und dieses Label muss mittels des <label>-Tags mit dem for-Attribut mit dem Feld verknüpft sein. Es ist wichtig, sich nicht ausschließlich auf Placeholder zu verlassen, da diese für Hilfstechnologien unsichtbar sein oder bei der Eingabe verschwinden können.

• Reibungslose Tastaturnavigation : Ein Benutzer muss das Formular ausschließlich mit der Tastatur (Tab, Umschalt+Tab, Eingabe, Leertaste) bedienen können. Alle interaktiven Elemente müssen ohne Maus erreichbar und aktivierbar sein.

• Ansagen für Screenreader : Für Screenreader-Benutzer sollten zusätzliche Beschreibungen bereitgestellt werden, z. B. durch aria-describedby, um ein Feld mit einer Hilfenachricht zu verknüpfen. Es sollte außerdem angegeben werden, ob ein Feld erforderlich ist, z. B. mittels required und/oder aria-required="true".

• Klare Fehlerbehandlung : Wenn beim Ausfüllen ein Fehler auftritt, muss dieser deutlich in der Nähe des betroffenen Feldes angezeigt werden, unter Verwendung einer Farbe zusammen mit einem erläuternden Text und, wenn möglich, einem Symbol. Fehlermeldungen müssen auch von einem Screenreader gelesen werden können, z. B. via role="alert" oder aria-live="assertive".

• Benutzerfeedback nach Aktion : Sobald das Formular erfolgreich abgeschickt wurde, muss eine visuelle Bestätigung angezeigt und automatisch von einem Screenreader vorgelesen werden, z. B. via role="status" oder aria-live="polite".

• Mobile Zugänglichkeit und Zoom : Formulare müssen responsiv sein, das heißt für Mobilgeräte angepasst, und bis zu 200 % gezoomt werden können, ohne Inhalt zu verlieren oder Überlappungen zu erzeugen.

Wenn Sie diese Empfehlungen auf alle Elemente der Website anwenden, von Menüs bis zu Formularen, schaffen Sie ein wirklich inklusives, konsistentes und effektives Erlebnis für alle Nutzer.

Bonus: Captchas in Formularen

Die CAPTCHA werden häufig verwendet, um Formulare gegen Bots zu sichern, verursachen aber zahlreiche Barrierefreiheitsprobleme. Das Der RGAA verlangt, dass diese Maßnahmen von allen nutzbar sind, einschließlich Personen, die einen Screenreader verwenden oder die Maus nicht benutzen können. Hier eine Übersichtstabelle zu den Problemen und empfohlenen barrierefreien Lösungen.

Fazit: Eine Zugänglichkeit, die allen zugutekommt

Digitale Barrierefreiheit ist kein Luxus für wenige Nutzer, sondern ein wesentlicher Hebel, um das Erlebnis aller Kunden zu verbessern, einschließlich Menschen mit Behinderungen. Eine barrierefreie Restaurant-Website ist eine klarere, flüssigere und effektivere WebsiteDas Beispiel der analysierten Pizzeria zeigt, dass sich eine intuitive Navigation und eine ansprechende visuelle Darstellung realisieren lassen.

Wenn Restaurants diese Best Practices übernehmen, erfüllen sie nicht nur Normen: sie erweitern ihre Kundschaft, verbessern ihr organisches Ranking und zeigen vor allem echten Respekt gegenüber all ihren Nutzern.

Der Artikel „Restaurant-Websites: barrierefreie Navigation, erfolgreiche Bestellung!wurde auf der Website veröffentlicht Abondance.