Digitale Barrierefreiheit: Warum unsere Website so aussieht

Eine umfangreiche Website wie die des sbv komplett neuzugestalten, ist viel Arbeit. Wie bringt man hunderte von Seiten in einer neuen Struktur unter? Wie stellt man sicher, dass keine wichtigen Informationen oder bewährten Tools vergessen gehen? Doch unsere wichtigste Frage war die nach der Barrierefreiheit für unsere Mitglieder: Wie schaffen wir es, dass sämtliche Informationen auch mit Screenreader oder starker Vergrösserung des Bildschirms schnell und zuverlässig gefunden werden?

Unsere Website soll der gegenwärtigen «Best Practice» punkto Barrierefreiheit für blinde und sehbehinderte Menschen entsprechen oder sie im besten Fall sogar übertreffen – und dabei auch für gut Sehende keine ästhetischen oder funktionalen Einschränkungen bieten. Die folgenden zehn Punkte haben wir beachtet, um diesem Ziel möglichst nahe zu kommen.

Am Anfang einer barrierefreien Seite steht ein gutes Konzept: Wie entstehen möglichst kurze Wege zu allen Informationen, möglichst kurze «Klickpfade» – wie findet man also schnell alles, was die Website zu bieten hat? Wir haben uns für eine themenbasierte Struktur entschieden: Die Website soll nicht unsere Organisation abbilden (die vielen User:innen nicht im Detail bekannt ist), sondern in sinnvolle Themencluster geordnet sein. Bei allen Entscheidungen haben wir zudem die WCAG-Richtline (siehe Links) beachtet, die Standards bezüglich digitaler Barrierefreiheit festschreibt. Unser Ziel dabei war und ist, auf mindestens 80 % unserer Seiten dem Rating «AAA», d.h. der Best Practice, zu entsprechen. Und selbstverständlich auf allen anderen Seiten mindestens «AA», also dem Mindeststandard.

Mit WordPress ist unser neues Content-Management-System (CMS) eins der bekanntesten überhaupt. Das hat mehrere Vorteile punkto Barrierefreiheit: WordPress funktioniert Open Source; jede:r kann also selbst Erweiterungen und Designs gestalten, um Barrieren abzubauen. Da es so verbreitet ist, gibt es schon viele entsprechende Erweiterungen, nötigenfalls kann man selbst eine programmieren. Und: der sbv kann die «Best Practice» für eine barrierefreie WordPress-Seite aufzeigen. Damit ist er hoffentlich ein gutes Vorbild für die vielen anderen WordPress-User:innen.

Alt-Text (kurz für Alternativtext) macht Bilder für blinde Personen zugänglich: So kurz wie möglich, so lang wie nötig werden die geposteten Bilder beschrieben. Screenreader lesen diese Beschreibung an der Stelle vor, wo das Bild steht. Obwohl er so wichtig wäre, fehlt der Alt-Text leider oft. Wir haben unser Backend so eingerichtet, dass bei jedem geposteten Bild prominent nach dem Alt-Text gefragt wird. Darauf, ihn obligatorisch zu machen, haben wir letztlich verzichtet: Dekorative Bilder ohne informativen Gehalt können stellenweise so wichtig sein für die Ästhetik der Seite, dass wir nicht komplett darauf verzichten wollten. Bei solchen Bildern lassen wir den Alt-Text weg, da er wenig Mehrwert bietet und sogar stören kann.

Die Wahl der Bilder und Keyvisuals ist auch für Menschen mit Sehbehinderung wichtig: Alle visuellen Elemente müssen ausreichend starke Kontraste haben. Farbverläufe oder wilde Muster sind ungünstig. Symbole oder andere Illustrationen müssen ausreichend dicke Linien haben. Um zu prüfen, ob wir den Anforderungen der WCAG entsprechen, haben wir alle visuellen Entscheidungen mit dem Kontrastrechner geprüft (siehe Links).

Titel, Zwischentitel oder Aufzählungen werden von Screenreadern nur als solche erkannt, wenn sie entsprechend formatiert sind. Text nur fett und grösser zu machen, reicht hier nicht. Im Sinne der Barrierefreiheit vermeiden wir zudem generell, stark formatierten Elemente zu verwenden, die den Lesefluss mit Bemerkungen über ihre Formatierung stören. So sind beispielsweise Tabellen mit Lesegerät fast unlesbar.

Auch Elemente wie Buttons, eingebettete Videos oder Pop-Ups sind oft nicht gut erkennbar. Sie müssen eigens als solche gekennzeichnet werden. Wo WordPress keine Möglichkeit dafür bietet, kommen so genannte «ARIA-Lables» ins Spiel. Mittels HTML-Code können dank ARIA alle beliebigen Elemente so angeschrieben werden, dass auch Lesegeräte sie erkennen. Nötig ist das auf unserer Seite beispielsweise bei den Formularen oder bei Fehlermeldungen.

Auf den meisten Websites sind Links mittels verlinkter Wörter im Fliesstext eingebaut – zum Beispiel so. Für blinde Menschen kann das sehr unpraktisch sein: Nach jedem verlinkten Wort sagt der Screenreader noch «Link» dazu. Wenn viele Wörter verlinkt sind, ist der Text kaum mehr zu verstehen. Zudem ist nicht erkennbar, um was für einen Inhalt es sich handelt, wenn man sich mit Screenreader eine Link-Liste erstellen und alle Links der Seite vorlesen lässt – in obigem Beispiel würde dieser Link als «so» vorgelesen. Wir sammeln daher alle relevanten Links und Downloads in einer speziell dafür vorgesehenen Spalte am Rand der Seite und geben ihnen eindeutige Beschreibungen.

Wer eine Seite mit Screenreader liest, bekommt zu Beginn sämtliche Menüpunkte vorgelesen und kann den Text nicht ignorieren. Das gilt es besonders beim «Hamburger» zu beachten, den drei Strichen, die man auf vielen Website anstelle eines sichtbaren Menus oben sieht. Da sehende Menschen die Informationen aus dem «Hamburger» ausblenden können, werden dort oft sehr viele Menüpunkte hineingepackt. Ein barrierefreies Menu sollte immer knapp und übersichtlich gehalten sein; auch wenn es für Sehende versteckt ist.

Menschen mit Sehbehinderung haben den Bildschirm oft stark gezoomt und sehen nur kleine Teile einer Seite auf einmal. Auch mit einem Screenreader ist es nicht möglich, eine Seite zu «überfliegen». Am einfachsten ist es daher, nur sehr wenige Informationen pro Seite zu bieten. Umfangreiche Seiten sind aber gewohnter und verbessern die inhaltliche Übersichtlichkeit stark.

Wir haben uns daher für eine In-Page-Navigation entscheiden: Wenn eine Seite viele Kacheln und Links enthält, gibt es unterhalb des Hauptmenüs eine zweite Navigation. Auf dieser findet man Ankerlinks zu den wichtigsten Abschnitten der Seite. Werden sie geklickt, springt die Ansicht direkt zum entsprechenden Abschnitt. So kommt man auch mit Lesegerät oder starkem Zoom schnell zu jeder Stelle einer umfangreichen Seite.

Die Wahl der Schriftart ist für unsere sehbehinderten Nutzer:innen besonders wichtig. Grundsätzlich sind Schriften ohne Serifen besser, da Serifen bei starkem Zoom irritieren. So genannte «Humanistische Antiqua»-Schriften sind besonders geeignet, weil sie auch im Detail gut unterscheidbare Zeichen verwenden. Unsere Entscheidung fiel auf die frei verfügbare Schrift «Atkinson hyperlegible», die auch der deutsche Blinden- und Sehbehindertenverband empfiehlt.

Dazu kommt eine barrierefreie Gestaltung des Texts: Bei farbiger Schrift oder farbigen Hintergründen braucht es starke Kontraste. Auch bei einer Farbumkehr und im Dark Mode müssen die Kontraste stimmen. Die automatische Farbumstellung des Browsers kann hierzu übersteuert werden. Grosse Weissräume, in denen man die Orientierung verliert, sollten zudem vermieden werden, und der Text sollte möglichst linear laufen – plötzliche Einschübe in anderer Schriftgrösse oder sogar anderer Laufrichtung irritieren.

Manche Funktionen würde man auf unserer Website erwarten, aber tatsächlich sind sie bezüglich Barrierefreiheit für die meisten blinden und sehbehinderten Personen nicht nötig oder können sogar stören. So eine Vergrösserungsfunktion: Betroffene stellen die Vergrösserung üblicherweise direkt im Browser so ein, wie es für sie am besten ist. Dann ist sie auf allen besuchten Websites gleich. Oder sie arbeiten mit gut eingestellten digitalen oder analogen Zoom-Hilfsmitteln. Ähnlich die Vorlesefunktion: Alle Betriebssysteme haben eigene Screenreader und es gibt viele spezielle Apps und Geräte zu diesem Zweck. Auch auf die die Möglichkeit, sämtliche Bilder auszublenden, haben wir verzichtet: Wir halten unsere Bilder stattdessen durchgehend so wenig störend und so barrierefrei wie möglich.

Man kann nie auf Anhieb an alles denken. Wir haben daher eine möglichst repräsentative Testgruppe definiert, die uns vom ersten Konzept bis zur fertigen Seite begleitet und auf mögliche Barrieren hingewiesen hat. Und wir bleiben weiterhin offen: Hilfsmittel verändern sich, Bedürfnisse verändern sich – und es geht immer besser! Gerne nehmen wir auch alle Hinweise und Bedürfnisse unserer Nutzer:innen auf. Melden Sie uns, wenn Sie irgendwo Probleme haben, unsere Inhalte abzurufen, oder eine Veränderung der Seite Ihren Besuch hier erleichtern würde. Am liebsten mit der Angabe, welche Hilfsmittel Sie verwenden. Wir danken für Ihre Unterstützung.