Inhalte technisch korrekt strukturieren

Entscheidend ist nicht nur die Darstellung, sondern die zugrunde liegende Logik der Materialien.

Im Editor TinyMCE lassen sich Kursinhalte schnell erstellen und formatieren. Für barrierearme Informationen ist dabei wichtig, dass diese Formatierungen auch technisch korrekt umgesetzt sind. Überschriften, Absätze und Listen sollten deshalb nicht nur optisch hervorgehoben werden, sondern als entsprechende Elemente angelegt sein. So wird die Bedeutung eines Inhalts eindeutig beschrieben. Gleichzeitig verbessert dies die Orientierung und Lesbarkeit.

Auch bei der Weiterverarbeitung, etwa beim Export, in anderen Systemen oder durch KI gestützte Funktionen, spielt diese saubere Auszeichnung eine zentrale Rolle. Informationen bleiben dadurch robuster, verständlicher und vielseitig nutzbar.

Überschriften strukturieren Inhalte und erleichtern die Orientierung.

Ein Text lässt sich nicht nur durch Absätze gliedern, sondern auch durch Überschriften. Auf eine rein optische Gestaltung durch fett, grösser oder farbig sollte dabei verzichtet werden. Für eine technisch korrekte Kennzeichnung werden in HTML sogenannte h Tags verwendet. Diese h Tags bilden eine hierarchische Gliederung. Die wichtigste Überschrift ist in der Regel der Seitentitel mit h1. Danach folgen h2 für Hauptabschnitte und h3 bis h6 für weitere Untergliederungen.

Die Reihenfolge sollte logisch und ohne Sprünge erfolgen. Eine h3 sollte beispielsweise nicht direkt auf eine h1 folgen. Eine konsistente Hierarchie erleichtert die Orientierung, sowohl für Lesende als auch für Screenreader.

Beispiel für eine Hierarchie

Tipp:

In Moodle kann im Editor TinyMCE ohne direkte Eingabe von HTML gearbeitet werden. Überschriften lassen sich über die Formatvorlagen auswählen und direkt auf Textabschnitte anwenden.
Im Auswahlmenü stehen die Ebenen h3 bis h6 zur Verfügung, da h1 und h2 systemseitig verwendet werden. Die gewählte Ebene bestimmt die Position innerhalb der Gliederung und sollte entsprechend der inhaltlichen Hierarchie eingesetzt werden.

Lesbarkeit entsteht durch normgerechte und semantisch korrekte Formatierung.

Eine geeignete Schriftgrösse ist die Grundlage für gut lesbare Inhalte. Für Fliesstext gilt eine Basisgrösse von etwa 16 px beziehungsweise 1 em als etablierte Praxis im Web. Die Web Content Accessibility Guidelines machen keine Vorgaben zur konkreten Schriftgrösse, fordern jedoch, dass Inhalte ohne Funktionsverlust vergrössert werden können.

Strukturelle Elemente wie Überschriften, Absätze oder Hervorhebungen dürfen nicht ausschliesslich visuell umgesetzt werden. Eine grössere oder fett dargestellte Schrift ersetzt keine semantische Auszeichnung. Stattdessen sind die vorgesehenen Formatierungen zu verwenden, damit die inhaltliche Bedeutung technisch eindeutig erkennbar bleibt und von Assistenztechnologien korrekt interpretiert werden kann.

Auch Listen müssen als semantische Listen ausgezeichnet werden. Screenreader erkennen Aufzählungen und Nummerierungen nur dann zuverlässig, wenn sie mit den entsprechenden HTML Strukturen angelegt sind. Manuell gesetzte Zeichen wie Bindestriche oder Zahlen werden nicht als zusammengehörige Elemente interpretiert.

Tipp:

Listen werden im Editor TinyMCE durch Klick auf die entsprechenden Buttons als geordnete oder ungeordnete Liste eingefügt. Manuelle Nummerierungen oder Bindestriche mit Leerzeichen werden nicht korrekt erkannt.

Tabellen sind nur dann sinnvoll, wenn Informationen tatsächlich in Zeilen und Spalten organisiert sind.

Tabellen eignen sich für echte tabellarische Daten, etwa für Übersichten, Vergleiche, Zeitpläne oder Auswertungen. Sie sollten nicht verwendet werden, um Inhalte optisch anzuordnen oder mehrspaltige Layouts nachzubauen. Solche Konstruktionen erschweren die Orientierung und werden von Assistenztechnologien oft missverständlich ausgegeben.

Damit Tabellen verständlich bleiben, müssen Spalten und gegebenenfalls auch Zeilen klar beschriftet sein. Screenreader lesen Tabellen nicht wie ein sichtbares Gesamtbild, sondern Zelle für Zelle. Deshalb ist es wichtig, dass Tabellenüberschriften technisch korrekt ausgezeichnet sind und der Zusammenhang zwischen Überschrift und Datenzelle nachvollziehbar bleibt.

Tabellen sollten möglichst einfach aufgebaut sein. Verschachtelte Tabellen, zusammengeführte Zellen oder rein visuelle Strukturierungen erschweren das Lesen und die technische Interpretation. Wenn Inhalte nicht wirklich tabellarisch sind, ist meist eine Liste oder eine Folge von Absätzen die bessere Lösung.

Links müssen eindeutig beschreiben, wohin sie führen.

Statt ausgeschriebener URLs sollte ein beschreibender Linktext verwendet werden. Der Linktext muss den Zweck des Links verständlich machen, auch ohne zusätzlichen Kontext.

Beispiele aus der Praxis

• Ungenügend: „Hier klicken“ | Gut: „Analyse herunterladen“
• Ungenügend: „Mehr“ | Gut: „Alle Veranstaltungen im Kalender anzeigen“

Diese Anforderung entspricht dem WCAG Erfolgskriterium 2.4.4 Link Purpose in Context. Screenreader können sich alle Links einer Seite auflisten lassen. Nur aussagekräftige Linktexte ermöglichen dabei eine zielgerichtete Navigation.

Werden mehrere identische Links verwendet, müssen sie entweder zum gleichen Ziel führen oder eindeutig unterschieden werden. Unterschiedliche Ziele mit identischem Linktext führen zu Orientierungslosigkeit.

Öffnet ein Link ein neues Tab oder Fenster, muss dies angekündigt werden. Andernfalls entsteht ein unerwarteter Kontextwechsel. Wenn der sichtbare Linktext bewusst kurz gehalten wird, kann zusätzlicher Kontext technisch ergänzt werden, zum Beispiel mit einer visuell versteckten Klasse im HTML.

Beispiel

Der Zusatz „öffnet in neuem Tab“ ist visuell nicht sichtbar, wird aber von Screenreadern vorgelesen. So bleibt die Oberfläche kompakt, während der Link vollständig verständlich ist.

Bilder benötigen eine Textalternative, wenn sie Informationen vermitteln.

Screenreader können Bilder nicht interpretieren. Damit Inhalte dennoch zugänglich sind, wird ein Alternativtext verwendet, der die inhaltliche Aussage eines Bildes beschreibt. In Moodle kann beim Einfügen eines Bildes festgelegt werden, ob es sich um ein inhaltlich relevantes oder ein dekoratives Bild handelt.

Inhaltlich relevante Bilder benötigen einen Alternativtext. Dekorative Bilder dienen ausschliesslich der Gestaltung und werden mit leerem Alternativtext versehen, sodass sie von Screenreadern übersprungen werden.

Der Alternativtext sollte die zentrale Aussage eines Bildes knapp und präzise wiedergeben. Dabei geht es nicht um eine vollständige Beschreibung, sondern um die Information, die für das Verständnis notwendig ist. Gleichzeitig sollten wichtige Inhalte nicht ausschliesslich über Bilder vermittelt werden, sondern immer auch im Text vorhanden sein.

Beispiele

• Ungenügend: „Bild“ oder „Grafik“
• Ungenügend: „Diagramm mit Balken“
• Gut: „Balkendiagramm zeigt steigende Teilnahmezahlen von 2022 bis 2025“

In Moodle werden Alternativtexte über den Editor eingegeben. Bei individuell eingebettetem HTML sollte überprüft werden, ob das alt Attribut korrekt gesetzt ist.

Farbe darf Inhalte unterstützen, aber nicht allein Bedeutung tragen.

Informationen sollten nicht ausschliesslich über Farbe vermittelt werden. Hinweise wie z.B. «aktiv», «wichtig», «korrekt» oder «fehlerhaft» müssen zusätzlich durch Text, Symbole oder eine klare Beschriftung erkennbar sein.

Für Inhalte in Moodle sollten die Farben aus dem Brand-Hub öffnet im neuenTab verwendet werden. Diese sind abgestimmt und geprüft. Entscheidend bleibt trotzdem, Farbe gezielt und zurückhaltend einzusetzen.

Auch bei grafischen Hervorhebungen gilt: Gute Lesbarkeit entsteht nicht durch mehr Farbe, sondern durch klare Hierarchie, ausreichend Abstand und verständliche Bezeichnungen.

Alle interaktiven Elemente müssen ohne Maus bedienbar sein.

Viele Nutzende verwenden ausschliesslich die Tastatur oder assistive Eingabegeräte. Links, Schaltflächen, Formulare und Navigationselemente müssen deshalb vollständig per Tastatur erreichbar und nutzbar sein.

Funktionen dürfen nicht nur über Mausaktionen wie Klick oder Hover funktionieren. Ebenso wichtig ist, dass keine Fokusfallen entstehen und die Navigation jederzeit vorwärts und rückwärts möglich bleibt. Bei umfangreichen Seiten können Sprunglinks zusätzlich helfen, direkt zum Hauptinhalt zu gelangen und die Orientierung zu verbessern.

Der Tastaturfokus zeigt, welches Element aktuell aktiv ist.

Beim Navigieren mit der Tastatur wird der Fokus schrittweise auf interaktive Elemente gesetzt. Dieser muss jederzeit sichtbar sein, damit klar erkennbar bleibt, wo sich die Navigation befindet. Wird der Fokus entfernt oder visuell abgeschwächt, geht die Orientierung verloren.

Ebenso wichtig ist eine logische Reihenfolge. Der Fokus sollte der inhaltlichen Struktur folgen und nicht dem rein visuellen Layout.

ARIA ergänzt die Bedeutung von Elementen, ersetzt sie aber nicht.

WAI ARIA stellt zusätzliche Attribute zur Verfügung, um Inhalte für assistive Technologien verständlicher zu machen, etwa aria-label, aria-describedby oder aria-expanded.

In den meisten Fällen ist jedoch korrektes HTML ausreichend, da Elemente wie Überschriften, Listen, Links oder Buttons bereits eine klare semantische Bedeutung besitzen. ARIA sollte nur eingesetzt werden, wenn diese Informationen nicht ausreichen oder gezielt ergänzt werden müssen.

Falsch eingesetztes ARIA kann bestehende Semantik überschreiben und die Zugänglichkeit verschlechtern.

Beispiele

Inhalte sollten nicht direkt aus Word oder anderen Programmen übernommen werden.

Beim Kopieren wird zusätzlicher, nicht sichtbarer Formatierungscode eingefügt, der die technische Qualität der Inhalte beeinträchtigt. Die Darstellung wirkt zwar korrekt, die zugrunde liegende Struktur ist jedoch häufig fehlerhaft.

Überschriften, Listen und Absätze werden nicht zuverlässig als solche erkannt, wodurch Assistenztechnologien wie Screenreader Inhalte nur eingeschränkt interpretieren können.

Inhalte sollten deshalb direkt im Moodle Editor erstellt oder nach dem Einfügen bewusst bereinigt werden. Erst durch eine saubere, editorbasierte Auszeichnung bleibt die Struktur erhalten und Inhalte werden korrekt verarbeitet.