Sind die Texte auf Ihrer Website barrierefrei?

Die Digitalisierung hat alle Bereiche des privaten und öffentlichen Lebens erfasst. Das Netz bietet Informations- und Austauschplattformen, hat eine große Reichweite und ist ein schier unerschöpflicher Wissensspeicher, auf den unabhängig von Zeit und Ort zugegriffen werden kann. Damit eröffnet es insbesondere Menschen mit Behinderungen neue Möglichkeiten, bringt aber auch zahlreiche Herausforderungen für die Website-Betreiber mit sich.

Neue DIN-Norm

Webentwickler, die für Behörden, öffentliche Einrichtungen und Unternehmen mit hohem Inklusionsanspruch arbeiten, werden oft gefragt, ob es Richtlinien oder Normen für barrierefreies Design gibt. Noch ist das nicht der Fall. Aber es ist bereits beschlossene Sache und nur noch eine Frage der Zeit. Der Normenausschuss Ergonomie (NAErg) beim Deutschen Institut für Normung in Berlin arbeitet derweil an einer 60-seitigen Richtlinie mit dem Namen „Empfehlungen für Deutsche Leichte Sprache“ (DIN SPEC 33429). Am 3. März 2023 wurde der Entwurf veröffentlicht (hier kostenlos zu laden), bis zum 3. Mai 2023 konnte er kommentiert werden. Die endgültige Veröffentlichung ist für Ende des Jahres 2023 geplant. 

Das sechste der insgesamt neun Kapitel dieser DIN 33429 ist ganz der barrierefreien visuellen Gestaltung gewidmet. Es werden Empfehlungen zur richtigen Schrift und zur typografischen Gestaltung gegeben, wobei – ganz klassisch und praktisch – zwischen Lesetext, Beratungstext und Anzeigetext unterschieden wird. Weitere typografische Themen sind „Visuelle Gliederung und Auszeichnung“, „Grafische Elemente“ (Pfeile, Listen, Linien …), „Tonwerte und Farbe“ sowie „Verhältnis von Bild und Sprache“. 

Die visuelle Gestaltung trägt auf mehreren Ebenen zur Verständlichkeit von Texten bei. Daher sollten bei der Gestaltung von barrierefreien Websites und Druckerzeugnissen die folgenden Aspekte berücksichtigt werden:

• Leserlichkeit. Sie hängt nicht nur von der sprachlichen Ausdruckweise ab, sondern auch von der visuellen Umsetzung. Ein Text wird z. B. dann leserlich, wenn der Kontrast zwischen Schrift und Hintergrund hoch genug ist oder die Schriftgröße im Bereich der Lesegewohnheiten liegt, d. h. nicht zu klein und nicht zu groß gewählt ist. 
• Lesbarkeit. Dieser Begriff bezeichnet die gestalterische Qualität einer Schrift bzw. der typografischen Gestaltung. Eine Schrift ist z. B. dann gut lesbar, wenn der Strichstärkenkontrast gering ist, die Zwischenräume groß und die Buchstabenformen offen sind, und wenn die Ähnlichkeiten zwischen den verschiedenen Buchstaben gering ist (Testwort: Illiaorn). 
• Strukturierung. Die Strukturierung der Inhalte erleichtert die Orientierung, erhöht die Lesbarkeit und unterstützt das Textverständnis. 
• Motivation. Die Gestaltung muss den Lesenden Lust aufs Lesen machen. Ein Text in Leichter Sprache wird z. B. dann gerne gelesen, wenn die typografische Gestaltung die Textstruktur (= inhaltliche Logik) unterstützt und motivierende Gestaltungselemente enthält. Das können Initialen, Pfeile, Aufzählungspunkte, Linien und natürlich Farben sein. Aber Achtung: Nicht dekorieren, sondern strukturieren! 

Auch Bilder regen zum Lesen an. Damit Abbildungen in barrierefreien Texten gut verstanden werden, sollten sie sich auf die Lebenswirklichkeit der Zielgruppe beziehen. Dazu gehört, den kulturellen Hintergrund und die Altersstruktur der Zielgruppe zu berücksichtigen. Es ist wichtig, die gesellschaftliche Vielfalt sowohl auf der Sprach- als auch auf der Bildebene widerzuspiegeln. Text und Bild sollten so miteinander kombiniert werden, dass sie direkt aufeinander Bezug nehmen und einander ergänzen. Was inhaltlich zusammengehört, sollte nah beieinander stehen.  

Drei Themen verdienen in diesem Beitrag besondere Aufmerksamkeit, weil sie die Barrierefreiheit im digitalen Design dramatisch verbessern, aber auch zerstören können: Farbe, Kontrast und Live-Text. 

Wie Sie Ihre Website durch Farbe barrierefreier gestalten können

Designer verwenden Farbe oft, um eine Hierarchie und Differenzierung auf einer Website zu schaffen. Dies kann jedoch die Lesbarkeit für Menschen mit Sehbehinderungen, insbesondere Farbenblindheit, beeinträchtigen. Die neue DIN 33429 für barrierefreie Texte empfiehlt daher, dass „farbige Markierungen sparsam eingesetzt werden sollten. Sie eignen sich gut als Ergänzung zu anderen Auszeichnungen. Auf ein Aufeinandertreffen von Komplementärfarben sollte verzichtet werden, da diese optisches Flimmern verursachen und dadurch die Wahrnehmung erschwert wird.“ 

Mit anderen Worten: Es sollte nicht Farbe allein verwendet werden, um wichtige Sätze im Text zu kennzeichnen, um Anweisungen oder Aufforderungen zum Handeln hervorzuheben oder um anzuzeigen, dass eine Aktion abgeschlossen wurde (z. B. das Anklicken einer Schaltfläche).  

Stattdessen sollten Designer diese Probleme lösen, indem sie auf eine begrenzte Auswahl von Strichstärken, Größen und Stilen zurückgreifen und diese zurückhaltend einsetzen, um Überschriften, Anweisungen und Handlungsaufforderungen zu betonen. Ein anschauliches Praxisbeispiel für dieses Prinzip bietet die Website der Harvard Medical School. Wie man dort sieht, kann eine einzige, gut ausgebaute Schriftfamilie die ganze Vielfalt bieten, die man für eine barrierefreie Typografie benötigt.  

„Früher haben wir Farbe verwendet, um Hierarchien darzustellen“, sagt Marc Rust, Senior Creative Director bei Boston Interactive. „Heute verwenden wir eher die Schriftgröße statt der Farbe, sowohl um die Lesbarkeit zu gewährleisten als auch um die Erkenntnisse bezüglich der Barrierefreiheit zu berücksichtigen. Die Wahl der richtigen Schrift ist wichtiger denn je, um alle Menschen zu erreichen.“ 

Erfahrene Designer greifen für unterschiedliche Zwecke also zu verschiedenen Schriften und erzeugen so mehr Spannung und Lesemotivation. Es geht dabei nicht darum, dass die typografische Auszeichnung das einzige Instrument sein darf. Natürlich kann auch Farbe verwendet werden. Die DIN weist jedoch ausdrücklich darauf hin, dass Farbe nicht das einzige Unterscheidungsmerkmal in einem Text sein darf. 

Wie Kontrast Ihre Website zugänglicher macht

Ein weiteres wichtiges Element in Bezug auf die Barrierefreiheit ist der Kontrast, der mit der Farbe Hand in Hand geht. Das World Wide Web Consortium (W3C) hat ausführliche Richtlinien für den Umgang mit Kontrast veröffentlicht. Das erklärte Ziel dieser Richtlinien besteht darin, einen ausreichenden Kontrast zwischen Text und Hintergrund zu schaffen, damit er auch von Menschen mit mäßiger Sehkraft gut gelesen werden kann. 

Die empfohlenen Verhältnisse hängen von der Textgröße ab, wobei höhere Konformitätsbewertungen größere Verhältnisse erfordern. Es gibt auch eine Reihe von Online-Testseiten, auf denen Sie mit Text und Hintergrundfarben experimentieren können, um zu sehen, welches Verhältnis und welche Bewertung eine bestimmte Kombination ergeben würde. 

Auch auf die Leserlichkeit von Text hat das Thema Kontrast großen Einfluss. Vermeiden Sie es, Wörter oder sogar ganze Sätze in Großbuchstaben zu setzen, gerade bei kleineren Textgraden. Denn die gleichmäßige Buchstabenhöhe eines solchen Versaliensatzes erschwert es Menschen mit Sehbehinderungen, diesen „Buchstabenbalken“ überhaupt als Text zu identifizieren oder einzelne Buchstaben darin zu erkennen.  

„Vor allem bei Lesetexten sind Wörter in Großbuchstaben für Menschen mit Sehbehinderung nicht lesbar“, sagt Marc Rust, Senior Creative Director bei Boston Interactive. „Sie sehen es nur als einen Block. Unter 12 Punkt sollte man überhaupt keinen Versalientext verwenden.“ 

Wenn überhaupt sollten Großbuchstaben nur in großen Headlines verwendet werden. Doch selbst Überschriften sehen besser in gemischter Schreibweise aus. 

Schriftentwerfer sprechen auch vom Kontrast einer ganzen Schrift, und zwar dann, wenn sie deren Strichstärkenunterschiede unter die Lupe nehmen. So zeichnen sich klassizistische Antiqua-Schriften wie z. B. Bodoni durch einen sehr starken Kontrast aus, was primär an den hauchdünnen Serifen liegt. Slab-Schriften hingegen, die kräftige Serifen aufweisen, haben meist einen geringen Kontrast. Ihre voluminöse Bauweise trägt jedoch nicht unbedingt dazu bei, dass sie gut lesbar sind. Außerdem benötigen Slab-Serifs viel Raum. Die Faustregel lautet: Je geringer der Kontrast einer Schrift, umso stabiler und lesbarer erweist sie sich bei kritischen Darstellungssituationen wie niedrig aufgelöster Bildschirm oder Druck. Achten Sie daher auf einfache Schriften mit offenen Innenräumen, einer großen Mittellänge (x-Höhe) und unverwechselbaren Buchstabenformen. 

Die Wahl der richtigen Schrift ist also von entscheidender Bedeutung. Gleichwohl spricht die neue DIN 33429 keine konkreten Empfehlungen aus: „Für Lesetext in Leichter Sprache sollten die Anforderungen aus DIN 1450 berücksichtigt werden: Es sollten keine kursiven, besonders schmalen, breiten, mageren oder fetten Schriften zum Einsatz kommen, außer bei Auszeichnungen.“ Designer überrascht das nicht, denn sie wissen, dass bei diesem Thema ein hohes Maß an Subjektivität im Spiel ist. „Die Wahl der richtigen Schrift ist keine Wissenschaft“, sagt Rust. „Es ist eher eine künstlerische Angelegenheit.“ 

Für Lesegeräte unverzichtbar: Live- und Alt-Texte

Das World Wide Web Consortium legt Wert darauf, dass Menschen beim Besuch einer Website Screenreader (z. B. JAWS von Freedom Scientific oder VoiceOver von Apple) oder andere Hilfsmittel verwenden können. Damit das funktioniert, sollten Sie Live-Text anstelle von Gif-Text verwenden. 

Für Uneingeweihte: Live-Text bedeutet, dass der Text in die Website kodiert wurde. Live-Text auf Websites kann somit, wie Text in einem Word-Dokument, markiert, kopiert und eingefügt werden. Der größte Teil der Texte auf modernen Websites, insbesondere der Fließtext (wie dieser Artikel), ist Live-Text. 

Text kann aber auch in Bildern „eingefroren“ werden (Gif-Text). Dies ist heute kaum noch üblich, allenfalls für verschnörkelte Überschriften oder „dekorative“ Buttons, deren ungestörte Wiedergabe im Browser geschützt werden soll. Das Problem mit Blick auf die Barrierefreiheit ist, dass Screenreader und andere auditive Geräte solchen Gif-Text, also Text in einem Bild, nicht vorlesen können. Daher empfehlen DIN und W3C, dass für die Übermittlung von Informationen immer Live-Text verwendet werden sollte. Gif-Text ist nur als „reine Dekoration“ zulässig oder „wenn eine bestimmte Textdarstellung für die zu vermittelnde Information wesentlich ist“. Selbst dann sollten sie aber immer mit einem beschreibenden Live-Alt-Text ergänzt werden, damit blinde und sehbehinderte Menschen sich den Inhalt der Abbildungen vorlesen lassen können. 

Die Verwendung von Live-Text ermöglicht auch die störungsfreie Skalierung des Textes. Gemäß den W3C-Richtlinien sollte die Größe von Text „ohne unterstützende Technologie bis zu 200 Prozent ohne Verlust von Inhalt oder Funktionalität“ geändert werden können. Diese Art von Benutzerfreundlichkeit ist bei Mobile-First-Design längst Standard, weil die Voreinstellungen der Betriebssysteme der Smartphones diese Funktion unterstützen. 

„Ein Mobile-First-Ansatz ist ein guter Weg, um Text zu begutachten“, sagt Marc Rust, Senior Creative Director bei Boston Interactive. „Denken Sie daran, wie der Text verwendet wird, und nicht an die Größe des Dokuments und ob es auf dem Handy, dem Desktop oder einem anderen Format erscheint. Text sollte als eine reaktionsfähige Komponente betrachtet werden, die sich den Bedürfnissen des Nutzers anpasst.“ 

Die Balance zwischen Form und Funktion

Die Empfehlungen von DIN und W3C sind zwar in sehr detaillierter Weise ausgearbeitet und können auf den ersten Blick überwältigend wirken. Tatsächlich handelt es sich bei vielen Vorgaben aber um solide, benutzerfreundliche Designpraktiken. Zudem sind viele der angesprochenen Themen – man denke nur an den Kontrast – Selbstverständlichkeiten, die Designer ohnehin anwenden, wenn auch nicht in dem hier geforderten Maße. 

Dennoch ist es wichtig, über die richtigen Tools zu verfügen, wenn Sie ein Gleichgewicht zwischen Barrierefreiheit und markengerechtem Design herstellen wollen. Einer dieser Bausteine sollte eine robuste Schriftbibliothek sein, die eine Reihe von gut lesbaren Fonts in verschiedenen Stilen bietet. Zwar werden von DIN und W3C keine konkreten Schriften empfohlen; die Richtlinien können Ihnen aber dabei helfen, Fonts zu finden, die die genannten Ziele erfüllen. Mit einer gut ausgebauten Bibliothek mit soliden Optionen für Web-Fonts sind Sie auf dem besten Weg, um barrierefreie Web-Designs zu entwickeln, die Ihre Kunden zu schätzen wissen.