Redaktionelle Pflege im Hinblick auf die Barrierearmut destination.pages (Widgets) und destination.welcome (Progressive Web App)
Am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft.
Es verpflichtet dazu, auch touristische Progressive Web Apps (PWAs / destination.welcome) möglichst barrierearm zu gestalten. Einige dieser Anforderungen lassen sich bereits durch gezielte redaktionelle Anpassungen im Pages Builder umsetzen.
1.) Bilder: Alternativer Text
Damit die Bilder, die in der Progressive Web App zum Einsatz kommen, barrierearm ausgespielt werden können, muss der Alternativtext (Alt-Tag) direkt in destination.data gepflegt werden.
Dies erfolgt redaktionell im entsprechenden Feld beim jeweiligen Medium:
2.) Titel sinnvoll wählen
Der Seitentitel ist das Erste, was Screenreader vorlesen, wenn Nutzer:innen eine Seite öffnen. Ist er nicht eindeutig, führt das schnell zu Verwirrung – vor allem, wenn mehrere Tabs geöffnet sind.
Ein klarer Titel hilft auch Menschen mit kognitiven Einschränkungen, sich besser zurechtzufinden.
Demnach sollte auch bei der PWA - analog zur klassischen Website - der Seitentitel sinnvoll gewählt sein:
Folgende Aspekte gilt es dabei zu beachten:
- Beschreibend und eindeutig
→ Der Titel sollte klar machen, worum es auf der Seite geht – ohne Rätselraten. - Einzigartig pro Seite
→ Jeder Seitentitel sollte sich von anderen unterscheiden, damit Nutzer:innen (und Screenreader) schnell erkennen, wo sie sich befinden. - Kurz und prägnant
→ Ideal sind maximal 60 Zeichen, damit der Titel vollständig angezeigt und gut erfasst werden kann. Bitte bedenkt in diesem Kontext auch dass die Bezeichnung für die Darstellung unter dem Icon auf dem Home-Screen des Smartphone-Users angezeigt wird (Anzeige der ersten 8-12 Zeichen je nach Gerät und Betriebssystem). - Wichtige Begriffe zuerst
→ Relevante Inhalte (z. B. „Veranstaltungen“, „Unterkünfte“, „Kontakt“) gehören an den Anfang, denn Screenreader lesen von vorne. - Vermeidung von Füllwörtern
→ Wörter wie „Willkommen bei“ oder „Hier finden Sie“ können meist entfallen – sie sagen wenig über den Seiteninhalt aus. - Konsistente Struktur für alle Titel
→ Z. B. „[Inhalt] – [Name der Destination]“ oder „[Thema] | [Organisation]“ – das hilft bei Orientierung & Wiedererkennung.
3.) Farbauswahl: Kontrastwerte beachten
Im Pages Builder ist es möglich, manuell Farben für die Frontend-Ausgabe der Progressive Web App festzulegen:
Bei der Farbwahl sollte besonders auf ausreichende Kontraste geachtet werden, damit Inhalte auch für Menschen mit Sehbeeinträchtigungen gut lesbar sind.
Folgende Mindest-Kontrastverhältnisse sind gemäß WCAG 2.2 – Level AA zu beachten:
- 4.5:1 für normalen Fließtext
- 3:1 für größere Texte (z. B. fette Überschriften)
Für eine noch höhere Barrierefreiheit nach WCAG Level AAA gelten diese Werte:
- 7:1 für normalen Text
- 4.5:1 für große Texte
Mit folgendem Tool kann man die Kontrastwerte überprüfen: Contrast Checker
Ein Glossar zur Farbverwendung im Pages Builder – mit Übersicht, welche Farbe an welcher Stelle im PWA-Frontend ausgegeben wird – folgt in Kürze.
Dieselben Anforderungen gilt es bei der Pflege der Kachelfarben zu beachten, die ja individuell (unabhängig von den Farb-Einstellungen im Pages-Bilder (s. o.)) pro Kachel(block) gepflegt werden.
4.) Aufbau Menü
Beim Aufbau des Menüs in einer Progressive Web App (PWA) gelten die gleichen Grundregeln wie für klassische Websites – insbesondere im Hinblick auf Barrierefreiheit. Eine gut strukturierte, leicht verständliche Navigation ist entscheidend dafür, dass alle Nutzer:innen – mit oder ohne Einschränkungen – sich auf der Website zurechtfinden.
Das solltest du beim Menüaufbau beachten:
- Klare, verständliche Bezeichnungen
Menüeinträge sollten eindeutig benannt sein. Statt „Service“ besser z. B. „Kontakt & Hilfe“, wenn das genauer beschreibt, was Nutzer:innen erwartet. - Kurze und prägnante Titel
Lange, verschachtelte Begriffe erschweren die Orientierung – sowohl visuell als auch für Screenreader. - Flache Hierarchie
Die Menüstruktur sollte möglichst flach gehalten werden, also wenig Unterpunkte und keine übermäßige Verschachtelung. Das erleichtert die Bedienung, gerade bei Tastaturnutzung oder per Screenreader. - Logische Reihenfolge
Wichtiges zuerst – ordne Menüeinträge so, wie es Nutzer:innen intuitiv erwarten würden. - Menüpunkte sollten "sprechend" sein
Vermeide generische Begriffe wie „Info“, „Mehr“ oder „Sonstiges“. Je konkreter der Begriff, desto besser die Orientierung. - Konsistenz auf allen Unterseiten
Das Menü sollte auf allen Seiten gleich strukturiert und benannt sein – das hilft beim Wiedererkennen und der barrierefreien Navigation.
5.) Wahl von Überschriften
Auch bei der Wahl der richtigen Überschrift gelten die gleichen Grundregeln wie bei der klassischen Website:
Eine sinnvolle und konsistente Überschriftenstruktur ist nicht nur wichtig für die Lesbarkeit, sondern auch ein zentraler Bestandteil der digitalen Barrierefreiheit. Überschriften helfen allen Nutzer:innen, sich auf einer Seite zu orientieren – insbesondere Menschen, die Screenreader verwenden oder sich mit Tastatur durch Inhalte bewegen.
- Überschriften sollen sprechend sein
Vermeide allgemeine Formulierungen wie „Mehr Informationen“ oder „Sonstiges“. Eine gute Überschrift macht deutlich, was im folgenden Abschnitt steht. - Klare, kurze Formulierungen
Überschriften sollten prägnant und verständlich sein – zu lange oder verschachtelte Titel wirken verwirrend und erschweren die Orientierung.
6.) Platzierung von HTML-Elementen
Individuelle HTML- oder JavaScript-Anpassungen in PWAs – bitte mit Vorsicht!
Die Integration eigener HTML-Snippets oder JavaScript-Widgets in einer Progressive Web App (PWA) kann zu erheblichen Einschränkungen in der Darstellung und Funktionalität führen.
Da wir als Agentur in diesen Fällen keinen direkten Einfluss auf die Einbindung, das Verhalten oder die Kompatibilität dieser individuellen Erweiterungen haben, besteht die Gefahr, dass:
- Inhalte nicht korrekt angezeigt oder unlesbar werden,
- barrierefreie Strukturen gestört werden,
- wichtige Funktionen der PWA nicht mehr wie vorgesehen funktionieren,
- im schlimmsten Fall die gesamte Anwendung beeinträchtigt oder blockiert wird.
Daher gilt: Solche Anpassungen sollten nur nach sorgfältiger technischer Prüfung und mit einem klaren Nutzungskonzept vorgenommen werden. Bei Fragen oder Unsicherheiten stehen wir gerne beratend zur Seite.
7.) Barrierefreiheitserklärung
Auch für die PWA ist eine Barrierefreiheitserklärung erforderlich, in der transparent dargestellt wird, welche Bereiche noch nicht barrierearm gestaltet sind.
Künftig kann die Barrierefreiheitserklärung – analog zu Impressum und Datenschutz – als Link im Pages Builder eingebunden werden.
Ein entsprechendes Eingabefeld wird dafür in Kürze zur Verfügung stehen.
Related Articles
Redaktionelle Pflege im Hinblick auf die Barrierearmut einer Website
Am 28.06.2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft, welches erfordert, dass auch touristische Websites möglichst barrierearm gestaltet sein müssen. Diese barrierearme Gestaltung einer Website bezieht sich zum einen auf das ...destination.welcome: Einrichtung PWA
Im Folgenden wird aufgeführt, wie Du destination.welcome einrichten bzw. bestehende Projekte bearbeiten kannst. destination.welcome kannst Du als PWA (Progrssive Web App) für Deine Gäste, als Landing-Page im WLAN oder als Oberfläche für Terminals, ...Einrichtung und Konfiguration der Welcome-App / destination.kiosk / destination.box
Anleitung zur Einrichtung und Konfiguration der Welcome-App Wichtiger Hinweis vorab: Bitte nach dem Auspacken des Terminals ein paar Stunden bei Zimmertemperatur akklimatisieren lassen, bevor Du den Terminal einschaltest. Seite "Willkommen": Wenn Du ...Tipps und Tricks für die redaktionelle Pflege im TYPO3
Hinweise zur Vorbereitung von Bildern, Videos, Texten & Co. Die Contentpflege einer Destinations-Website ist eine große, zeitintensive Aufgabe, die einer guten Vorbereitung und Planung bedarf. Dieser Artikel greift hilfreiche Tipps und Tricks für die ...destination.pages: Integration in eigene Webseite
1. Einführung destination.pages Die destination.pages sind Ausgabe-Module für Ihre Webseite zur Darstellung strukturierter touristischer Angebote wie Artikel, Gastgeber, Pauschalen, Veranstaltungen, Gastronomie, POI/Ausflugstipps sowie Touren & Wege. ...