1.3.2 Bedeutungstragende Reihenfolge

Was bedeutet das?

Screenreader lesen eine Seite in der Reihenfolge des Codes vor, nicht in der Anordnung, die das Layout zeigt. Wenn CSS Elemente optisch umsortiert, etwa mit order, absoluter Positionierung oder Rasterplatzierung, kann daraus eine Reihenfolge werden, die keinen Sinn mehr ergibt: erst der Preis, dann der Artikelname, dann die Überschrift.

Das Kriterium greift dort, wo die Reihenfolge Bedeutung trägt: Schritte einer Anleitung, Frage und Antwort, Beschriftung und Feld. Ob eine Seitenleiste vor oder nach dem Hauptinhalt steht, ist dagegen oft gleichwertig. Auch mit Leerzeichen „ausgerichteter“ Text gehört hierher, weil er ohne Layout zerfällt.

Wem hilft das?

• Menschen, die blind sind und einen Screenreader nutzen
• Menschen, die Seiten vergrößern oder eigene Stile verwenden
• Menschen, die sich Texte vorlesen lassen, etwa bei Lese-Rechtschreib-Schwäche

Typische Fehler

• Mit CSS umgedrehte Reihenfolge, sodass Schritt 3 vor Schritt 1 vorgelesen wird
• Text mit Leerzeichen zu Spalten ausgerichtet statt mit einer Tabelle oder mit CSS
• Dialoge oder Hinweise, die am Ende des Codes stehen, aber optisch an anderer Stelle erscheinen und ohne Zusammenhang vorgelesen werden

So prüfen wir das

• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Ergibt die Lesereihenfolge (DOM-Reihenfolge, siehe Liste) ohne Layout Sinn?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<div class="card">
  <p class="price">49,90 €</p>
  <h3>Wanderrucksack 30 l</h3>
</div>
<style>.card{display:flex;flex-direction:column-reverse}</style>

<div class="card">
  <h3>Wanderrucksack 30 l</h3>
  <p class="price">49,90 €</p>
</div>
<style>.card{display:flex;flex-direction:column}</style>

Code-Reihenfolge und sichtbare Reihenfolge stimmen überein; der Screenreader liest erst den Namen, dann den Preis.

Praxistipps

• Schalten Sie zum Test die Stylesheets ab (zum Beispiel im Lesemodus des Browsers) und lesen Sie die Seite von oben nach unten.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.3.2 Meaningful Sequence