1.3.2 - Inhalte in logischer Reihenfolge strukturieren

A 2.0 Umsetzung

Ziel

Sicherstellen, dass die Reihenfolge der Inhalte programmgesteuert bestimmt werden kann und deren Bedeutung erhalten bleibt, um Inhalte für unterstützende Technologien zugänglich zu machen.

Beschreibung

Die Inhalte müssen in einer intuitiven Reihenfolge präsentiert werden, die ihre Bedeutung bewahrt. Z. B.: Eine Fußnote sollte nicht ganz oben stehen, und eine headline sollte nicht ganz unten stehen.
Mindestens eine sinnvolle Reihenfolge der Inhalte muss programmgesteuert erkennbar sein.
Für die visuelle Darstellung genutzte Techniken wie CSS dürfen die logische Abfolge im DOM nicht beeinträchtigen. Dies betrifft insbesondere Überschriften, Navigationsbereiche, Formulare und andere interaktive Inhalte.

Anforderungen

Sicherstellen, dass die DOM-Reihenfolge der Inhalte der logischen und sinnvollen Reihenfolge entspricht.
Vermeiden Sie den ausschließlichen Einsatz von CSS für die Positionierung, wenn dies die Lesereihenfolge beeinflusst.
Nutzung semantischer HTML-Elemente (z. B. <header>, <nav>, <main>, <footer>).
Korrektes Tabindex-Management für interaktive Elemente.
Einsatz von role und ARIA-Attributen zur Beschreibung der Abfolge und Bedeutung.

Überprüfen Sie, dass der Inhalt logisch geordnet ist (z. B. Überschriftenhierarchien von <h1> bis <h6>).
Stellen Sie sicher, dass textliche und visuelle Reihenfolgen übereinstimmen.
Fügen Sie erklärende Hinweise hinzu, wenn die Reihenfolge in bestimmten Fällen nicht sofort klar ist.

Code-Beispiele

Sinnvolle DOM-Reihenfolge mit semantischen Elementen:

<header>
  <h1>Website-Titel</h1>
</header>
<nav>
  <ul>
    <li><a href="#home">Startseite</a></li>
    <li><a href="#about">Über uns</a></li>
  </ul>
</nav>
<main>
  <h2>Hauptinhalt</h2>
  <p>Dies ist der Hauptinhalt der Seite.</p>
</main>
<footer>
  <p>© 2024 Unternehmen</p>
</footer>

<nav>
  <a href="#section1" tabindex="1">Zu Abschnitt 1</a>
  <a href="#section2" tabindex="2">Zu Abschnitt 2</a>
</nav>