Ein Kriterium der Stufe A, das eine sinnvolle DOM- und Lesereihenfolge verlangt, wenn die Reihenfolge bedeutungstragend ist, damit assistive Technik Inhalte in der beabsichtigten Abfolge vorliest.

Was verursacht Verstöße gegen 1.3.2?

CSS (etwa die order-Eigenschaft von Flexbox oder absolute Positionierung), das Inhalte visuell umsortiert, sodass die sichtbare Reihenfolge nicht mehr der DOM-Reihenfolge entspricht, der Screenreader folgen.

Worin unterscheidet sich 1.3.2 von 2.4.3?

1.3.2 betrifft die Lesereihenfolge der Inhalte; 2.4.3 Fokusreihenfolge betrifft speziell die Reihenfolge, in der der Tastaturfokus interaktive Elemente durchläuft.

Erfolgskriterien

WCAG 1.3.2 Sinnvolle Reihenfolge

Erfolgskriterium 1.3.2 verlangt, dass, wenn die Lesereihenfolge von Inhalt für das Verständnis wichtig ist, die korrekte Reihenfolge programmatisch bestimmt werden kann. Es ist ein Kriterium der Stufe A unter Richtlinie 1.3 (Anpassbar).

Wo dies tatsächlich scheitert

CSS gibt dem visuellen Layout völlige Freiheit, von der DOM-Reihenfolge abzuweichen – order in Flexbox/Grid, absolute Positionierung, Floats können alle bewirken, dass Inhalt in einer anderen visuellen Abfolge erscheint als der Abfolge, in der er im zugrunde liegenden HTML existiert. Ein sehender Nutzer sieht die CSS-angeordnete Version; ein Screenreader liest die tatsächliche DOM-Reihenfolge. Weichen diese bei Inhalt, bei dem die Reihenfolge Bedeutung trägt (eine nummerierte Anleitung, ein Formular, das logisch von einem Feld zum nächsten fließt), erheblich voneinander ab, erhält ein Screenreader-Nutzer eine durcheinandergewürfelte, verwirrende Version desselben Inhalts.

Ein häufiges konkretes Beispiel

Ein Zweispalten-Layout, gebaut mit CSS-Floats oder Grid, bei dem die visuell linke Spalte tatsächlich das zweite Element im DOM ist (visuell per CSS neu angeordnet) – ein sehender Nutzer liest wie erwartet von links nach rechts, von oben nach unten, aber ein Screenreader kündigt die tatsächliche Reihenfolge des DOMs an, die möglicherweise Spalte zwei vor Spalte eins liest.

Wie man dies überprüft

Der klassische Test: CSS vollständig deaktivieren (oder die Lesemodus-Ansicht Ihres Browsers verwenden) und die Seite in ihrer rohen, ungestylten Reihenfolge lesen. Ergibt der Inhalt weiterhin logischen Sinn – fließen Anweisungen weiterhin Schritt für Schritt, schreiten die Felder eines Formulars weiterhin sinnvoll voran –, ist die DOM-Reihenfolge in Ordnung, unabhängig davon, wie CSS die Dinge visuell neu positioniert. Liest es sich durcheinandergewürfelt oder verwirrend, muss die DOM-Reihenfolge (nicht nur das CSS) geändert werden, um der beabsichtigten Lesereihenfolge zu entsprechen.

Die Unterscheidung von der Fokusreihenfolge (2.4.3)

Dieses Kriterium betrifft die Reihenfolge, in der Inhalt gelesen wird; Fokusreihenfolge (2.4.3) betrifft speziell die Reihenfolge, in der interaktive Elemente beim Tabben den Tastaturfokus erhalten. Sie scheitern oft gemeinsam (da der Fokus im Allgemeinen ebenfalls der DOM-Reihenfolge folgt), testen aber zwei verwandte, unterschiedliche Erfahrungen.

Häufige Fragen

Was ist WCAG 1.3.2?: Ein Kriterium der Stufe A, das eine sinnvolle DOM- und Lesereihenfolge verlangt, wenn die Reihenfolge bedeutungstragend ist, damit assistive Technik Inhalte in der beabsichtigten Abfolge vorliest.
Was verursacht Verstöße gegen 1.3.2?: CSS (etwa die order-Eigenschaft von Flexbox oder absolute Positionierung), das Inhalte visuell umsortiert, sodass die sichtbare Reihenfolge nicht mehr der DOM-Reihenfolge entspricht, der Screenreader folgen.
Worin unterscheidet sich 1.3.2 von 2.4.3?: 1.3.2 betrifft die Lesereihenfolge der Inhalte; 2.4.3 Fokusreihenfolge betrifft speziell die Reihenfolge, in der der Tastaturfokus interaktive Elemente durchläuft.