Struktur schafft Zugang – barrierefreie Überschriften und Texte

Strukturieren Sie Ihren Inhalt mit Überschriften, diese sind der Wegweiser durch den Text. Achten Sie auf hohe Kontraste zwischen Hintergrund und Text, so sind alle Inhalte für jedermann lesbar. Lesen Sie, wie Sie dies in der Praxis umsetzen.

Wie geht ein Screenreader mit den Überschriften um

Die Funktion von Überschriften verstehen

Überschriften gliedern Inhalte, schaffen Übersicht und ermöglichen eine gezielte Navigation – gerade für Nutzer*innen mit assistiven Technologien wie Screenreadern. Die hierarchische Struktur der Überschriften lässt Nutzer*innen die Inhalte schneller erfassen.
Eine gute Überschrift ist:
  Aussagekräftig – Sie gibt einen klaren Hinweis auf den folgenden Inhalt.
  Kurz – Ideal sind 3–8 Wörter.
  Kein „Bandwurm“ – Lange oder verschachtelte Titel erschweren die Orientierung.
  Keine Fragen oder Wortspiele, wenn sie den Inhalt nicht beschreiben.
Für weitere Informationen lesen Sie den Wiki-Artikel zum Thema Überschriften.
Grafik zeigt eine hierarchische Struktur von Überschriften
Beispiel für eine sinnvolle Gliederung von Überschriften: H1 bis H4 im Überblick.

Gliedern Sie lange Texte

Teilen Sie lange Texte in sinnvolle Abschnitte. Das hilft nicht nur beim Lesen, sondern ermöglicht eine barrierefreie Navigation.
  • Faustregel: Alle 3–6 Absätze sollte eine Überschrift stehen.
  • Arbeiten Sie mit Aufzählungen oder Bildern in Ihren Abschnitten.
In der Seitenpflege teilen Sie Ihre Abschnitte am einfachsten in Bausteine auf. Nutzen Sie die für die Überschriften den Titel im Register Texte.
Tipps zum Schreiben finden Sie unter: Texten oder Schreiben fürs Web. 

Kontraste und gestalterische Hinweise

  • Wichtige Informationen nicht ausschließlich über Farbe vermitteln – z. B. „rote Schrift = Warnung / Hinweis“. Ergänze durch Icons oder Text. Nutzen Sie im Texteditor die Funktion Formate oder   Icons.
  • Achte auf ein ausreichendes Kontrastverhältnis bei Text auf Farbe oder Text auf Bild.
    Nutzen Sie die Standardfarben im Design 2022, sind die Farben entsprechend gewählt.
    Bild zeigt Beispiel für Bild / Link Kachel mit Farbebenen
    Beispiel für Bild / Link Kachel mit Farbebenen
    Beispiel für Text auf Bild: Verwenden Sie die Bild/Link Kachel, erstellen Sie hohe Kontraste durch Farbebenen. Die Farbebenen verwenden Sie auch, wenn Sie Bilder im Container als Hintergrund gestalten.

    Ein schlechter Kontrast kann beispielsweise Menschen mit einer Farbsehstörung wie Rot-Grün-Schwäche beeinträchtigen. Hiervon sind 8 % der Männer betroffen.
  • Im Wiki-Artikel "Mit dem Farbwähler - Farbkonzept erstellen" finden Sie Links zu Tool zum Testen Ihrer Kontraste. Außerdem finden Sie hilfreiche Tipps zum Thema Farbe im Design.
zurück