Bedeutungstragende Reihenfolge

Alle Inhalte müssen im Dokument (DOM) in sinnvoller Reihenfolge angeordnet sein (unabhängig von CSS). Dies ermöglicht es assistierenden Geräten (z.B. Screenreadern), die visuell zweidimensional angeordneten Inhalte korrekt aneinander zu hängen und eindimensional als Text auszugeben.

Verstehen

Sehende nehmen eine Webseite als zweidimensionalen, grafischen Bereich wahr. Blinde hingegen nehmen mittels Screenreader eine Seite eindimensional (linear) und textuell wahr: ein Element nach dem anderen, von oben nach unten. Die Reihenfolge der Elemente im DOM muss sinnvoll sein, unabhängig davon, wie die visuelle Anordnung mittels CSS nachträglich verändert wird.

Wird etwa das Datum einer Newsmeldung visuell vor dessen Überschrift platziert, so muss im DOM trotzdem die Überschrift an erster Stelle stehen. Mittels CSS (z.B. Flexbox) kann die Anordnung dann visuell noch verändert werden.

Wichtig: Generell sollte das visuelle Erscheinungsbild nur in gut begründeten Fällen von der Reihenfolge im DOM abweichen. Beispielsweise sind Informationen zu einem Formular nicht unterhalb des Abschicken-Schalters anzuzeigen, da diese leicht übersehen werden können. Zudem wird auch die intuitive Fokusführung beeinträchtigt (siehe dazu auch 2.4.3).

Verantwortlichkeiten

• Das Designteam muss sich bewusst sein, dass komplizierte Anordnungen von Inhalten ggf. schwierig technisch umzusetzen sind.
• Das Entwicklungsteam setzt die Seitenbereiche und Inhalte im DOM in sinnvoller Reihenfolge aneinander, unabhängig von deren visueller Anordnung.

WCAG-Text

Wenn die Reihenfolge, in der Inhalte präsentiert werden, sich auf deren Bedeutung auswirkt, kann die korrekte Leseabfolge durch Software bestimmt werden.

Code-Beispiel

<style>
  article {
    display: flex;
    flex-direction: column;
  }

  h2 {
    order: 2;
  }

  time {
    order: 1;
  }

  p {
     order: 3;
  }
</style>

<article>
  <h2>Wahlresultate bekannt</h2><!-- Überschrift kommt vor dem Datum im DOM -->
  <time datetime="2020-08-18">Dienstag, 18.8.2020</time>

  <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p>
</article>