Barrierefreie Websites: 4 Beispiele aus der Praxis

Barrierefreie Websites sehen nicht alle gleich aus

Eine barrierefreie Website ist kein bestimmter Stil. Sie kann laut oder leise, verspielt oder sachlich, umfangreich oder auf eine einzige Kampagne zugeschnitten sein. Entscheidend ist, ob Menschen mit ihr ans Ziel kommen.

Die folgenden vier Beispiele zeigen konkrete Lösungen für ganz unterschiedliche Aufgaben:

• Formulare ausfüllen und eine Initiative unterstützen
• ein passendes Sportangebot in der Nähe finden
• eine interaktive Agenda filtern und bedienen
• in einer belastenden Situation schnell Hilfe erhalten

Einige dieser Lösungen sind sofort sichtbar, andere zeigen sich erst bei der Bedienung mit Tastatur oder Screenreader.

Beispiel 1: Formulare, die Beteiligung ermöglichen

Service-Citoyen-Initiative

Eine Kampagnenwebsite will Menschen nicht nur informieren. Sie sollen sich anmelden, Material bestellen, spenden oder einer Initiative beitreten können. Genau an diesen Stellen entscheiden Formulare darüber, wer wirklich mitmachen kann.

Auf der Website von Service Citoyen begegnen Besucher:innen drei unterschiedlich umfangreichen Formularen: der Newsletter-Anmeldung im Footer, dem Beitritt zum Unterstützungskomitee und der Bestellung von Kampagnenmaterial. Die Felder sind verständlich beschriftet, Pflichtangaben werden als solche benannt und zusammengehörende Auswahlmöglichkeiten bilden erkennbare Gruppen. Beim längeren Beitrittsformular helfen zusätzliche Hinweise – etwa beim verlangten Format des Geburtsjahrs.

Auch der Weg zur Spende wurde über eine externe Lösung von RaiseNow eingebunden. Damit verschwindet die Verantwortung für Zugänglichkeit aber nicht: Auswahl des Betrags, persönliche Angaben, Zahlungsmittel und Bestätigung gehören zu einem einzigen Nutzungsvorgang – auch wenn ein Teil davon von einem Drittanbieter stammt.

Das kannst du davon übernehmen:

• Beschrifte jedes Feld eindeutig und kennzeichne Pflichtangaben verständlich.
• Erkläre erwartete Eingaben dort, wo sie benötigt werden.
• Prüfe den vollständigen Ablauf – nicht nur das erste Formularfeld.
• Beziehe eingebettete Dienste in deine Tests ein.

Unsere Rolle bei Service Citoyen lag in Gestaltung, Beratung sowie Testing und Qualitätssicherung; entwickelt wurde die Website von einem anderen Team.

Mehr über unsere Arbeit für die Service-Citoyen-Initiative

Beispiel 2: Sportangebote ohne Umwege finden

Swiss Inclusive Sport

Wer ein inklusives Training oder eine Sportveranstaltung sucht, braucht mehr als eine lange Liste. Das Angebot muss zur gewünschten Sportart, zum Alter, zum Termin und zum erreichbaren Ort passen. Swiss Inclusive Sport verbindet dafür eine Kartenansicht mit mehreren Filtern.

Die Karte ist dabei nicht der einzige Zugang. Sie kann übersprungen werden; danach lassen sich die Angebote über einen Ort und einen Umkreis eingrenzen. Bei Trainings kommen Filter für Alter und Sportart sowie eine Sortierung nach Distanz oder Alphabet hinzu. Veranstaltungen lassen sich unter anderem nach Datum und Sportart filtern. Die Treffer erscheinen zusätzlich als Textliste. Bei den Trainingsangeboten wird eine Aktualisierung der Ergebnisse auch für assistive Technologien gemeldet.

Das kannst du davon übernehmen:

• Biete neben einer visuellen Karte immer einen gleichwertigen Zugang zu den Ergebnissen.
• Gib Filtern eindeutige Namen und fasse zusammengehörende Eingaben zusammen.
• Zeige Treffer in einer gut lesbaren Liste mit den wichtigsten Angaben.
• Informiere auch Screenreader darüber, wenn Filter neue Ergebnisse laden.

So wird aus einer komplexen Suchfunktion ein nachvollziehbarer Weg vom eigenen Bedürfnis zum passenden Angebot.

Trainingsangebote ausprobieren oder Veranstaltungen durchsuchen

Mehr über das Projekt Swiss Inclusive Sport

Beispiel 3: Interaktive Inhalte mit Tastatur bedienen

Community Arts Winterthur

Die Website von Community Arts Winterthur – kurz CAWIN – zeigt, dass eine barrierefreie Gestaltung nicht auf interaktive oder verspielte Elemente verzichten muss. Entscheidend ist, dass ihre Funktion nicht von Mauszeiger, Animation oder visueller Darstellung allein abhängt.

Auf der Startseite lassen sich Flip Cards nicht nur mit der Maus, sondern auch mit der Tastatur bedienen. Ihre zusätzlichen Inhalte bleiben für Screenreader erreichbar. In der Agenda werden kommende Angebote chronologisch dargestellt und können nach Bereichen wie Musik, Tanz oder Theater gefiltert werden. Datum, Uhrzeit und Titel stehen bereits in der Übersicht.

Jeder Eintrag funktioniert als Accordion: Der geschlossene Eintrag fasst das Angebot zusammen, beim Öffnen erscheinen die Details. Für assistive Technologien ist er als Schaltfläche erkennbar und meldet, ob der Inhalt ein- oder ausgeklappt ist.

Das kannst du davon übernehmen:

• Mach Funktionen, die per Maus bedienbar sind, auch mit der Tastatur erreichbar.
• Zeige den Zustand interaktiver Elemente nicht nur visuell.
• Stelle wichtige Angaben schon in der geschlossenen Übersicht bereit.
• Ordne Termine nachvollziehbar und biete bei vielen Angeboten passende Filter an.

Die Agenda von CAWIN ausprobieren

Mehr über die Website von Community Arts Winterthur

Beispiel 4: In einer schwierigen Situation schnell Hilfe finden

fiera Opferberatung

Menschen besuchen die Website einer Opferberatung möglicherweise unter Stress, mit wenig Zeit oder in einer akuten Situation. Eine solche Website darf nicht voraussetzen, dass jemand zuerst die Organisation und ihre Zuständigkeiten versteht.

Die Startseite von fiera bietet deshalb drei direkte Einstiege: für Betroffene, für Bezugspersonen und für Menschen, die sofort Hilfe benötigen. Die Auswahl orientiert sich an der Situation der Besucher:innen statt an der internen Struktur der Beratungsstelle. Klare Bezeichnungen und wiedererkennbare Handlungswege reduzieren die kognitive Belastung.

Hinzu kommen mehrsprachige Informationen. Gerade bei anderen Schriftsystemen können Screenreader und technische Übersetzungswege an Grenzen stossen. Barrierefreiheit bedeutet hier nicht, diese Grenzen zu verschweigen, sondern möglichst nutzbare Alternativen anzubieten und transparent zu bleiben.

Das kannst du davon übernehmen:

• Strukturiere den Einstieg nach den Fragen und Situationen der Besucher:innen.
• Mach dringende Kontakt- und Hilfsmöglichkeiten sofort auffindbar.
• Reduziere unnötige Entscheidungen und vermeide interne Fachbegriffe.
• Betrachte Mehrsprachigkeit als Teil der Zugänglichkeit.

Mehr über den Webauftritt der fiera Opferberatung

Woran du ein gutes Beispiel wirklich erkennst

Schöne Screenshots widerlegen immerhin einen hartnäckigen Mythos: Barrierefreie Websites müssen nicht langweilig aussehen. Für eine echte Einschätzung reicht Anschauen aber nicht. Probier eine Website aus:

• Kannst du alle wichtigen Funktionen nur mit der Tastatur erreichen?
• Bleibt die Orientierung bei 200 Prozent Zoom erhalten?
• Sind Überschriften, Links und Formulare verständlich beschriftet?
• Bleiben Inhalte auch ohne Farben, Bilder oder Ton verständlich?
• Funktioniert die Seite mit einem Screenreader nachvollziehbar?

Automatisierte Accessibility-Tools helfen bei einem ersten Überblick. Für eine belastbare Einschätzung braucht es zusätzlich manuelle Tests und je nach Projekt Tests mit Nutzer:innen.

Fazit: Gute Beispiele zeigen verschiedene Wege

Es gibt nicht die eine Vorlage für eine barrierefreie Website. Ein Formular stellt andere Anforderungen als eine Umkreissuche. Eine interaktive Kulturagenda braucht andere Lösungen als eine Website, auf der Menschen möglichst schnell Hilfe finden müssen.

Genau das macht gute Beispiele interessant: Sie zeigen Lösungen für reale Aufgaben. Der gemeinsame Nenner ist nicht der Look, sondern dass Menschen Informationen finden, Funktionen bedienen und einen Vorgang selbstständig abschliessen können.