Anleitung zum Erstellen barrierefreier Inhalte auf ihrer Website

Barrierefreiheit ist ein essenzieller Bestandteil der modernen Webgestaltung. Als Redakteur können Sie mit wenigen, aber wichtigen Maßnahmen dazu beitragen, dass Ihre Inhalte für alle Nutzer, einschließlich Menschen mit Behinderungen, zugänglich sind.

Erhalten Sie die Barrierefreiheit ihrer Website

1. Strukturierung von Text

Verwenden Sie korrekte HTML-Überschriften (H1-H3), um eine logische Gliederung zu gewährleisten. Im Typo3-Backend wählen Sie den Typ der Überschrift im Reiter "Allgemein" bzw. im Text-Editor mit dem 2. Dropdown von links. Die H1 Überschrift nimmt eine Sonderrolle ein. Für sie gilt:

  • Jede Seite sollte eine H1 Überschrift haben
  • Die H1 Überschrift sollte immer ganz oben als erstes stehen
  • Eine H1 Überschrift sollte nur einmal je Seite vorkommen

Beim Schreiben barrierefreier Inhalte ist es wichtig, Überschriften in einer logischen Reihenfolge zu verwenden – also z. B. von einer H2 zu einer H3, nicht direkt von H1 zu H3, siehe folgendes Beispiel:

H1
└─ H2
    └─ H3
    └─ H3
    └─ H3
└─ H2
    └─ H3
    └─ H3

Nutzen Sie Absätze und geordnete bzw. ungeordnete Listen (ul, ol) zur besseren Lesbarkeit.

Markieren Sie wichtige Inhalte sinnvoll mit Fettschrift (Bold).

2. Bilder - Alt, Titel und Beschreibung

Alle Bilder benötigen einen aussagekräftigen Alt-Text (Alternative Text). Alt-Texte sind Beschreibungen für Bilder, die von Screenreadern vorgelesen werden können. Sie helfen sehbehinderten Nutzern, den Inhalt eines Bildes zu verstehen, und verbessern zudem die Suchmaschinenoptimierung (SEO).

Mindestens alle Bilder, die als Link dienen benötigen einen aussagekräftigen Titel. Dieser wird als Ersatz für den Linktext verwendet.

Vor allem Diagramme und komplexe Grafiken sollten mit einer Beschreibungen (Bildunterschrift) versehen werden.

3. Links und deren Beschriftung

Links sollten immer sprechende Texte enthalten, z.B. "Weitere Informationen zu Barrierefreiheit" statt "Hier klicken".

In Linktexten sollten keine Urls verwendet werden also statt "https://www.zielseite.de" lieber: "Weitere Informationen auf Seite XYZ".

Falls ein Link ein neues Fenster öffnet, sollte dies im Linktext oder per Hinweis erkennbar sein.