Barrierefreiheit ist vor allem Struktur
Website Styleguide
Beim Aufbau von Layouts spielen heute nicht nur optische Aspekte eine Rolle – ebenso wichtig ist die Barrierefreiheit. Damit Inhalte für alle Menschen verständlich und nutzbar sind, müssen Inhalte klar strukturiert werden. Ein wesentlicher Bestandteil ist dabei die richtige Reihenfolge der Überschriften. Jede Seite benötigt zuerst eine eindeutige Hauptüberschrift (H1), die das Thema der Seite beschreibt. Darunter folgen Abschnittsüberschriften der Ebene H2, anschließend – falls nötig – weitere Unterebenen wie H3 oder H4. Diese Reihenfolge darf nicht übersprungen werden, da Screenreader und andere Hilfsmittel diese Struktur nutzen, um Besucherinnen und Besuchern eine Orientierung zu geben. Eine saubere Hierarchie verbessert somit nicht nur die Lesbarkeit, sondern stellt sicher, dass alle Inhalte barrierefrei zugänglich bleiben.
Überschriften
Beispiel für eine saubere Überschriftenstruktur
- H1: Titel der Seite
Beschreibt eindeutig das Hauptthema der gesamten Seite.
Danach folgt in der Regel ein Vortext als Einleitung - H2: Erster inhaltlicher Abschnitt
Einführung in ein Unterthema. - H3: Unterpunkt innerhalb des Abschnitts
Dient der weiteren thematischen Vertiefung. - H2: Zweiter inhaltlicher Abschnitt
Neues Unterthema auf gleicher Ebene wie der vorige H2-Bereich.
Kurze Checkliste
- Gibt es genau **eine** H1?
- Beginnen alle Inhalte logisch mit H2, nicht mit H3 oder H4?
- Sind die Hierarchie-Ebenen in der richtigen Reihenfolge (ohne Sprünge)?
- Beschreiben Überschriften klar, worum es im folgenden Absatz geht?
- Bleibt die Struktur auch bei komplexeren Seiten nachvollziehbar?
Praxisregel für Redakteur:innen:
H1 ist der Seitentitel, H2 strukturiert die Hauptabschnitte, H3 untergliedert diese weiter.
Verlinkungen
Links sollten stets eindeutig und verständlich benannt werden, damit Nutzerinnen und Nutzer sofort erkennen, wohin sie führen. Verlinke daher niemals nur Wörter wie „hier“ oder „mehr“, da sie keinen Hinweis auf den Zielinhalt geben. Stattdessen sollte der Linktext den Inhalt beschreiben, zum Beispiel „Formular zur Anmeldung“ oder „Leitfaden für Bildnutzung“.
Weiterführende Inhalte – etwa Unterseiten oder Aktionen – werden idealerweise als gut sichtbare Buttons oder als separate Linkelemente dargestellt.
Im Fließtext sollten ausschließlich echte Querverweise gesetzt werden, also Links, die direkt zum Verständnis des aktuellen Inhalts beitragen.
Dateien wie PDFs werden nicht im Text versteckt verlinkt. Stattdessen sollten sie als klar gekennzeichnete Dateilinks oder in Form einer Dateiliste am Ende eines Textabschnitts bereitgestellt werden. Das erhöht die Übersichtlichkeit und hilft Nutzerinnen und Nutzern, schnell zu erkennen, was heruntergeladen wird.
Goldene Regeln für Links
- Links müssen verständlich sein.
Der Linktext beschreibt immer klar das Ziel des Links. - Keine leeren Begriffe verwenden.
Wörter wie „hier“, „mehr“ oder „weiter“ sind keine geeigneten Linktexte. - Links im Fließtext sparsam einsetzen.
Nur dann verlinken, wenn der Link direkt zum Verständnis des Inhalts beiträgt. - Aktionen sichtbar darstellen.
Wichtige weiterführende Inhalte oder Handlungsaufforderungen als Button oder eigenes Linkelement anlegen. - Downloads klar kennzeichnen.
Dateien wie PDFs immer als Dateilink oder Dateiliste darstellen – nicht im Text verstecken. - Nutzer müssen wissen, was passiert.
Der Linktext sollte erkennen lassen, ob eine Seite geöffnet oder eine Datei heruntergeladen wird. Verweise auf externe Webseiten sind als solche zu kennzeichnen.
Praxisregel für Redakteur:innen
Ein guter Link funktioniert auch dann, wenn man ihn allein liest.
Alt-Tags
Alt-Tags – auch Alternativtexte genannt – sind ein zentraler Bestandteil barrierefreier Webseiten. Sie beschreiben den Inhalt oder die Funktion eines Bildes für Menschen, die es nicht sehen können. Screenreader lesen diese Texte vor und ermöglichen so blinden oder sehbehinderten Nutzer:innen, die Informationen eines Bildes zu erfassen.
Alternativtexte werden außerdem angezeigt, wenn Bilder nicht geladen werden können, und helfen Suchmaschinen dabei, Inhalte besser zu verstehen und einzuordnen.
In TYPO3 wird der Alt-Text direkt beim Bild im Feld „Alternativer Text“ hinterlegt. Er sollte immer so formuliert sein, dass er den wesentlichen Inhalt oder die Funktion eines Bildes möglichst kurz und verständlich beschreibt. Dekorative Bilder können bewusst ohne Alternativtext eingesetzt werden, damit Screenreader sie überspringen. Dekorative Bilder sind solche, die nicht für das Textverständnis erforderlich sind, und auf die auch nicht im Text verwiesen wird. Sind Texte auf einem Bild abgebildet, sind diese nicht mehr dekorativ! Der Textinhalt ist als Alt-Text zu hinterlegen.
Die Nuzung des Feldes „Titel“ ist zu unterlassen, da die dort hinterlegten Informationen nur für Maus-Nutzer zugänglich sind und auf mobilen Endgeräten nicht angezeigt werden. Die Inhalte der Felder „Alternativer Text“ und „Bildunterschrift“ sollen nicht identisch sein, da Screenreader sie doppelt vorlesen. Copyright-Informationen gehören in das Feld „Copyright“.
Gut gepflegte Alt-Texte verbessern damit sowohl die Barrierefreiheit, die Nutzerfreundlichkeit als auch die Auffindbarkeit in Suchmaschinen.
Kurze Checkliste
für Redakteur:innen
- Hat jedes inhaltlich relevante Bild einen Alternativtext?
- Beschreibt der Alt-Text kurz und verständlich den Inhalt des Bildes?
- Werden unnötige Formulierungen wie „Bild von …“ oder „Foto zeigt …“ vermieden?
- Beschreibt der Alt-Text bei funktionalen Bildern die Funktion statt das Aussehen?
(z. B. „Detailansicht“, „Zur Anmeldung “) - Wird bei Bildern, die als Link dienen, der Zweck des Links beschrieben?
- Wird keine doppelte Information erzeugt, wenn direkt neben dem Bild bereits ein erklärender Linktext steht?
- Wurde das Feld „Alternative Text“ im TYPO3-Backend bewusst ausgefüllt oder bewusst leer gelassen?
Praxisregel für Redakteur:innen
Ein guter Alt-Text beantwortet die Frage: „Welche Information würde fehlen, wenn das Bild nicht sichtbar wäre?“