Prüfschritt 9.1.3.2 Sinnvolle Reihenfolge

2.1 Lesereihenfolge für Screenreader-Nutzende

• Seite im Browser Chrome oder Firefox aufrufen.

• Über eine Quellcode-Analyse die Lesereihenfolge der Elemente im DOM prüfen.

• Gegebenenfalls zusätzlich NVDA aktivieren, die Seiteninhalte im Lesemodus des Screenreaders (mit Abwärts-Pfeiltaste) durchlaufen.

• Gibt es Linearisierungsprobleme, die bei der Screenreader-Nutzung störend sind? Beispiel: Beschriftungen werden nicht vor dem jeweiligen Eingabefeld ausgegeben.

• Sind Inhalte wie Ausklappmenüs, Ausklappbereiche, oder Dialoge, die standarmäßig visuell ausgeblendet sind, mit geeigneten Techniken für Screenreader-Nutzende verborgen?

2.2 Prüfung der Linearisierbarkeit von Layouttabellen

Wenn Tabellen für das Layout (die Anordnung von Elementen auf der Seite) eingesetzt werden, müssen sie linearisierbar sein.

• Seite im Firefox anzeigen.

• Mittels Web Developer Toolbar die Funktion Miscellaneous > Linearize page die Struktur der Seite und damit die der Layouttabelle linearisieren.

• Prüfen, ob die lineare Reihenfolge der angezeigten Inhalte sinnvoll ist.

Reihenfolge von Inhalten

Die visuelle Anordnung der Seitenelemente kann von der Reihenfolge im Quelltext abweichen. Sichtbare Inhalte sollen in der Regel in der gleichen Reihenfolge wie im Quelltext stehen. Bei der Nutzung von CSS Layout-Technik grid kommt es hier häufiger zu Problemen.

In manchen Fällen können bewusste Abweichungen von der visuellen Reihenfolge akzeptabel sein, etwa, wenn bei Meldungen in einem News-Bereich visuell das Datum der Meldung über der Überschrift steht, in der Lesereihenfolge aber auf diese folgt. Ein anderes Beispiel sind Überschriften mit Dachzeilen (etwa Kategorien von Meldungen). Hier kann es sinnvoll sein, dass die Dachzeile erst nach der Überschrift ausgegeben wird. Das Kriterium bei der Beurteilung ist immer: sind die Inhalte in der ausgegebenen Reihenfolge verständlich?

Dynamische Elemente

Häufig werden dynamische Elementen nur visuell ausgeblendet, sind aber für den Screenreader im Lesemodus noch erreichbar, weil sie nicht mit geeigneten Mitteln wie display:none versteckt wurden. Grundsätzlich besteht für Screenreader-Nutzende das Problem, dass oft umfangreiche Inhalte (etwa Navigationsmenüs) durchlaufen werden müssen. Für sehbehinderte Nutzende, die den Screenreader zusätzlich einsetzen, besteht zusätzlich das Problem, dass visuelle Inhalte und Screenreader-Ausgabe auseinanderklaffen.

Nicht voll erfüllt

• Die Lesereihenfolge entspricht nicht der visuellen, die Inhalte werden dadurch unverständlich oder Zuordnungen (etwa von Beschriftungen und Feldern sind in der Screenreade-Ausgabe fehlerhaft.

• Visuell versteckte Elemente, etwa Ausklappmenüs oder Dialoge, sind nicht für Screenreader-Nutzende verborgen.

Guideline

• Guideline 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Success criterion

• 1.3.2 Meaningful Sequence (Level A)

Techniques

CSS Techniques

• C6 Positioning content based on structural markup

• C8 Using CSS letter-spacing to control spacing within a word

• C27: Making the DOM order match the visual order

Scripting Techniques

• SCR21: Using functions of the Document Object Model (DOM) to add content to a page

• SCR28: Using an expandable and collapsible menu to bypass block of content

Failures

• F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS

• F32: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word

• F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content

• F49 Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized