1.3.2 Bedeutungsvolle Sequenz

WCAG-Definition:

Wenn die Reihenfolge, in der Inhalte präsentiert werden, ihre Bedeutung beeinflusst, muss diese Reihenfolge programmatisch nachvollziehbar sein.

Bedeutung

Manchmal ist es entscheidend, in welcher Reihenfolge Informationen erscheinen – etwa bei:

  • Anleitungen (Schritt 1, 2, 3)
  • Dialogen
  • Formulareingaben
  • Texte mit Hervorhebungen

Für Nutzer von Screenreadern oder Tastaturnavigation muss die gleiche sinnvolle Reihenfolge vorhanden sein wie für visuell sehende Nutzer.

Ausreichende Techniken

G57 – Verwenden von semantisch korrektem HTML, um die Lesereihenfolge sicherzustellen

<h2>Registrierung</h2>
<p>Bitte füllen Sie das folgende Formular aus.</p>

<label for="name">Name</label>
<input id="name" type="text">

<label for="email">E-Mail</label>
<input id="email" type="email">
  • Wird korrekt und sinnvoll von oben nach unten vorgelesen.
  • Kein CSS nötig, um Reihenfolge zu steuern – sie ergibt sich aus dem Quellcode.

G61 – Verwenden von CSS zur visuellen Anpassung, ohne die semantische Reihenfolge zu brechen

// Falsch
<div class="spalte-links">2. Schritt</div>
<div class="spalte-rechts">1. Schritt</div>
  • Wird in falscher Reihenfolge vorgelesen, wenn visuell umsortiert
//Richtig

<div class="anleitung">
  <p>1. Schritt: ...</p>
  <p>2. Schritt: ...</p>
</div>

<style>
.anleitung p:first-child {
  float: right; /* nur optisch verschoben */
}
</style>

H49 – Vermeiden von Layout-Tabellen (z. B. <table> zur Positionierung)

// Falsch
<table><tr><td>1</td><td>3</td></tr><tr><td>2</td><td>4</td></tr></table>

Wird zeilenweise vorgelesen, was die logische Reihenfolge zerstört

Richtig:

  • Verwende stattdessen Flexbox oder Grid für Layouts
  • Halte semantische Reihenfolge im HTML bei

Beratungstechniken

  • G57 - HTML-Code sollte in der logischen Leserichtung strukturiert sein
  • G61 - CSS kann Layout verändern, aber HTML-Reihenfolge bleibt entscheidend
  • G115 - Verwende semantische HTML-Elemente (z. B. <section>, <article>, <aside>)
  • G150 - Stelle sicher, dass visuelle Hinweise auch programmiert nachvollziehbar sind
  • G140 - Nutze ARIA nur ergänzend, wenn HTML nicht ausreicht

Fehler

  • Inhalte sind visuell in sinnvoller Reihenfolge, aber HTML-Reihenfolge ist unlogisch
  • Screenreader liest Inhalte in falscher Reihenfolge, weil sie im DOM falsch stehen
  • Tabellen werden missbraucht für visuelles Layout, was zu falscher Lese-Reihenfolge führt