Hierarchie & Struktur

    Hierarchie & Struktur

    Unser Editor bietet verschiedene Elemente wie Überschriften, Absätze, Listen und Tabellen. Sie helfen dabei, Ihre Texte klar zu gliedern und übersichtlich darzustellen. Diese Elemente sorgen nicht nur für eine ansprechende Optik, sondern sind wichtig für die Barrierefreiheit.

    In diesem Artikel zeigen wir, worauf Sie achten sollten, damit Ihre Inhalte für alle Nutzer gut verständlich und zugänglich sind, besonders bei der visuellen und inhaltlichen Struktur.

    Was ist mit Hierarchie und Struktur gemeint?

    1. Visuelle vs. Semantische Struktur
      1. (Visuell-logische) Hierarchie beschreibt:
        1. wie Inhalte aussehen: z. B. große, fette Überschriften vs. Fließtext
        2. oder in welcher logischen Reihenfolge die Inhalte gegliedert sind: z.B. Je größer die Überschrift, desto "wichtiger" ist sie.
      2. (Semantische) Struktur beschreibt, welche Bedeutung Inhalte haben: z. B. „Das ist eine Überschrift“, „das ist ein Absatz“, „das ist ein Listenpunkt“.

    Menschen, die einen Screenreader nutzen, „sehen“ die Inhalte nicht über das Design, sondern über die semantische Struktur. Markieren Sie eine Überschrift nur fett, ohne sie als solche zu kennzeichnen, versteht der Screenreader das nicht und es wird für Nutzer schwieriger, dem Inhalt zu folgen. Eine klare Hierarchie macht das Dokument außerdem übersichtlicher und angenehmer zu lesen.

    1. Warum Struktur wichtig ist (auch technisch)

    HTML-Seiten bestehen aus semantischen Elementen wie <h1>, <p>, <ul> oder <table>. Diese geben dem Browser und Hilfsmitteln wie Screenreadern Informationen über die Funktion des Inhalts und sorgen so für eine klare, logische Struktur. Eine solche Struktur erleichtert nicht nur das Lesen, sondern ist auch eine technische Voraussetzung für barrierefreie Inhalte.

    1. Überblick der Editor-Elemente

    Folgend erklären wir, welche Elemente Sie im Editor nutzen können und wie Sie diese richtig verwenden:

    Überschriften

    • Sind optisch deutlich erkennbar
    • Haben eine klare, festgelegte Bedeutung
    • Verwenden Sie dafür die vorgegebenen Überschriftstypen (Heading 1, 2, 3)
    • Nutzen Sie die Stufen in der richtigen Reihenfolge (1 → 2 → 3)

    Tipp: Überspringen Sie keine Stufe, also zum Beispiel nicht direkt von 1 auf 3 wechseln

    Wichtig für Screenreader: Überschriften werden als solche vorgelesen und ermöglichen eine Navigation durch den Text.

    Absätze (Paragraphs):

    • Verwenden Sie Absätze für Fließtext oder zusätzliche Informationen zu einer Überschrift
    • Ein Absatz steht immer direkt unter der Überschrift und erklärt deren Inhalt genauer

    Hinweis: Absätze werden von Screenreadern als normaler Text vorgelesen. Fehlt die Überschrift davor, fehlt oft auch der wichtige Kontext.

    Links:

    Warum? Screenreader-Nutzer springen oft direkt zu Links. Sie hören dann z. B. „hier“ ohne Zusammenhang. Aussagekräftige Linktexte sind daher essenziell.

    Listen (geordnet und ungeordnet):

    • Ungeordnete Listen (Bullet Points) eignen sich für gleichwertige Punkte, z. B. Funktionen, Merkmale oder Checklisten.
    • Geordnete Listen (Zahlenlisten) verwenden Sie bei Schritt-für-Schritt-Anleitungen oder Abläufen.

    Hinweis: Screenreader erkennen die Anzahl der Punkte und kündigen sie korrekt an („Liste mit 5 Elementen“).

    Tabellen:

    • Tabellen sind ideal für Vergleiche oder strukturierte Daten
    • Tabellen haben Spalten (Columns) und Reihen (Rows)
    • Eine gute Tabelle hat eine genaue Ausweisung ihrer Beschreibung, diese wird, je nach Tabelle, in die erste Reihe und / oder erste Spalte gesetzt
    • Deswegen: Definieren Sie immer eine Header Row für Spaltenüberschriften, falls vorhanden und eine Header Column, wenn die erste Spalte ebenfalls Kategorien beschreibt

    Wichtig: Nur so kann ein Screenreader verstehen, welcher Wert zu welcher Kategorie gehört.

    Fazit:

    Die Elemente im Editor sind nicht nur Formatierung, sondern tragen maßgeblich zur Zugänglichkeit Ihrer Inhalte bei.

    Wenn Sie:

    • Inhalte mit Überschriften strukturieren
    • Absätze sinnvoll gruppieren
    • aussagekräftige Links verwenden
    • Listen klar gliedern
    • Tabellen semantisch korrekt einsetzen

    dann helfen Sie allen Nutzern, auch denen, die Ihre Inhalte nicht sehen können bei der Orientierung.

    Weitere Fragen?
    Unser Support-Team hilft Ihnen gerne weiter, wenn Sie Fragen zur barrierefreien Gestaltung Ihrer Beschreibung haben.

    Veröffentlicht