WCAG 1.3.2 Bedeutungstragende Reihenfolge

Das Erfolgskriterium 1.3.2 sorgt dafür, dass Inhalte in einer sinnvollen Reihenfolge erscheinen, wenn ein Screenreader eine Seite von oben nach unten vorliest oder eine Seite ohne ihre Styles angezeigt wird. Es gehört zur Konformitätsstufe A und ist Teil von EN 301 549 (Abschnitt 9.1.3.2). Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Wenn die Reihenfolge, in der Inhalte dargestellt werden, ihre Bedeutung beeinflusst, muss eine korrekte Lesereihenfolge programmatisch ermittelbar sein — in der Praxis muss die Reihenfolge der Elemente im HTML (die DOM-Reihenfolge) diese Bedeutung wiedergeben.

Zwei Punkte sind wichtig:

• Das Kriterium gilt nur dort, wo die Reihenfolge zählt. Navigation, Hauptinhalt und Seitenleiste können in beliebiger Reihenfolge stehen; der Inhalt innerhalb eines Artikels, eines Formulars oder eines Preisblocks muss in der richtigen Reihenfolge bleiben.
• Mindestens eine bedeutungstragende Reihenfolge genügt. Sie muss nicht die einzig mögliche sein.

Typische Fehler in Onlineshops

• CSS order, flex-direction: row-reverse oder Grid-Platzierung zeigt den Preis vor dem Produktnamen, im Code steht es aber anders;
• ein Preisblock „statt / jetzt“, bei dem der Code den neuen Preis als „statt“ vorliest;
• Größentabelle oder Vergleich mit Leerzeichen oder divs in Spalten gesetzt, was zeilenweise vorgelesen Unsinn ergibt;
• eine Layout-Tabelle, die keinen Sinn ergibt, wenn ihre Zellen nacheinander gelesen werden;
• ein Cookie-Banner oder Pop-up, das am Ende des Codes eingefügt, aber oben angezeigt wird, sodass sein Kontext zuletzt vorgelesen wird.

So prüfen Sie es

Automatisch: Keine automatische Regel unseres Checkers ist diesem Kriterium zugeordnet. Ein Tool sieht die DOM-Reihenfolge, aber nicht, ob sich die Bedeutung ändert. Hier ist eine manuelle Prüfung nötig.

Manuell: Schalten Sie CSS ab (zum Beispiel mit einer Browsererweiterung oder der Leseansicht) und lesen Sie die Seite von oben nach unten: Ergibt jeder Block noch Sinn? Oder hören Sie sie mit einem Screenreader im Lesemodus an. Achten Sie besonders auf Preise, Produktdetails, Formulare und mehrspaltige Layouts.

So beheben Sie es

• Schreiben Sie das HTML in der Reihenfolge, in der es gelesen werden soll, und nutzen Sie CSS nur für das Layout, nicht um die Bedeutung zu ändern.
• Vermeiden Sie CSS-Umsortierung bei Inhalten, deren Reihenfolge zählt; brauchen Sie auf Mobilgeräten eine andere Reihenfolge, ändern Sie das Markup.
• Verwenden Sie für tabellarische Daten echte Tabellen statt Leerzeichen oder positionierter Blöcke.
• Fügen Sie Dialoge und Banner im DOM dort ein, wo sie logisch hingehören, und setzen Sie den Fokus in modale Dialoge.

Verwandte Kriterien

• 1.3.1 Info und Beziehungen — Struktur im Code ausgezeichnet.
• 1.3.3 Sensorische Eigenschaften — Anweisungen, die sich auf die Position stützen.
• WCAG-2.2-Checkliste — einschließlich 2.4.3 Fokus-Reihenfolge.

Häufige Fragen

Muss die Reihenfolge im Code der sichtbaren Reihenfolge entsprechen?

Nur dort, wo die Reihenfolge die Bedeutung beeinflusst. Unabhängige Blöcke wie Navigation und Hauptinhalt können in beliebiger Reihenfolge stehen; die Schritte eines Rezepts, ein Preis und seine Bezeichnung oder ein Produkttitel und seine Details müssen in einer sinnvollen Reihenfolge bleiben.

Ist das Umsortieren mit CSS Flex oder Grid ein Verstoß?

Nicht automatisch. Ein Verstoß entsteht, wenn die umsortierte sichtbare Reihenfolge eine Bedeutung trägt, die die Reihenfolge im Code nicht hat — zum Beispiel, wenn „alter Preis“ und „neuer Preis“ die Plätze tauschen.

Ist 1.3.2 dasselbe wie die Fokus-Reihenfolge?

Nein. 1.3.2 betrifft die Lesereihenfolge der Inhalte. Die Reihenfolge, in der sich der Tastaturfokus bewegt, regelt 2.4.3 Fokus-Reihenfolge, auch wenn beides meist auf dieselbe Weise behoben wird.