Gliederung mit Überschriften

Zur besseren Orientierung lässt sich ein Text nicht nur durch Absätze gliedern, sondern auch durch Überschriften.  Hier sollte man aber auf eine rein optische Gestaltung durch fette Formatierung, eine andere Schriftgröße oder durch unterschiedliche Farben verzichten. Für eine technisch korrekte Kennzeichnung von Überschriften werden in HTML sogenannte h-Tags eingesetzt.
Die h-Tags werden in hierarchisch absteigender Reihenfolge angewendet. Die wichtigste und prominenteste Überschrift ist häufig der Seitentitel, der mit h1 gekennzeichnet wird. Im weiteren Text fährt man mit h2-Überschriften und h3/h4 für Zwischenüberschriften fort. Eine Gliederung ist bis h6 möglich. Das Schema ist wie folgt:

<h1>Seitentitel 1</h1>
<h2>Überschrift 2</h2>
<h3>Zwischenüberschrift 3</h3>
<h4>Zwischenüberschrift 4</h4>
<h5>Zwischenüberschrift 5</h5>
<h6>Zwischenüberschrift 6</h6>

Eine solche technisch korrekte Textgliederung durch Überschriften erleichtert nicht nur NutzerInnen von Screenreadern die Orientierung, sondern wird auch für die Suchmaschinenoptimierung (SEO) eingesetzt. So platziert Google korrekt ausgezeichnete Webseiten entsprechend höher im Ranking der Suchergebnisse.

Für Screenreader-NutzerInnen besonders wichtige semantische Strukturen in Web-Inhalten sind u.a.:

• Überschriften
• Paragraphen
• Listen
• Tabellen
• Bedienelemente (Links, Schalter ect.)

Tipp: In Moodle lässt sich komfortabel und ohne manuelle Eingabe des h-Tags eine 3-stufige Formatierung vornehmen. Der Moodle Atto Editor bietet hierzu die «Absatzformate» Überschrift (gross), Überschrift (mittel), Überschrift (klein) an.

Textformatierung und Schriftgrössen

Eine angemessene Textgrösse erleichtert den Lesefluss. Das W3C empfiehlt eine Grösse von 16px bzw. 1em für regulären Text. Überschriften können entsprechend ihrer Hierarchie (h1 bis h6) davon abweichen und grösser dargestellt werden. Da die meisten Browser die Möglichkeit bieten, die Darstellung einer Website in ihrer Grösse anzupassen (100%, 125%, 150% usw.), können NutzerInnen allerdings auch selbst entscheiden, ob sie den Text einer Seite für sich vergrössern möchten.

Überschriften, Kapitel und Abschnitte sollen nicht mit Farben oder durch «Grösser» und «Fett» hervorgehoben werden, sondern anhand der vorgegebenen Formatierungen für Überschriften.  Mit dem Moodle Atto Editor lassen sich ebenso Vertonungen der Texte mit wenigen Klicks einfügen. Sie ermöglichen den Lernenden somit den auditiven Zugang zu Ihren Lehrinhalten und verbessern gleichzeitig die Zugänglichkeit.

Tipp: Listen werden am besten mit dem Atto Editor Listenelement (geordnet oder ungeordnet) eingefügt. Screenreader werden die Auszeichnung der Listenelemente nur erkennen, wenn sie entsprechend formatiert sind. Nummerierungen 1. und 2. oder - am Zeilenanfang selbst zu setzen, hindert den Screenreader, Aufzählungen als solche zu erkennen.

Kennzeichnung von Links

Für zusätzliche Informationen bietet es sich an, auf weitere Inhalte auf der eigenen Website zu verlinken oder auch auf externe Websites. In einem Text werden häufig auch weitere Inhalte, entweder von der eigenen oder einer externen Webseite referenziert. Links sollten daher entsprechend gekennzeichnet werden. Es erleichtert den Lesefluss, wenn nicht die tatsächliche Internetadresse im Text auftaucht, sondern wenn die URL mit einem beschreibenden Text verbunden wird. Statt also https://… auszuschreiben oder die Linkadresse mit nichtssagenden Worten wie „Hier klicken“ zu verbinden, sollte eine aussagekräftige Wortgruppe als Ausgang eines Links gewählt werden.

Um Links nicht nur technisch sichtbar zu machen, sollte sich ein Link auch vom übrigen Text optisch abheben. Dies sollte durch die Gestaltung in einer gut lesbaren Kontrastfarbe erfolgen sowie durch eine Kennzeichnung eines Links als unterstrichener Text. Menschen mit Schwierigkeiten in der Farbwahrnehmung können die Kontrastfarbe nämlich möglicherweise nicht erkennen; sie benötigen zusätzlich die Unterstreichung zur Orientierung. Um Verwirrung zu vermeiden, sollte aus diesem Grund aber auch nur Text unterstrichen werden, bei dem es sich um einen echten Link handelt.

Tipp: In Moodle werden die Links automatisch entsprechend des verwendeten Themes der Seite gekennzeichnet.

Nutzung von Farben

Farben sollten auf einer barrierefreien Website immer kontrastreich eingesetzt werden. Dabei spielt es keine Rolle, ob ein heller Hintergrund mit einer dunklen Schrift bevorzugt wird oder ein dunkler Hintergrund mit einer hellen Schrift. Wichtig ist, dass der Kontrast so deutlich ist, dass die Schrift leicht lesbar ist. Dies gilt besonders auch dann, wenn Schrift auf einem Bildhintergrund eingesetzt wird. Hier sollte das Bild mit einem hellen oder einem dunklen Farblayer überlagert werden, um eine kontrastfarbige Schrift besser lesbar zu gestalten.

Auf einer kontrastreich gestalteten Seite gehen keine Informationen verloren und Barrieren wie eine Sehbehinderung, Gegenlicht oder ein schlecht eingestellter Bildschirm können vermieden werden. Ein Kompromiss mit dem Design kann in diesem Fall schwierig oder unmöglich werden. Für diese Fälle gibt es für die meisten Systeme Plugins, welche Farben zu schwarz-weiss verwandeln oder die Seite farblich invertieren.

Hilfreiche Tools dazu:

• tanaguru contrast finder
• Colour contrast analyser

Alternativtext bei Bildern

Die Screenreader können zwar Text interpretieren, aber keine Bilder bzw. Grafiken wie z.B. Icons. Damit Menschen mit Sehbehinderung dennoch den Inhalt erfassen können, gibt es in den gängigen Content Management Systemen (CMS, z.B. WordPress) und Learning Management Systemen (LMS, z.B. Moodle) die Möglichkeit einen Alternativ-Text einzugeben. Bei Moodle findet man diese Option beim Hochladen eines Bildes.

Die wichtigsten Informationen sollten immer im Fliesstext stehen und nicht in Form eines Bildes eingebaut werden.

Bei Bildern, die nur eine schmückende und keine informative Funktion haben, wird eine Kombination aus Bildbeschreibung und einem Bezug zum Inhalt des Artikels empfohlen. Ein anschließender, ergänzender Satz schafft eine Verbindung zum Inhalt.