Nach oben
Informationen und Zusammenspiel
Textgestaltung
Semantische Strukturierung
Barrierefreie Elemente
Überprüfung auf Barrierefreiheit
Hilfreiche Tools
Kontakt
Barrierefreie Webseiten / Barrierefreie Inhalte

Barrierefreie Inhalte:

Barrierefreie Webseiten sind ohne bewusste Redaktion nicht möglich. Inhalte müssen so organisiert sein, dass sie von Menschen mit kognitiven Störungen leichter verarbeitet werden können. Wenn es einfach ist, eine Vorstellung darüber zu gewinnen, wie eine bestimmte Information zu finden ist, und die Aufbau der Website verständlich ist, ist das ganz grundsätzlich hilfreich.

Informationen und Zusammenspiel

Informationsverteilung

Die Unterseiten

Eine einzelne Unterseite muss für sich selbst genommen funktionieren und eine geschlossene Informationseinheit bilden.

Das Zusammenspiel

Websites haben verteilte, aber zusammenhängende Informationen. Es muss klar werden, was zusammengehört und was gegeneinander abgegrenzt werden muss.

Intelligente Redundanz

Eine Information, die an einer Stelle der Website behandelt wurde, wird auf einer anderen Seite anders formuliert wiederholt, wenn sie in diesem neuen Zusammenhang wichtig ist.

Zugängliche Texte

Texte zugänglich machen

Typografie

Lesbarkeit hängt von der Typografie ab: Schriftart und Formatierung, Abstände von Buchstaben, Worten, Zeilen, Absätzen, Text – und Hintergrundfarbe.

  • Für Sehbehinderte und Leseschwache sind generell serifenfreie Schriften besser lesbar. Serifenschriften sind auf Bildschirmen mit geringer Auflösung schlechter lesbar, sie sind bei gleichem Schriftgrad auch kleiner als serifenfreie Schriften.
  • Es empfiehlt sich der Einsatz einer möglichst für viele Menschen gut lesbaren Schrift. Siehe hier z. B. die freie Atkinson Hyperlegible™. Eine  Schrift vom Braille Institute.
  • Bei einer Serifenschrift sollte eine Schrift gewählen werden, bei der die Zeichen deutlich voneinander unterschieden werden können. Si sollten nur für größere Schriftgrad verwendet werden. Als Seitentitel und große Überschriften sind Serifenschriften einsetzbar.
  • Der Zeichenabstand darf nicht zu klein sein. Zeichen müssen sich gut voneinander abgrenzen und dennoch darf der Abstand nicht zu weit sein, damit ein Wort als Einheit immer gut zu erkennen ist.
  • Der Text muss auf 200% vergrößerbar/zoombar sein, ohne dass dabei Funktionalität oder Inhalt verloren geht. Um die höchstmögliche Zugänglichkeit (Stufe AAA) zu erreichen, muss Text auf 200% lesbar sein, ohne horizontal scrollen zu müssen.

Textsatz und Textfluss

Für Lesbarkeit und Orientierung auf der Webseite ist im Fließtext linksbündig gesetzter Text optimal. Auch die unterschiedliche Länge der Absätze erleichtert dem Auge die Orientierung.

  • Empfohlen wird eine Zeilenlänge zwischen 50 und 60 Zeichen.
  • Absätze sollten nicht zu lang werden, mehr als drei oder vier Sätze sollte ein Absatz nicht umfassen. Wichtig sind hier die Durchschnittswerte für Sätze und Wörter. Gut sind nicht mehr als 5 Sätze pro Absatz und nicht mehr als 20 Wörter pro Satz. Grobe Faustregel: die Länge eines Absatzes sollte möglichst zehn Zeilen nicht überschreiten, nach spätestens fünf Absätzen sollte eine Zwischenüberschrift eingefügt werden, aber nur dann, wenn tatsächlich auch logisch ein neuer Abschnitt beginnt.
  • Zusammenhängende Texte sollte nicht über mehrere Spalten laufen.
  • Absätze, Listen, Bilder und andere Inhalte bilden Orientierungspunkte und erleichtern damit das Wiederfinden verlorener Textstellen und die Orientierung in längeren Texten.

Formatierung

Es ist gut mit Formatierungen und Hervorhebungen sparsam umzugehen. Kursive Schrift, Großbuchstaben und Unterstreichungen verschlechtern in die Lesbarkeit von Texten.
‍
Genauso verhält es sich mit Effekten wie z.B. Schatten. Solche Effekte sollten nur für sehr kurze Texte eingesetzt werden. Wenn etwas hervorgehoben werden soll, am besten durch fett gesetzte Texte.

Semantik

Semantische Strukturierung

Auch Inhalte sollten gut strukturiert werden, indem Absätze als Absätze (<p>) Überschriften als Überschriften (<h1>-<h6>), Listen mit einem der verschiedenen Listentypen (<ol>,<ul>) usw. mit den entsprechenden HTML-Attributen gekennzeichnet werden. Auch ist es wichtig, Buttons und Links zu unterscheiden: Ein Button löst eine Aktion aus, ein Link führt immer wohin.
Ein nützliches Webinar "Barriererfreies Internet - Texte, Bilder, Videos", das sich auch mit der Strukturierung von Textinhalten beschäftigt, gibt es beim BIK (Barrierefrei informieren und kommunizieren").

Barrierefreie Elemente

Einzelne Elemente

Eine kurze Übersicht über die Elemente, die man bei der Inhaltserstellung besonders beachten sollte.

  • Überschriften: sie sollten aussagekräftig sein und die richtige Struktur haben, ohne eine Hierarchie-Ebene zu überspringen (h1 - h6). Mehr dazu auf der Seite Barrierefrei gestalten.
  • Links: Sprechende Linktexte, keine gleichen Linktexte zu unterschiedlichen Zielen. Dafür keine generische Worte wie z. B. "mehr" benutzen. Keine URLs als Link-Text und nicht ohne entsprechenden Hinweise Videos oder ein pdf verlinken. Links im selben Fenster öffnen und eindeutig erkennbar machen. Links nur für Links und nicht für Funktionen (Buttons) verwenden.
  • Verlinkte Bilder: die Empfehlung ist, diesen Fall zu vermeiden. Bei einem Bild wird das alt-Attribut (der alternative Text) der Linktext sein. Dabei gibt es folgende Schwierigkeiten:
    ‍
    1) Das alt-Attribut beschreibt das Bild: der Linktext wird die Beschreibung des Bildes, was oft keinen Sinn macht.
    ‍
    2) Ist kein alt-Attribut vergeben, wird der Dateiname wird zum Linktext.
    ‍
    3) Leeres alt-Attribut: der Link hat keinen Linktext und wird als “Link” vorgelesen. In diesem Fall muss dem umgebenden Link ein aria-label geben werden.

    ‍Der beste Kompromiss ist das Linkziel als alternativen Text anzugeben. Wenn das Bild zu einem Beitrag über das Handbuch des Barrierefreiheit-Teams linkt, sollte der alternative Text des Bildes lauten: “Handbuch des Barrierefreiheit-Teams“. Bei einem verlinkten Logo bietet es sich an, als alt-Text „Logo“ und den Namen der z. B. Firma zu nennen und im Aria-Label das Linkziel, z. B. "Zur Startseite".
  • Aria-label: Aria-labels sollten immer dort zum Einsatz kommen, wo der Text des Links nicht eindeutig ist, oder wo es keinen Linktext gibt (z. B. verlinkte Grafik oder Icon). Wenn es einen eindeutigen Linktext gibt, sollte kein aria-label vergeben werden.
  • Bilder und Grafiken: Wichtig sind gute Alternativ-Texte, die beschreiben was zu sehen ist. Es muss außerdem beurteilt werden, ob man einen Alternativtext braucht. Eine gute Entscheidungshilfe bietet die Website „Alt-decision-tree“).
  • Audio und Video: Video-Inhalte sollten Captions haben, Audio-Deskriptionen und Text-Alternativen, sowie evtl. ein zusätzliches Video in Gebärdensprache enthalten. Audio-Inhalte sollten ein Text-Transkript dabeihaben.
Überprüfung auf Barrierefreiheit

Überprüfung auf Barrierefreiheit

Es ist wichtig, Zeit für Qualitätssicherung und erneute Überprüfungen einzuplanen. Hier ein paar Vorgehensweisen dafür:

Navigation per Tabulator-Taste testen

Eine Webseite sollte komplett per Tastatur bedienbar sein, ohne die Hilfe einer Maus. Dazu ruft man die Seite auf und benutzt die Tab-Taste (Tabulator-Taste) um sich durch die Seite zu bewegen. Darauf sollte man besonders auf folgendes achten:

Mit Screenreadern testen

Man sollte  die Webseite auf jeden Fall mit einem der gängigen Screenreader testen. Sowohl auf Desktop als auch auf einem Mobilgerät. Bei Mac OS und iOS ist der Screenreader VoiceOver schon integriert, bei Android-Geräten der Screenreader TalkBack. Auf Windows-Computern muss ein Screenreader installiert werden. Hier kann z.B, der kostenlose NVDA Screenreader verwendet werden.

Überprüfen der Label

Interaktive Elemente wie Buttons und Links und Label bei Formularen müssen einzigartig und beschreibend sein. Das heißt, sie dürfen nur einmal auf der Seite vorkommen und müssen aussagekräftig sein. Manche Benutzer ziehen es vor eine Seite zu Navigieren, indem alle Links mit einem Screenreader vorgelesen werden. Deshalb sollte eine Linkbezeichnung niemals „hier klicken“ oder „mehr“ lauten.

Verlinkungen überprüfen

Man sollte auf der Webseite alle Links überprüfen, auf Aktualität und ob sie ein neues Fenster / einen neuen Tab öffnen. Wenn sie das tun, sollte man im Text darauf hinweisen. Wenn es Verlinkungen auf Dateien gibt und man möchte eine Verlinkung entfernen, sollte auch die Datei gelöscht werden, nicht nur die Verlinkung.

Vier-Augen-Prinzip

  • Inhalte, die man selbst erstellt hat, sollte immer noch jemand anders kritisch prüfen
  • Die Person sollte wissen, nach welchen Problemen sie Ausschau halten sollte
  • Man selbst sollte das auch bei anderen tun, um den Blick für kleinere und größere Probleme zu schärfen
Hilfreiche Tools

Hilfreiche Tools und mehr Info

Du hast Fragen oder brauchst Unterstützung?

Wir helfen

Wenn du Unterstützung brauchst oder Fragen hast, schreib uns. Wir nehmen uns gerne Zeit für dich.

Schreib uns