Strukturierung von Textinhalten

von

Warum ist die Strukturierung von Textinhalten wichtig?

Eine klare und logische Strukturierung von Dokumenten und Webseiten ist ein zentraler Aspekt der digitalen Barrierefreiheit. Sie hilft nicht nur Menschen mit Beeinträchtigungen, den Inhalt zu verstehen und zu navigieren, sondern verbessert auch die Lesbarkeit und Zugänglichkeit für alle Nutzenden. Durch die Verwendung von Überschriften, Absätzen, Listen und Tabellen wird der Inhalt übersichtlich gegliedert, was eine einfache Navigation und ein besseres Leseverständnis ermöglicht.

Relevante WCAG-Erfolgskriterien

WCAG 1.3.1 – Informationen und Beziehungen

Dieses Erfolgskriterium verlangt, dass die Struktur eines Dokuments oder einer Webseite durch semantische Auszeichnung (z. B. HTML-Tags) vermittelt wird. Screenreader und andere assistive Technologien können so die Beziehungen zwischen verschiedenen Teilen des Inhalts korrekt interpretieren.

WCAG 2.4.4 – Linkzweck im Kontext erkennbar

Der Zweck eines Links muss entweder durch den Linktext selbst oder im Kontext klar erkennbar sein. Screenreader und andere assistive Technologien ermöglichen es Nutzenden, effizient durch eine Webseite zu navigieren, indem sie von Link zu Link springen. Damit dies reibungslos funktioniert, muss der Linktext eindeutig den Zielinhalt oder die Funktion des Links beschreiben.

WCAG 2.4.6 – Überschriften und Beschriftungen

Überschriften und Beschriftungen müssen den Inhalt oder Zweck der Webseite und des Textes klar beschreiben. Eine logische Hierarchie der Überschriften (z. B. H1, H2, H3) ist hierbei wichtig, um eine verständliche Gliederung zu schaffen.

Wer profitiert davon?

  • Menschen mit Sehbehinderungen oder Blindheit: Screenreader erkennen durch eine klare Struktur, wie Inhalte gegliedert sind, und ermöglichen es Nutzenden, effizient von Abschnitt zu Abschnitt zu springen.
  • Menschen mit Lernschwierigkeiten: Eine gut strukturierte Seite oder ein gut strukturiertes Dokument erleichtern das Verstehen und Verarbeiten von Informationen.
  • Menschen mit motorischen Einschränkungen: Durch eine klare Strukturierung wird die Navigation über Tastatur oder Screenreader vereinfacht, was den Zugang zu den Inhalten erleichtert.
  • Allgemeine Nutzerfreundlichkeit: Auch Menschen ohne Beeinträchtigungen profitieren von einer gut strukturierten Webseite und gut strukturierten Dokumenten, da sie Informationen schneller finden und verarbeiten können.

So strukturieren Sie Ihre Textinhalte richtig

Die Struktur eines Textes sorgt dafür, dass Inhalte nicht nur visuell ansprechen sind, sondern auch von assistiven Technologien korrekt interpretiert werden können. Die Anpassungen der Struktur müssen programmatisch im Quellcode oder im Dokument in der Formatvorlage vorgenommen werden. Hier sind die wichtigsten Elemente zur Strukturierung von Inhalten.

Überschriftenhierarchie (H1 – H6)

Jede Webseite oder jedes Dokument sollte eine Hauptüberschrift haben, die das Thema klar angibt. Weitere Inhalte sollten durch eine klare Hierarchie von Unterüberschriften gegliedert werden. Bei Dokumenten kann als Titel auch die entsprechende Formatvorlage gewählt werden. Sollte es für das Dokumentenformat kein Titel-Tag geben, kann auch eine H1 Überschrift mehrfach verwendet werden.

Hier ein Beispiel für eine Überschriftenhierarchie:

  • H1: Hauptkapitel oder Themenbereiche
  • H2: Unterkapitel innerhalb eines Themenbereichs
  • H3 – H6: Weitere detaillierte Unterpunkte

Eine klare und logische Überschriftenhierarchie hilft nicht nur bei der Navigation mit Screenreadern, sondern verbessert auch die Suchmaschinenoptimierung (SEO). Überschriften dienen nur zu Organisation der Inhalte und sollten nicht aus visuellen Gründen genutzt werden.

Absätze richtig nutzen

Kurze und prägnante Absätze

Lange Textblöcke sollten vermieden werden. Teilen Sie den Text in kurze, thematisch zusammenhängende Absätze auf, um die Lesbarkeit zu erhöhen. Jeder Absatz sollte einen klaren Gedanken oder ein Thema enthalten.

Leere Zeilen vermeiden

Achten Sie darauf, dass Absätze und Zeilenumbrüche semantisch korrekt verwendet werden. Ein einfacher Zeilenumbruch (<br>) signalisiert keine inhaltliche Trennung, während ein neuer Absatz (<p>) deutlich macht, dass ein neues Thema oder ein neuer Gedanke beginnt.

Listen und Aufzählungen

Verwenden Sie Listen, um Informationen übersichtlich und leicht erfassbar zu präsentieren. Screenreader erkennen Listen und lesen sie strukturiert vor, was den Nutzenden hilft, den Inhalt besser zu verstehen.

  • Nummerierte Listen (<ol>) sollten verwendet werden, wenn eine bestimmte Reihenfolge oder Priorität vorliegt.
  • Ungeordnete Listen (<ul>) sind für Aufzählungen ohne Reihenfolge sinnvoll.

Tabellen

Tabellen sollten ausschließlich verwendet werden, um tabellarische Daten darzustellen – nicht für das Layout von Inhalten. Tabellen sollten klare Spalten- und Zeilenüberschriften haben, damit Screenreader sie korrekt interpretieren können.

  • Überschriften für Spalten und Zeilen setzen
  • Vermeiden Sie verschachtelte Tabellen, da sie schwer zugänglich und zu verstehen sind.

Verlinkungen

Der Linktext sollte aussagekräftig sein, sodass Nutzende und assistive Technologien den Zweck des Links verstehen können. Vermeiden Sie Formulierungen wie „Klicken Sie hier“, sondern verwenden Sie stattdessen z. B. „Mehr erfahren über Barrierefreiheit“.

Textausrichtung (z.B. Fett und Kursiv)

Verwenden Sie fett (<strong>) anstatt <b> und kursiv (<em>) sparsam und nur, wenn Sie Informationen hervorheben möchten. Dies hilft Nutzenden, wichtige Informationen leichter zu erkennen.

Detaillierte Umsetzung: Strukturierung in HTML und Microsoft Word

HTML

Überschriftenstruktur setzen:

Verwenden Sie <H1> für die Hauptüberschrift, <H2> für wichtige Unterthemen und so weiter. Achten Sie darauf, keine Ebenen zu überspringen (z.B. nicht von <H1> direkt zu <H3> springen).

Beispiel:

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Unterkapitel</h3>

Listen strukturieren:

Verwenden Sie <ul> für ungeordnete Listen und <ol> für geordnete Listen.

Beispiel:

<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>

Absätze richtig nutzen

Um Absätze in HTML korrekt darzustellen, verwenden Sie das <p>-Tag. Dieses Tag sorgt dafür, dass der Text in logische Abschnitte unterteilt wird und von Browsern sowie assistiven Technologien richtig interpretiert werden kann.

Beispiel:

<p>Barrierefreiheit ist wichtig, um allen Nutzenden Zugang zu digitalen Inhalten zu ermöglichen. </p>
<p>Die richtige Strukturierung von Absätzen verbessert die Lesbarkeit. </p>

Verlinkungen richtig umsetzen

Um Verlinkungen in HTML zu erstellen, verwenden Sie das <a>-Tag (Anker-Tag). Dieses Tag ermöglicht es Ihnen, Text oder Bilder als Hyperlink zu definieren.

Beispiel:

<p>Für weitere Informationen zur <strong>Barrierefreiheit</strong> besuchen Sie bitte die <a href="https://www.bfit-bund.de">Webseite der BFIT</a>. </p>
<p>Kontaktieren Sie uns unter <a href="mailto:info@bfit-bund.de">info@bfit-bund.de</a>. </p>

Textauszeichnung richtig umsetzen

Um Text in HTML hervorzuheben, verwenden Sie die Tags <strong> für fett und <em> für kursiv. Diese Tags geben nicht nur visuelle Hinweise, sondern tragen auch zur semantischen Bedeutung des Textes bei.

Beispiel: 

<p>Die <strong>Barrierefreiheit</strong> ist entscheidend, um allen Nutzenden den Zugang zu erleichtern. </p>
<p>Wichtige Informationen sollten <em>hervorgehoben</em> werden, um die Lesbarkeit zu erhöhen. </p>

Tabellen korrekt verwenden:

Setzen Sie Spaltenüberschriften mit <th> und Datenzellen mit <td> .

Beispiel:

<table>
<tr>
<th>Spaltenüberschrift 1</th>
<th>Spaltenüberschrift 2</th>
</tr>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
</tr>
</table>

Microsoft Word

Überschriften setzen:

Verwenden Sie die integrierten Formatvorlagen (Überschrift 1, Überschrift 2, etc.), um die Struktur deutlich zu machen. Diese Formate sind für assistive Technologien erkennbar und helfen, den Text hierarchisch zu gliedern.

Beispiel:

  • Überschrift 1: „Barrierefreie Webseiten erstellen“
    • Überschrift 2: „Wichtige WCAG-Erfolgskriterien“
      • Überschrift 3: „WCAG 2.4.4 – Linkzweck im Kontext“

In Word:

  1. Markiere Sie den Text, der eine Überschrift sein soll.
  2. Wählen Sie im Reiter Start die entsprechende Formatvorlage (Überschrift 1, 2, 3 usw.) aus.

Absätze richtig verwenden

Anstatt Leerzeichen zu verwenden, um Abstände zwischen Absätzen zu erzeugen, sollten Sie die integrierte Absatzfunktion nutzen. Dadurch wird sichergestellt, dass der Text korrekt strukturiert ist und von assistiven Technologien richtig interpretiert wird. Das Drücken von Enter fügt automatisch einen neuen Absatz ein, ohne dass zusätzliche Leerzeichen nötig sind.

Beispiel:

Absatz 1: „Barrierefreiheit ist wichtig, um allen Nutzenden Zugang zu digitalen Inhalten zu ermöglichen.“

Absatz 2: „Die richtige Strukturierung von Absätzen verbessert die Lesbarkeit.“

In Word:

  1. Schreiben Sie Ihren Text.
  2. Setzen Sie den Cursor an das Ende des Satzes und drücken Sie Enter, um einen neuen Absatz zu beginnen.
  3. Um den Abstand zwischen Absätzen anzupassen: Gehen Sie zu Start > Absatz > Abstand vor/nach und stellen Sie den gewünschten Abstand ein.

Listen nutzen:

Anstatt manuell Bindestriche zu setzen, sollten Sie die integrierte „Aufzählung“ oder „Nummerierung“ Funktion verwenden, um Listen zu erstellen. Dies sorgt dafür, dass Screenreader die Listenstruktur korrekt interpretieren können.

Beispiel:

Aufzählung:

  • Barrierefreiheit prüfen
  • Inhalte strukturieren
  • Alt-Texte hinzufügen

Nummerierte Liste:

  1. Barrierefreiheit prüfen
  2. Inhalte strukturieren
  3. Alt-Texte hinzufügen

In Word:

  1. Markieren Sie den Text, der zur Liste werden soll.
  2. Wählen Sie im Reiter Start die Option Aufzählung (für ungeordnete Listen) oder Nummerierung (für geordnete Listen).

Verlinkungen einfügen

Um Verlinkungen in Word einzufügen, verwenden Sie die Funktion zum Erstellen von Hyperlinks. Dies ermöglicht es Ihnen, Texte oder Bilder mit einer Webseite, einem Dokument oder einer E-Mail-Adresse zu verknüpfen.

Beispiel:

„Für weitere Informationen zur Barrierefreiheit besuchen Sie bitte die Webseite der BFIT.“

In Word:

  1. Markieren Sie den Text oder das Bild, das Sie verlinken möchten.
  2. Klicken Sie mit der rechten Maustaste und wählen Sie Hyperlink aus dem Kontextmenü oder gehen Sie zu Einfügen > Link > Hyperlink.
  3. Geben Sie die URL oder die Zieladresse ein und bestätigen Sie mit OK.

Textauszeichnung richtig umsetzen

Um Text in Word hervorzuheben, verwenden Sie die Funktionen für fett und kursiv. Diese Auszeichnungen helfen, wichtige Informationen zu betonen und die Lesbarkeit zu verbessern.

Beispiel:

„Die Barrierefreiheit ist entscheidend, um allen Nutzenden den Zugang zu erleichtern.“
„Wichtige Informationen sollten hervorgehoben werden, um die Lesbarkeit zu erhöhen.“

Word:

  1. Markieren Sie den Text, den Sie auszeichnen möchten.
  2. Verwenden Sie die Tastenkombinationen Strg + B für Fett oder Strg + I für Kursiv. Alternativ können Sie im Reiter Start die entsprechenden Symbole für Fett (B) oder Kursiv (I) auswählen.

Tabellen richtig verwenden:

Verwenden Sie die Tabellenfunktion und setzen Sie klar definierte Spalten- und Zeilenüberschriften. Markieren Sie die Tabellenüberschriften als solche, um die Barrierefreiheit zu gewährleisten.

Beispiel Word Tabellen:

NameAlterStadt
May Mustermann30Berlin
Anna Schmidt25München

In Word:

  • Erstellen Sie die Tabelle unter Einfügen > Tabelle.
  • Wählen Sie auf der Registerkarte Entwurf die Gruppe Optionen für Tabellenformatvorlagen und dann Kopfzeile und ggf. erste Spalte aus.

Weitere Informationen

Zusätzliche Informationen finden Sie in unseren Handreichungen unter folgenden Links:

Hinweise zur Gestaltung von Tabellen

Webseitenstruktur

Checkliste zur Strukturierung von Textinhalten

Überschriftenhierarchie (H1 – H6)

Eine Hauptüberschrift verwenden:
Stellen Sie sicher, dass jede Webseite oder jedes Dokument eine klare Hauptüberschrift hat, die das Thema deutlich angibt.

Hierarchie einhalten: Verwenden Sie eine klare Hierarchie von Unterüberschriften:

  • H1 für Hauptkapitel oder Themenbereiche
  • H2 für Unterkapitel innerhalb eines Themenbereichs
  • H3-H6 für detailliertere Unterpunkte

Überschriften nicht aus visuellen Gründen nutzen:
Verwenden Sie Überschriften ausschließlich zur Organisation der Inhalte, nicht zur Gestaltung. Vermeiden Sie es, Überschriftenformate zu verwenden, um visuelle Effekte zu erzielen.

Dokumentenformatvorlagen nutzen:
Wenn Sie in Word oder einem anderen Dokumentenformat arbeiten, verwenden Sie die entsprechenden Formatvorlagen für Titel und Überschriften.

Absätze richtig nutzen

Kurze und prägnante Absätze erstellen:
Vermeiden Sie lange Textblöcke und teilen Sie den Text in kurze, thematisch zusammenhängende Absätze auf. Jeder Absatz sollte einen klaren Gedanken oder ein Thema enthalten.

Leere Zeilen vermeiden:
Nutzen Sie semantisch korrekte Absätze:

  • Verwenden Sie <p>-Tags für neue Absätze, um neue Themen oder Gedanken zu kennzeichnen.
  • Vermeiden Sie einfache Zeilenumbrüche (<br>) für die inhaltliche Trennung.
  • In Word: Drücken Sie Enter, um einen neuen Absatz zu beginnen.

Listen und Aufzählungen

Geeignete Listen verwenden:
Nutzen Sie Listen, um Informationen übersichtlich und leicht verständlich zu präsentieren.

  • Verwenden Sie nummerierte Listen (<ol>) für eine bestimmte Reihenfolge oder Priorität.
  • Verwenden Sie ungeordnete Listen (<ul> für Aufzählungen ohne Reihenfolge.
  • In Word: Verwenden Sie die Aufzählung oder Nummerierung Funktion im Reier Start.

Aufzählung sinnvoll gestalten:

Stellen Sie sicher, dass die Elemente in der Liste klar und prägnant sind, um die Lesbarkeit zu verbessern.

Tabellen

  • Tabellen für Daten verwenden: Verwenden Sie Tabellen ausschließlich zur Darstellung von tabellarischen Daten, nicht für das Layout von Inhalten.
  • Überschriften für Spalten und Zeilen setzen: Markieren Sie die Überschriften, um die Struktur der Tabelle zu verdeutlichen.

Verlinkungen

  • Aussagekräftige Linktexte verwenden: Der Linktext sollte klar und beschreibend sein, sodass die Nutzenden den Zweck des Links verstehen können.
  • Vermeiden Sie Formulierungen wie „Klicken Sie hier“. Nutzen Sie stattdessen konkrete Texte wie „Mehr erfahren über Barrierefreiheit“.

Textauszeichnung (z.B. Fett und Kursiv)

  • Fett- und Kursivschrift sparsam verwenden: Verwenden Sie das <strong>-Tag für fette Schrift und <em> für kursiv, um wichtige Informationen hervorzuheben.
  • In Word: Markieren Sie den Text und verwenden Sie Strg + B für fett oder Strg + I für kursiv.
  • Übertreibungen vermeiden:
    Heben Sie nur die wichtigsten Informationen hervor, um die Lesbarkeit nicht zu beeinträchtigen.
  • Konsistenz gewährleisten:
    Achten Sie darauf, dass die Verwendung von Textauszeichnungen im gesamten Dokument konsistent ist.