- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 2 / 193
1.3.2 Bedeutungstragende Reihenfolge
Wenn die Reihenfolge von Inhalten für ihre Bedeutung wichtig ist, muss diese Reihenfolge im Code stehen und nicht nur im Layout auf dem Bildschirm.
/ Was es verlangt
Wo die Reihenfolge von Inhalten für ihren Sinn wichtig ist, muss es die Reihenfolge im Code sein. Screenreader, Braillezeile und Textbrowser folgen dem Dokument, nicht dem Bildschirm. CSS kann den dritten Block zuerst zeigen, und eine sehende Person bemerkt nichts; eine blinde Person hört den Preis vor dem Produkt, Schritt drei vor Schritt eins oder eine Fehlermeldung lange nach dem Feld, zu dem diese Meldung gehört.
Das Kriterium greift nur, wenn die Reihenfolge die Bedeutung beeinflusst. Navigationsleiste und Artikel dürfen in beliebiger Reihenfolge stehen, und eine Seite kann mehr als eine richtige Lesereihenfolge haben, von denen eine programmatisch bestimmbar sein muss. Ein Fehler ist Inhalt, dessen Sinn sich ändert, wenn er in Dokumentreihenfolge gelesen wird: vertauschte Schritte, aus Leerzeichen gebaute Spalten, eine Layouttabelle, die linearisiert Unsinn ergibt. Die Reihenfolge des Tastaturfokus ist eine eigene Frage und steht in 2.4.3.
/ Woran Seiten scheitern
- Flex- oder Grid-Elemente werden mit order, row-reverse oder column-reverse umsortiert, sodass die sichtbare Reihenfolge vom Dokument abweicht.
- Absolute Positionierung oder float setzt einen Block über Inhalt, der im Markup vor ihm steht.
- Spalten oder Tabellen werden im Fließtext mit Leerzeichen und Zeilenumbrüchen nachgebaut und dann quer über die Spalten vorgelesen.
- Eine Layouttabelle ergibt auf dem Bildschirm Sinn, Zelle für Zelle und Zeile für Zeile gelesen aber die falsche Reihenfolge.
- Die Buchstaben eines Wortes sind für die Optik durch Leerzeichen getrennt, sodass es Buchstabe für Buchstabe vorgelesen wird.
/ So prüfen Sie es selbst
- Schalten Sie die Stile ab (Firefox: Ansicht, Webseiten-Stil, Kein Stil) und lesen Sie von oben nach unten. Der Inhalt sollte weiterhin Sinn ergeben.
- Lassen Sie einen Screenreader die ganze Seite ohne Unterbrechung vorlesen und verfolgen Sie sie auf dem Bildschirm. Notieren Sie jede Stelle, an der die Stimme springt.
- Markieren Sie alles, kopieren Sie es und fügen Sie es als reinen Text in einen Editor ein. Das ist die Dokumentreihenfolge.
- Suchen Sie in den Entwicklerwerkzeugen des Browsers in den Stilen nach order, row-reverse, column-reverse und position: absolute und vergleichen Sie jeden Treffer mit dem Markup.
- Wiederholen Sie die Prüfung in einem schmalen Fenster, denn responsive Layouts sortieren oft nur an einem Umbruchpunkt um.
/ So beheben Sie es
- Schreiben Sie das Markup in der Reihenfolge, in der der Inhalt gelesen werden soll, und gestalten Sie es danach mit CSS, nicht umgekehrt.
- Entfernen Sie die Eigenschaft order und flex-direction: row-reverse, wo sie die Bedeutung ändern, und stellen Sie stattdessen die Elemente im Quelltext um.
- Ersetzen Sie mit Leerzeichen ausgerichteten Text durch ein echtes table-Element oder durch CSS-Spalten.
- Sperren Sie ein Wort mit der Eigenschaft letter-spacing, nie mit Leerzeichen zwischen den Buchstaben.
- Muss eine Layouttabelle bleiben, sorgen Sie dafür, dass ihre Zellen zeilenweise gelesen Sinn ergeben, und geben Sie ihr role="presentation".
/ Was unser Scanner prüft
Der Durchlauf auf der gerenderten Seite nimmt bis zu 120 sichtbare Blöcke in main, article und section, lässt Fixiertes (fixed oder sticky) aus und vergleicht jeden Block mit dem vorherigen im Markup. Ein Block, der deutlich höher in derselben Spalte liegt, wird gemeldet, höchstens sechs pro Seite. Gemessen wird eine Desktop-Ansicht, und ob die Reihenfolge für die Bedeutung zählt, entscheidet die Prüfung nicht: Jeden Befund muss ein Mensch lesen.
/ Wer es verletzt, nach unseren eigenen Messungen
| Stelle | Sektor | Vorkommen | Wert |
|---|---|---|---|
| Bundesagentur für Arbeit | government · DE | 1 | 16 |
| Bundeszentrale für politische Bildung | government · DE | 1 | 10 |
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Ist die CSS-Eigenschaft order ein Problem für die Barrierefreiheit?
Sie kann eines sein. Die Eigenschaft order sowie row-reverse und column-reverse ändern, was man sieht, ohne das Dokument zu ändern, und assistive Technologie folgt dem Dokument. Erzählen beide Reihenfolgen dasselbe, passiert nichts. Hängt der Sinn von der Reihenfolge ab, etwa bei nummerierten Schritten oder bei einer Beschriftung und ihrem Wert, verstößt die Umsortierung gegen 1.3.2 und verwirrt meist auch Tastaturnutzer.
Was ist der Unterschied zwischen 1.3.2 Bedeutungstragende Reihenfolge und 2.4.3 Fokus-Reihenfolge?
1.3.2 betrifft die Reihenfolge, in der Inhalt gelesen wird: Text, Bilder, Überschriften, alles. 2.4.3 betrifft die Reihenfolge, in der interaktive Elemente den Tastaturfokus erhalten. Eine Seite kann das eine verletzen und das andere erfüllen. Beide haben meist dieselbe Ursache, nämlich Markup in einer Reihenfolge, das CSS in eine andere verschiebt, und dieselbe Abhilfe: den Quelltext in Lesereihenfolge bringen.
Muss die DOM-Reihenfolge genau der sichtbaren Reihenfolge entsprechen?
Nein. Das Kriterium verlangt eine korrekte Lesereihenfolge nur dort, wo die Reihenfolge die Bedeutung beeinflusst. Eine Seitenleiste darf im Code vor oder nach dem Haupttext stehen, und zwei unabhängige Spalten können in beliebiger Reihenfolge gelesen werden. Schwierig wird es, wenn Blöcke, die voneinander abhängen, etwa eine Überschrift und ihr Absatz oder die Schritte einer Anleitung, getrennt oder vertauscht werden.