Für den Blinden- und Sehbehindertenverein Schleswig-Holstein eine neue Website zu gestalten, hieß: Die Menschen, die am genauesten beurteilen, ob sie funktioniert, sehen den Bildschirm nie. Genau das hat dieses Projekt zu einem der lehrreichsten gemacht, die ich begleiten durfte.
2024 ist die Seite entstanden. 2026 habe ich sie noch einmal komplett durchgesehen und auf den heutigen Stand der WCAG 2.1 auf Stufe AA gebracht. Diese Casestudie erzählt beides, den Relaunch und den Feinschliff, weil Barrierefreiheit selten mit dem Launch fertig ist.
Ausgangslage
Die alte Seite des Vereins war in die Jahre gekommen, optisch wie technisch. Sie brauchte einen Neuanfang, der nicht nur frischer aussieht, sondern für die eigene Zielgruppe wirklich bedienbar ist. Und diese Zielgruppe stellt die höchsten Ansprüche, die man an Barrierefreiheit überhaupt stellen kann: Menschen, die blind sind oder wenig sehen und ihre Website täglich mit Screenreader und Tastatur erleben.
Es geht nicht nur um Technik und Design
Das eigentlich Spannende an diesem Projekt lag gar nicht im Code, es lag in der Zusammenarbeit. Wie zeige ich einen Entwurf jemandem, der ihn nicht sehen kann? Wie halte ich ein Video-Meeting, in dem die eine Seite das Layout nur hört und die andere es sieht? Wie beschreibe ich Gestaltung in Worten, die auch wirklich ankommen? Für all das haben wir eigene Wege gefunden, mit viel Geduld, klaren Beschreibungen und der Bereitschaft, ehrlich zu sagen, was geht und was (noch) nicht.
Der eigentliche Auftrag
Unter der Oberfläche steckte echte Feinarbeit. Navigation und Suche habe ich so überarbeitet, dass Screenreader sie zuverlässig vorlesen und in einer sinnvollen Reihenfolge durchlaufen. Eine Apple-Aktualisierung, die unterwegs für Ärger sorgte, haben wir abgefangen. Und im Hintergrund arbeiten kleine, aber wirksame Helfer, etwa die Möglichkeit, Seitenvorlagen zu duplizieren, ohne jedes Mal die komplette Navigation mitzuschleppen, sowie eine durchgängig erreichbare Menüführung. Bei der Programmierung stand mir Anne K. Frey zur Seite.
Zwei Jahre später: der Durchgang nach WCAG 2.1 AA
Eine Website lebt weiter, nachdem sie online gegangen ist. Inhalte kommen dazu, Beiträge werden von mehreren Personen gepflegt, Blöcke werden kopiert und angepasst. Genau dabei entstehen die kleinen Unsauberkeiten, die man beim Draufschauen nie bemerkt und die beim Vorlesen sofort auffallen. Im September 2026 habe ich die Seite deshalb nicht stichprobenartig, sondern vollständig geprüft: 29 Seiten, 64 Beiträge, sämtliche wiederverwendbaren Blöcke und den Fußbereich.
Geprüft habe ich Überschriftenstruktur, Linktexte, Alternativtexte, Farbkontraste, Formularbeschriftungen, Tastaturbedienung, Bereichsauszeichnung und das Verhalten bei vergrößertem Zeilen- und Zeichenabstand. Was dabei zusammenkam, war weniger ein einzelner großer Fehler als eine Menge kleiner Reibungspunkte.
Was seitdem anders ist
- Die Startseite läuft in lesefreundlicher Breite. Sie steckte technisch noch in einer halben Rasterspalte, ein Rest aus der Zeit, als der Inhalt zweispaltig lief. Zeilenabstand jetzt 1,6 statt 1,32, und Bilder werden nicht mehr von schmalen Textspalten umflossen.
- Links im Fließtext sind unterstrichen. Vorher waren sie allein an der Farbe erkennbar, bei einem Kontrast von 2,15 zu 1 gegenüber dem Text. Gefordert sind mindestens 3 zu 1.
- Die Überschriftenebenen laufen auf allen 93 Seiten und Beiträgen ohne Sprung, jede Seite hat genau eine Hauptüberschrift.
- Rund hundert leere Überschriften sind aus der Vorlesestruktur verschwunden. Sie waren als Abstandshalter im Einsatz, Screenreader kündigten sie an und lasen dann nichts vor.
- 52 Links kündigen jetzt an, dass sie ein neues Fenster öffnen, neun mehrdeutige Linktexte nennen ihr Ziel. Beides unsichtbar und nur für Screenreader.
- Der Tastaturfokus ist mit einem kräftigen Rahmen sichtbar, auch auf den dunklen Flächen im Kopf- und im Fußbereich.
- Die Schaltflächen zum Vergrößern und Verkleinern der Schrift überdecken keinen Text mehr.
- Fußbereich und Brotkrumen sind als eigene Bereiche ansteuerbar, sodass man per Screenreader direkt dorthin springen kann.
- Im mobilen Menü lassen sich die Untermenüs wieder per Tastatur öffnen, und bei geöffnetem Menü ist der Hintergrund für Hilfsmittel stillgelegt.
- Das Inhaltsverzeichnis der Satzung besteht nicht mehr aus 21 Überschriften der sechsten Ebene, die die Überschriftennavigation verstopft haben.
Geprüft und ohne Beanstandung: sämtliche Farbkontraste für Text auf Stufe AA, die Alternativtexte aller Bilder, die Beschriftung der Formularfelder, der Sprunglink zum Inhalt und das Verhalten bei 320 Pixel Fensterbreite, wo nichts horizontal scrollt.
Warum der Praxistest den Unterschied macht
Automatische Prüfwerkzeuge finden die messbaren Fehler. Sie finden nicht, ob sich eine Seite gut anhört. Beim BSVSH kommt beides zusammen, und der zweite Teil kommt aus dem Verein selbst. Abgestimmt und gegengetestet habe ich fortlaufend mit Dr. Jürgen Trinkus, der die Seite mit seinen eigenen Hilfsmitteln bedient. Jede größere Änderung ging erst dann durch, wenn sie sich auch in der Praxis bewährt hat.
Das schönste Beispiel dafür ist die Startseite. Sie war zunächst zweispaltig aufgebaut, was optisch gut funktionierte. Beim Vorlesen brachte diese Anordnung die Mitglieder jedoch aus dem Tritt, weil die Reihenfolge im Ohr eine andere ist als im Auge. Diese Rückmeldung hätte kein Prüfwerkzeug geliefert. Seitdem läuft die Startseite einspaltig, und 2026 habe ich auch die technischen Reste dieser Umstellung aufgeräumt.
Was noch offen ist
Zwei Punkte bleiben offen. Das monatliche Hörmagazin MoinSeHn ist ein reiner Toninhalt, für den nach WCAG schon auf Stufe A eine Textfassung gefordert ist. Und die PDF-Dokumente im Downloadbereich sind noch nicht nach PDF/UA geprüft. Beides ist Redaktionsarbeit, beides ist beim Verein angesprochen. Für die Mitglieder haben diese zwei Punkte mehr Alltagswirkung als alles, was ich am Quelltext gemacht habe.
Fazit
Entstanden ist eine Website, die niemanden ausschließt, und die von genau den Menschen geprüft wurde, die es am besten können. Barrierefreiheit war hier kein Häkchen am Ende, sondern der ganze Punkt. Sie ist live:
Und sie bleibt eine Aufgabe. Der Durchgang von 2026 hat gezeigt, dass eine gut gebaute Seite im Alltag wieder Unsauberkeiten ansammelt, sobald mehrere Menschen Inhalte pflegen. Wer Barrierefreiheit ernst nimmt, plant deshalb einen regelmäßigen Prüftermin ein, so wie man auch Sicherheitsupdates einplant. Beim BSVSH ist das inzwischen Teil der Betreuung.
So arbeite ich auch für andere Auftraggeber: barrierefreies Webdesign, von der ersten Skizze an mitgedacht statt am Ende aufgesetzt.
Häufige Fragen zu barrierefreien Websites
Reichen automatische Prüfwerkzeuge, um eine Website barrierefrei zu machen?
Nein. Werkzeuge finden die messbaren Fehler zuverlässig: fehlende Alternativtexte, zu schwache Kontraste, unbeschriftete Formularfelder. Sie hören nicht, ob sich eine Seite gut vorlesen lässt. Beim BSVSH kam genau das aus dem Verein selbst: Die Startseite war zweispaltig aufgebaut und sah gut aus, brachte beim Vorlesen aber alle aus dem Tritt, weil die Reihenfolge im Ohr eine andere ist als im Auge. Kein Prüfwerkzeug hätte das gemeldet.
Wie oft muss eine barrierefreie Website geprüft werden?
Regelmäßig, so wie man Sicherheitsupdates einplant. Eine Website lebt weiter: Inhalte kommen dazu, mehrere Menschen pflegen Beiträge, Blöcke werden kopiert und angepasst. Genau dabei entstehen die kleinen Unsauberkeiten, die beim Draufschauen niemand bemerkt und die beim Vorlesen sofort auffallen. Beim BSVSH lagen zwischen Relaunch und vollständigem Durchgang zwei Jahre, und es kam einiges zusammen. Ein jährlicher Termin ist ein guter Rhythmus.
Was wird bei einer Prüfung nach WCAG 2.1 AA angesehen?
Beim BSVSH waren es: Überschriftenstruktur, Linktexte, Alternativtexte, Farbkontraste, Formularbeschriftungen, Tastaturbedienung, Bereichsauszeichnung und das Verhalten bei vergrößertem Zeilen- und Zeichenabstand. Dazu, ob bei 320 Pixel Fensterbreite nichts horizontal scrollt. Geprüft wurde nicht stichprobenartig, sondern vollständig: 29 Seiten, 64 Beiträge, alle wiederverwendbaren Blöcke und der Fußbereich.
Reicht es, Links im Text farbig hervorzuheben?
Nein. Wer Farben schlecht unterscheidet, erkennt einen Link dann nicht. Die WCAG verlangen deshalb mindestens einen Kontrast von 3 zu 1 zum umgebenden Text – oder ein zweites Merkmal. Beim BSVSH lag der Farbkontrast bei 2,15 zu 1, die Links waren also allein an der Farbe erkennbar. Seit dem Durchgang sind sie unterstrichen, das ist die einfachste und verlässlichste Lösung.
Muss eine Website neu gebaut werden, um barrierefrei zu sein?
Nicht zwingend. Wenn die Grundlagen stimmen – saubere Technik, sinnvolle Struktur, ein System, das man pflegen kann –, lässt sich vieles nachschärfen. Beim BSVSH war das so: Die Seite von 2024 war gut gebaut, der Durchgang 2026 hat vor allem Reibungspunkte beseitigt, die im Alltag entstanden waren. Ein Neubau lohnt dann, wenn das bestehende System selbst im Weg steht.
Was ist mit PDF-Dateien und Audio-Inhalten?
Die zählen mit. Für reine Toninhalte fordern die WCAG schon auf Stufe A eine Textfassung, und PDF-Dokumente sollten nach PDF/UA erstellt und geprüft sein. Beim BSVSH sind genau das die beiden offenen Punkte: das monatliche Hörmagazin und die Dateien im Downloadbereich. Beides ist Redaktionsarbeit, und für die Mitglieder hat es im Alltag mehr Wirkung als vieles im Quelltext.