Wer sich in den letzten Monaten mit den UX-Trends für 2024 beschäftigt hat, ist an zwei Themen nicht vorbeigekommen: KI und Barrierefreiheit. Auch bei infomax stehen beide Themen aktuell hoch im Kurs.
Bereits im Juni 2022 wurde das Thema „Barrierefreiheit“ unseren Kunden auf der imx.Conference nähergebracht. Der Vortrag hat sich aber eher auf die technischen Maßnahmen bezogen. In diesem Beitrag möchten wir uns intensiver mit dem Thema „Webseiten-Texte barrierefrei gestalten“ auseinandersetzen.
In den vergangenen Jahren haben wir eine Vielzahl von technischen Optimierungen an Bestandswebseiten vorgenommen. Dazu gehören Anpassungen an der Tastaturbedienbarkeit, Tastaturfokus oder Kontraste.
Doch alle technischen Optimierungen bringen nichts, wenn die redaktionellen Inhalte nicht auch barrierefrei aufbereitet sind.
Genau darum soll es in diesem Beitrag gehen, doch zuvor noch ein paar Worte zu Menschen mit Einschränkungen. Zu Menschen mit Beeinträchtigungen zählen im Web nicht nur die Personen mit Sehbeeinträchtigung oder körperlichen Einschränkungen, sondern auch Personen mit kognitiven Beeinträchtigungen, und das sollten wir uns immer ins Gedächtnis rufen, wenn wir eine Webseite neu aufsetzen oder bestehende Inhalte überarbeiten.
Doch wie kann ich nun vorgehen, um meine redaktionellen Inhalte weitestgehend barrierefrei zur Verfügung zu stellen? Es gibt aktuell keinen festen Leitfaden, in dem Optimierungen für barrierefreie Inhalte erfasst sind. Unsere Tipps können aber helfen, Barrieren auf Webseiten zu vermeiden oder zu reduzieren.
Tag für Tag verwenden wir Abkürzungen. Egal ob in E-Mails, WhatsApp-Nachrichten oder in Texten auf Webseiten.
Menschen mit kognitiven Einschränkungen können oftmals mit Abkürzungen nicht umgehen. Daher sollten wir Abkürzungen wie
vermeiden und stattdessen die Wörter ausschreiben.
Oftmals enthalten Texte sogenannte Schachtelsätze. Die komplexen Satzstellungen können von Menschen mit Dyslexia (Lese- und Rechtschreibschwäche) nicht erfasst werden.
Damit man sich einmal vorstellen kann, wie Texte für Menschen mit kognitiven Einschränkungen aussehen können, haben wir ein kleines Video vorbereitet. Am Anfang ist der Text noch klar zu erkennen, und dann verschwimmen die Buchstaben beziehungsweise tauschen die Plätze und ergeben auch für uns keinen Sinn mehr.
Vermeiden Sie Schachtelsätze und schreiben Sie Ihre Texte in kurzen, prägnanten Sätzen.
Menschen mit kognitiven Beeinträchtigungen haben, wie bereits beschrieben, Probleme, für uns normale Texte zu verstehen. Enthalten Texte aber Fremdwörter, dann kann dies noch schwieriger sein. Versuchen Sie, Fremdwörter zu vermeiden, und umschreiben Sie eher das Wort mit deutschen Begriffen.
Zu den Fremdwörtern zählen auch Wörter, welche in Dialekten geschrieben sind oder englische Wörter, die mittlerweile fester Bestandteil der deutschen Sprache geworden sind.
Ein Beispiel:
Besser wäre:
Wie oft findet man auf Webseiten Bilder, die Bezeichnungen wie „Img256_775“ im Titel aufweisen. Diese Titel sind nichtssagend und Menschen mit einer Sehbeeinträchtigung oder assistive Technologie (Screenreader) wird genau dieser Titelinhalt vorgelesen. Ein Mensch mit einer Beeinträchtigung hat in diesem Fall keine Ahnung, was auf dem Bild dargestellt wird.
Um dies zu verhindern und auch Menschen mit einer Sehbeeinträchtigung den Inhalt eines Bildes näher zu bringen, sollte ein Bild einen aussagekräftigen Titel und Bildbeschreibung aufweisen.
Am nachfolgenden Beispiel möchten wir einmal zeigen, wie dies aussehen könnte.
Beim Beispielbild ist aktuell der Titel „Grainau, das Zugspitzdorf“ gepflegt. Besser wäre hier „Pfarrkirche St. Johannes der Täufer in Grainau“.
In der Bildbeschreibung könnten die Redakteure noch detaillierter auf das Bild eingehen und zum Beispiel schreiben:
„Frühlingsblumen vor der Pfarrkirche St. Johannes in Grainau. Die Kirche steht in Sichtweite des großen Waxensteins (Wettersteingebirge).“
Für gehörlose Nutzer sollte auf jeder Seite ein kurzer Film zur Verfügung gestellt werden, in dem ein Gebärdendolmetscher bzw. eine -dolmetscherin die wichtigsten Informationen zur Webseite gebärdet. Die Filme können von entsprechenden Agenturen auf Basis eines schriftsprachlichen Ausgangstextes erstellt werden.
Jede Webseite sollte über eine Überschriften-Hierarchie verfügen. Für was sind Überschriften überhaupt notwendig? Personen, welche zum Beispiel über eine Sehbeeinträchtigung verfügen, nutzen Screenreader, welche eine Webseite vorliest.
Um nicht die komplette Webseite vorgelesen zu bekommen, kann über die Überschriften zu gewünschten Inhalten navigiert werden. Dies geht aber nur, wenn die angedachte und hinterlegte Überschriften-Hierarchie eingehalten wird.
Wie sollte eine korrekte Überschriften-Hierarchie aussehen?
Man kann sich jede einzelne Inhaltsseite einer Webseite wie ein Buch vorstellen. Der Buchtitel (Einband) ist die Überschrift H1. Das erste Kapitel ist die Überschrift H2. Zwischenüberschriften im Kapitel werden mit der Überschrift H3 dargestellt. Das nächste Kapitel bekommt wieder die H2 und die Zwischenüberschriften werden die H3.
Wenn das Beispiel auf einer Webseite angewendet wird, dann sollte die Inhaltsseite wie folgt aussehen:
Doch ganz oft sehen Webseiten so aus.
Statt des Textelements, welches meistens die H1-Überschrift beinhaltet, wird ein Modul direkt unter das Headerbild gesetzt. Hier ist die vordefinierte Überschrift die H3.
Danach folgen Teaser, wo die Zwischenüberschrift nicht befüllt ist und die Teaser wieder nur eine H3 beinhalten.
In diesem Fall ist weder für Sehende wie für Nutzer mit assistiver Technologien keine Struktur erkennbar.
Für den Nutzer sieht es so aus, dass Inhalte zu einem Thema gehören, was aber oftmals nicht der Fall ist. Erst durch eine gute Strukturierung von Textinhalten kann dies wahrgenommen werden und Barrieren abbauen.
Wie die Überschriften-Hierarchie Ihrer Webseite aussehen, können Sie bei Ihrem Projektmanager in Erfahrung bringen.
Wenn die Webseite es hergibt, sollten auch Button-Texte optimiert werden. Meistens enthalten Buttons Standard-Floskeln wie „weiter“, „mehr lesen“, „weiterlesen“ oder „buchen“. In diesem Fall kann Personen mit assistiver Technologie nicht klar sein, welche Aktion hinter einem Button liegt. Um dies zu gewährleisten, sollte zum Beispiel bei einem Button zur Unterkunftssuche Folgendes im Button enthalten sein: „Unterkunft suchen“ oder „Unterkunft buchen“.
In diesem Fall wird dem Nutzer direkt erkenntlich gemacht, dass auf der nächsten Seite eine Unterkunft gesucht oder gebucht werden kann.
Es gibt eine Vielzahl von Webseiten, die im Text Verlinkungen auf Drittseiten aufweisen. Dies ist gut, doch wenn in einem Text Wörter wie „hier“ verlinkt sind, dann ist dem Nutzer nicht klar, wohin er verlinkt wird. Besser wäre es, wenn der Linktext Hinweise zur Seite beinhaltet, auf die der User hingeführt werden soll.
Im zweiten Tipp sind wir bereits auf das Vermeiden von Schachtelsätzen eingegangen. Es gibt aber auch die Möglichkeit, Webseiteninhalte zusätzlich zur normalen Sprache in einfacher bzw. leichter Sprache zur Verfügung zu stellen.
Das stellt zwar im ersten Moment einen Mehraufwand bei der Pflege dar, aber so kann gewährleistet werden, dass für Menschen mit kognitiven Einschränkungen verständliche Texte zur Verfügung stehen.
Beispiel für eine Webseite mit leichter Sprache: https://www.eifel.info/barrierefreie-eifel
Viele Videos verfügen über keine Untertitel, was dazu führt, dass Menschen mit einer Hörbeeinträchtigung Videos nur bedingt verfolgen können. Bei der Erstellung sollte darauf geachtet werden, Untertitel zu hinterlegen. Des Weiteren sollte bei der Erstellung von Videos darauf geachtet werden, dass wichtige visuelle Informationen über eine Audiodeskription zur Verfügung gestellt werden. Diese Informationen sind für Menschen relevant, welche über eine Sehbeeinträchtigung verfügen.
Neben Texten, Bildern und Videos sollten auch PDF-Dateien barrierefrei zur Verfügung gestellt werden. Dies fängt schon bei der Erstellung an. PDF-Dateien sollten verständlich gestaltet, über Tastatur bedienbar und mit Screenreader nutzbar sein.
Barrierefreie PDFs können z. B. über Adobe erzeugt werden (https://helpx.adobe.com/de/acrobat/using/create-verify-pdf-accessibility.html).
Oft findet man Texte, wo sogenannte leere Absätze am Ende eines Textes, um Abstand zu nachfolgenden Objekten zu erzeugen, enthalten sind. Diese leeren Absätze werden Screenreader-Nutzern ebenfalls vorgelesen. Daher sollten solche Absätze vermieden werden.
Mit Listen meinen wir Aufzählungen, welche oft in Texten verwendet werden. Hier wird zwischen ungeordneten Listen und geordneten Listen unterschieden. Ungeordnete Listen werden meist visuell via Punkt, Strich oder Häkchen dargestellt.
Geordnete Listen sind Aufzählungen, welche mit fortlaufender Nummerierung oder Buchstaben dargestellt werden. Nutzen Sie daher keinen Bindestrich, sondern die Aufzählungsfunktion des Editors.
Auf vielen Webseiten werden Tabellen verwendet. Nutzer mit einer Sehbeeinträchtigung erschließen sich Tabellen nicht durchs Sehen, sondern über die vorgelesene Struktur.
Daher sollten Tabellen immer so einfach wie möglich gestaltet werden. In den Zellen einer Tabelle sollten ausschließlich Daten und keine Erklärungen enthalten sein. Auf leere Zeilen als Abstand sollte ebenfalls verzichtet werden.
Überschriften in Zellen und Spalten sollten immer ausgezeichnet sein.
Wir hoffen, dass wir mit unseren Tipps bei der Optimierung von barrierefreien Inhalten weiterhelfen konnten. Sollten wir was vergessen haben, würden wir uns über einen Hinweis freuen.
Von Marc & Willi – powered by Nostalgie, Nerd-Kultur und einer Prise ChatGPT Die W-JAX…
Anfang November konnte ich an der W-JAX 2024 in München teilnehmen, einer der führenden Entwicklerkonferenzen…
Der Hype der vergangenen Jahre rund um AI lässt spürbar nach, die immer noch verhältnismässig…
Skift kennen vermutlich viele Akteure im Tourismus als eines der führenden Newsportale und Marktforschungsunternehmen mit…
Neu in der imx.Platform: das Veranstaltungsmodul im Partner Client ist verfügbar. Eine Tour lässt sich…
Im Juli waren wir (Benni und Florian) auf dem WeAreDevelopers World Congress. 15.000 Verrückte, die…
