Menschen mit Sehschwäche sind auf adaptive Technologien wie Screen-Reader angewiesen, um effektiv mit Online-Content interagieren zu können. Damit solche Technologien die angebotenen Inhalte richtig auslesen können, müssen sie barrierefrei ausgegeben werden. Die Zugänglichkeit ist aber nicht allein die Aufgabe von Webentwicklern und Webdesignern, sondern richtet sich auch an die Verfasser von Webtexten.

Aber was heißt Barrierefreiheit im Netz genau? Das W3C fasst unter dem Begriff der „Web-Barrierefreiheit“ die Möglichkeit zusammen, dass Menschen mit Behinderung in der Lage sein müssen, Inhalte im Web zu erkennen und zu verstehen. Es darf keine besonderen Hürden bei der Navigation und Interaktion geben.

Die barrierefreie Gestaltung von Online-Content obliegt aber nicht allein Webentwicklern und Webdesignern, sondern ist gleichsam die Aufgabe der Verfasser von Webtexten, die eher einen journalistischen Hintergrund besitzen und sich weniger mit Webtechnologien auskennen.

Durch die Befolgung acht einfacher Schritte, die auf  Jacqueline Tolisano’s Artikel und den Ratschlägen von UXPin basieren, können Redakteure, Autoren und Editoren dabei helfen, den barrierefreien Zugang von Online-Inhalten zu verbessern und so die User Experience von Anwendern mit Sehschwäche (Blindheit, geringes Sehvermögen und Farbblindheit) zu steigern.

1. Logische Heading-Strukturen

Sind Nutzer auf adaptive Technologien angewiesen, sind logische Heading-Strukturen hilfreich, um sich effizient durch den Content zu navigieren. Die richtige Implementierung von Heading-Elementen erlaubt es, Inhalte so zu strukturieren, dass die gewünschten Informationen ohne visuelle Darstellung schnell gefunden werden können.

Wird demgegenüber auf eine angemessene Header-Struktur verzichtet, schränkt das die Effizienz von Screen-Readern ein. Das Suchen und Finden von Inhalten wird auf diese Weise nicht nur schwieriger, sondern auch zeitintensiver.

Best Practices

Da Screen-Reading-Software nicht in der Lage ist, zwischen verschiedenen Schriftgrößen und –stilen zu unterscheiden, ist es wenig hilfreich, Überschriften besonders groß oder fett darzustellen. Damit die unterschiedlichen Textbausteine klar voneinander abgegrenzt werden können, sind logische Heading-Strukturen unerlässlich.

So sollte jede Seite nur einmal das Element Heading 1 besitzen, das eindeutig den Zweck des Contents beschreibt. Die weiteren Textelemente werden durch die fünf weiteren Heading-Bausteine in chronologischer Reihenfolge organisiert. Beispielsweise sollte ein <h3>-Element nicht vor einem <h2>-Baustein benutzt werden. Ferner müssen die unterschiedlichen Überschriften klare Angaben über die Informationen, die auf sie folgen, beinhalten.

2. Auf Wahnehmbarkeit und Lesbarkeit achten

Die größte Herausforderung für Menschen mit geringem Sehvermögen besteht darin, Texte zu lesen. Deshalb ist es als Designer wichtig, sowohl auf die Wahrnehmbarkeit einzelner Buchstaben als auch auf die Lesbarkeit von Textblöcken zu achten.

Best Practices

So empfiehlt das W3C mindestens ein Kontrastverhältnis von 4,5:1 zwischen Text und Hintergrund. Bei großen und fetten Schriften ist ein Verhältnis von 3:1 zulässig. Des Weiteren sollte der Body-Text nicht weniger als 16 Pixel betragen und der Zeilenabstand 25 Prozent der Fontgröße nicht unterschreiten. Außerdem ist es ratsam, eine andere Maßeinheit als .px, wie beispielsweise .em oder .pt, im Stylesheet zu verwenden, damit sich die Schriftgröße automatisch an die Auflösung anpassen kann.

3. Schreibstil an das größtmögliche Publikum anpassen

Der Schreibstil kann einen negativen Effekt auf die Barrierefreiheit von Inhalten haben. Um Texte zu verstehen, müssen die User die verschiedenen Wörter einzeln decodieren und in Sinnzusammenhänge bringen. Um das größtmögliche Publikum zu adressieren, sollte der Content deswegen nicht dicht und kompliziert, sondern einfach und prägnant geschrieben sowie in logische Sektionen gegliedert werden.

Der Prozess des Lesens und Verstehens kann durch den Einsatz allgemein bekannter Wörter und kurzer Satzstrukturen beschleunigt werden. Lange und verschachtelte Sätze sowie unbekannte Fremdwörter sollten vermieden werden.

Best Practices

Beim Verfassen von Online-Content ist es daher wichtig, die Wünsche und Bedürfnisse der Zielgruppe im Auge zu behalten. Die meisten konsumieren Inhalte im Netz zur schnellen Informationsaufnahme. Um dieses Leseverhalten zu unterstützen, sind Absätze sinnvoll, die nicht mehr als zwei bis drei Sätze umfassen.

Eine effektive Aufteilung hilft den Nutzern, Informationen einfach und schnell zu begreifen. Darüber hinaus kann der Einsatz von Bulletpoints für ein besseres Verständnis sorgen. Sie bringen die wesentlichen Aussagen strukturiert und prägnant auf den Punkt. Demgegenüber wirken lange Textblöcke eher abschreckend und laden nicht zum Lesen ein – egal wie aussagekräftig der Inhalt auch sein mag.

Falls es jedoch unumgänglich sein sollte, auf schwierige und spezialisierte Begriffe zurückzugreifen, ist der Einsatz von Popup-Boxen oder Verlinkungen empfehlenswert, die eine angemessene Definition bereithalten. Auf diese Weise können Verständnisprobleme bei den Anwendern vorgebeugt werden.

4. Keyboard-Navigation aktivieren

Die Keyboard-Navigation ist unter Power-Usern ein gern benutztes Tool, um sich schnell und einfach durch Seiten und Inhalte im Netz zu manövrieren. Während für diese Usergruppe die Integration des Features eine willkommene Ergänzung darstellt, ist sie für Nutzer mit Sehschwäche eine zwingende Voraussetzung, die über das Tabben oder Scrollen per Leertaste hinausgeht.

Best Practices

Wie das W3C rät, sollten alle Funktionen einer Webseite per Keyboard-Shortcuts zugänglich sein. Hierbei darf  im Regelfall kein spezielles Timing bei den Tastenanschlägen vorausgesetzt werden. Einen Überblick über alle gängigen Tastenkombinationen bietet Wikipedia. Die Verwendung der Tastatur sollte jedoch andere Eingabemethoden, wie etwa die Maus, nicht ersetzen, sondern sinnvoll ergänzen.

5. Aussagekräfte Alternativ-Texte bei Bildern

Bilder werden nicht nur als schmückendes Beiwerk im Netz eingesetzt. Sie können die Aussage eines Texts unterstreichen und seine Botschaft verstärken. Damit Screen-Reader-User ebenfalls die Vorteile optischer Elemente genießen können, sollten Bilddateien immer einen aussagekräftigen Alternativ-Text besitzen.

Die Technologie von Screen-Readern ist noch nicht so weit vorangeschritten, dass Bilder eigenständig analysiert und interpretiert werden können. Da der Sinn solcher Dateien demnach nicht autonom von den Geräten ermittelt werden kann, sind sie auf das Alt-Attribut angewiesen, um eindeutige Angaben über deren Gehalt machen zu können.

Best Practices

Ein guter alternativer Text zeichnet sich nicht nur durch eine genaue Beschreibung der Abbildung aus, sondern erklärt zudem, warum das Bild überhaupt an dieser Stelle eingesetzt wird. Generische Texte wie „Foto1“ oder „Ente“ besitzen beispielsweise keinen ausreichenden Informationsgehalt. Ziel ist es, Anwendern mit Sehschwäche die gleiche User Experiene wie Menschen mit normaler Sehleistung zu ermöglichen.

Aber auch wenn Images nur zur Dekoration eingesetzt werden, ist es wichtig, das Alt-Attribut zu verwenden. In solchen Fällen ist es sinnvoll, ein sogenanntes Null-Alt-Attribut zu erzeugen, indem das Feld einfach leer gelassen wird. Abbildungen mit einem Null-Alt-Attribut werden von Screen-Readern ignoriert. Besitzen Bilder dieses Element nicht, liest die Software oftmals den Quellcode der Datei aus, was die UX beträchtlich einschränkt.

Es ist aber nicht immer möglich, mit dem Alt-Text eine Grafik angemessen zu beschreiben: so zum Beispiel bei Infografiken und Diagrammen. Bei komplexen visuellen Dateien ist es daher ratsam, im anschließenden Fließtext die abgebildeten Inhalte obendrein schriftlich aufzubereiten.

6. Videos mit Ton transkribieren

Alternative Texte sind jedoch nicht nur bei Bilddateien essenziell, sondern gleicherweise bei Videos. Zwar besitzen sie gegenüber Bildern den Vorteil, dass ihre visuellen Informationen normalerweise durch Audiowiedergaben unterstützt werden. Allerdings reichen die Tonspuren oftmals nicht aus, um die Aussage eines Videos hinreichend zu verstehen.

Best Practices

Videodateien mit Ton sollten deshalb nicht nur mit aussagekräftigen Beschriftungen und Alternativ-Texten versehen, sondern ebenfalls vollständig transkribiert werden, damit die Inhalte von Screen-Readern ausgelesen werden können. Zugegeben ist eine vollständige Transkription eine aufwändige Arbeit, deren Bewältigung stark von den vorhandenen Ressourcen des Publishers abhängt.

Darüber hinaus ist die Implementation eines Mechanismus via Tastenkürzel zum Stoppen, Pausieren und Stummschalten der Videowiedergabe sinnvoll, wenn diese automatisch startet und die Abspielzeit die Marke von drei Sekunden überschreitet.

7. Nicht allein auf Farben vertrauen

Das Webdesign wandelt sich mehr und mehr zum visuellen Medium. Allerdings sollte man nicht den Fehler machen, die Funktionen der einzelnen Elemente ausschließlich durch die Farbgebung zu kommunizieren.

Best Practices

Die Kommunikation der Interaktionsmöglichkeiten muss durch angemessene Labels und Hinweistexte unterstützt werden. Das gilt für die Beschriftung von Steuerungselementen genauso wie für alle anderen optischen Bausteine – ganz gleich, ob es sich um Formularfelder oder CTA-Buttons handelt.

Beispielsweise werden fehlerhafte Eingaben bei Feldern oftmals durch eine rote Markierung gekennzeichnet. Dieser Verweis sollte durch ein Ausrufezeichen-Icon samt Hinweistext komplementiert werden, damit auch User mit Sehschwäche die Fehlermeldung verstehen.

Falls man sich bei der farblichen Konzeption von Elementen nicht sicher ist, hilft folgender Trick: In solchen Situationen sollte man das Interface durch einen Schwarz-Weiß-Filter betrachten. Auf diese Weise wird klar, an welchen Stellen die Botschaft nur durch die Farbe getragen wird.

8. Links richtig benennen

Verlinkungen ermöglichen es, auf ausführlichere Informationen und weiterreichende Quellen aufmerksam zu machen sowie auf verwandten Content zu verweisen. Allerdings steht und fällt ein guter Hyperlink mit der richtigen Benennung.

In der Regel werden weiterführende Links mit generischen Texten wie „Hier Klicken“ versehen. Diese Praxis ist für Screen-Reader-Nutzer ein echtes Problem. Denn oftmals fassen die Geräte die unterschiedlichen Links auf einer Seite in einer eigenen Shortcut-Liste zusammen. Treten Aufforderungen wie „Mehr Erfahren“ in solchen Übersichten mehrfach und ohne kontextuellen Bezug auf, ist ihr Informationsgehalt äußerst dürftig.

Verlinkungen müssen deshalb auch ohne direkten Bezug auf den Kontext Sinn ergeben. Linktexte sollten eindeutig beschreiben, worum es geht. Das Label „Mehr Erfahren“ kann etwa durch den Zusatz „Erfahren Sie mehr über unsere Online-Programmierkurse“ sinnvoll ergänzt werden.

Best Practices

Neben einer aussagekräftigen Beschreibung ist ebenso darauf zu achten, dass klar kommuniziert wird, ob eine Verlinkung auf interne oder externe Inhalte verweist. Wenn Screen-Reader-User nicht mitbekommen, dass sie eine Webseite verlassen, kann das zu unangenehmen Verwirrungen führen.

Darüber hinaus sollte darauf hingewiesen werden, ob durch eine Verlinkung weiterer Web-Content geöffnet oder auf ein Dokument zugegriffen wird. So sollten Dateiendungen (.doc oder PDF) dem Linktext hinzugefügt werden.

Fazit

Die acht Tipps zur barrierefreien Gestaltung sollten das Verfassen von Webtexten und die Auszeichnung von Bilddateien, Videos sowie weiterer visueller Elemente im Arbeitsalltag leiten. Diese Maßnahmen sorgen nicht nur für einen barrierefreien Zugang für User mit Sehschwäche, sondern verbessern darüber hinaus die Usability aller Nutzer und das SEO-Ranking.

Die Vorschläge sollten jedoch nicht nur bei der Erstellung neuen Contents berücksichtigt werden, sondern auch bereits existierende Inhalte können mithilfe von Content-Audits auf ihre Zugänglichkeit hin überprüft werden – wenngleich dieser Vorgang viel Zeit in Anspruch nimmt. Die Vorteile überwiegen aber in der Regel die investierte Arbeitszeit.

Zu guter Letzt können die Maßnahmen durch die Implementierung einer Zugänglichkeitserklärung auf der Webseite abgerundet werden. Ebenfalls hat sich die Einrichtung einer Telefonhotline, an die sich Sehbeeinträchtigte bei Problemen wenden können, in der Praxis bewährt.

Aufmacherbild: Look through a magnifying glass via Shutterstock / Urheberrecht: studiostoks