Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 1.3.2a (18 von 49)


zum WCAG-Test wechseln


Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 1.3.2a
Sinnvolle Reihenfolge

Technische Angaben

Version bis 10.07.2017 | Aktuell
BITV-Bedingung 1.3.2 Aussagekräftige Reihenfolge
WCAG-Erfolgskriterium 1.3.2 Bedeutungstragende Reihenfolge
Bewertungsalternativen ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung hohes Gewicht (3 Punkte)
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Seiteninhalte stehen unabhängig von der Darstellung in einer sinnvollen Reihenfolge. Eingeblendete Inhalte sowie dynamisch eingefügte oder geänderte Inhalte erscheinen an sinnvoller Stelle im Quelltext.
Prüfschritt nicht anwendbar Es werden keine Stylesheets verwendet und keine Elemente dynamisch eingefügt oder verändert.

Was wird geprüft?

Seiteninhalte sollen unabhängig von der Darstellung in einer sinnvollen und brauchbaren Reihenfolge stehen. Was inhaltlich zusammengehört (etwa eine Überschrift und die dazugehörigen Inhalte darunter) soll in der Ansicht ohne CSS nicht auseinandergerissen werden. Mittels CSS versteckte oder mittels AJAX dynamisch hinzugefügte Seiteninhalte sollen deshalb an sinnvoller Stelle im Seitenquelltext erscheinen.

Warum wird das geprüft?

Screenreader lesen die Elemente, die auf dem Bildschirm in der Fläche angeordnet sind, nacheinander vor - und zwar in der Reihenfolge, in der sie im Quellcode stehen. Die Reihenfolge der Elemente muss also gut verständlich und nutzbar sein. Die Darstellung der Seite ohne CSS folgt der Quellcode-Reihenfolge.

Wenn Elemente dynamisch zum Quellcode hinzugefügt oder verändert werden, bekommen Screenreadernutzer das oft nicht mit. Deshalb sollten solche Elemente in den meisten Fällen direkt nach dem auslösenden Element eingefügt werden.

In manchen Fällen können sie, wenn dies im Kontext verständlich ist, auch weiter unten auf der Seite eingefügt oder verändert werden (also nicht direkt nach dem auslösenden Element).

Werden Elemente an anderer Stelle, etwa am Seitenende, eingefügt (das ist oft bei Lightboxen der Fall), müssen Scripts dafür sorgen, dass eine sinnvolle Fokusreihenfolge geschaffen wird und auch blinde Nutzer die Änderung mitbekommen.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn CSS verwendet wird, insbesondere für die Positionierung von Inhalten, oder Inhalte dynamisch eingefügt werden.

2. Prüfung

2.1. Nutzbarkeit ohne Stylesheets

  1. Seite im Internet Explorer aufrufen und in der Web Accessibility Toolbar CSS > Disable CSS wählen.
  2. Prüfen, ob die Inhalte in der Ansicht ohne CSS nach wie vor nutzbar sind. Gibt es: Bleibt die logische Reihenfolge nach Abschalten der CSS und für Screen-Reader erhalten?
    • Gibt es Linearisierungsprobleme (die Reihenfolge der Inhalte ist verwirrend)?
    • Verwirrende Inhalte, die in der Darstellung mit CSS versteckt sind?
    • Überlagerungen von Inhalten?
    • Tabellen, die ohne Tabellenränder total unübersichtlich werden?
    • Lightboxes und sonstige Elemente, die nicht mehr bedienbar oder nicht mehr verständlich sind?
    • Gemischte Farbangaben in HTML und CSS (Text ist nicht mehr oder nur schlecht lesbar)?
    • Verschwindende nicht-dekorative Inhalte, die mit den CSS Pseudo-Elementen :before oder :after eingebaut wurden?
    • Verschwindende Leerzeichen, so dass einzelne Wörter optisch zu einem werden, oder durch Leerzeichen gesperrte Texte, die auch ohne CSS noch gesperrt sind?

2.2. Prüfung von dynamisch eingefügten Inhalten

Wenn Inhalte dynamisch generiert werden (also Interaktionen auf der Seite Inhalte hinzufügen, die nicht schon in der Ansicht ohne CSS auf der frisch geladenen Seite sichtbar sind):

  1. Seite im Firefox aufrufen.
  2. Voreinstellung im Firefox: Im Menü Extras > Einstellungen wählen. Den Bereich "Erweitert" auswählen, im linken Reiter "Allgemein" im Bereich "Eingabehilfen" die Option "Markieren von Text mit der Tastatur zulassen" auswählen. Hierdurch wird die Cursor-Position als blinkende Einfügemarke angezeigt. Dies entspricht in der Regel dem Screenreader-Fokus.
  3. Dynamisch eingefügte Inhalte aufrufen, etwa durch Formulareingabe oder Auslösen eines Links.
  4. FirebugBrowsereigenes Entwicklerwerkzeug (Inspektor für Firefox) aufrufen, das Element-Symbol (das Icon zeigt den Cursor auf einer Taste) links in der Firebug-Menüleiste auswählen und den eingefügten Inhalt anklicken. Im Firebug- eingeblendetenFenster lässt sich nun der generierte Quellcode im Zusammenhang einsehen.
  5. Position des eingefügten Elements prüfen.

    Fall 1: Erscheint der eingefügte Inhalt im Quellcode unterhalb des auslösenden Elements? (Siehe dazu die Erläuterung in Abschnitt 3. Hinweise.)

    Fall 2: Wenn generierte Pseudo-Fenster (Lightboxen) im Quellcode nicht direkt nach dem auslösenden Element, sondern an anderer Stelle, etwa ganz am Seitenende, eingefügt werden:

    1. Pseudo-Fenster schließen und vom auslösenden Element aus erneut mit der Tastatur aufrufen.
    2. Erkennen auch Screenreader-Nutzer, dass ein neuer Inhalt hinzugefügt wurde? Das kann auf verschiedene Weise geschehen, z.B.:
      • Der Fokus wird über einen Skript zum Beginn des eingefügten Elements verschoben (die blinkende Einfügemarke ist an dessen Beginn sichtbar)
      • Der Link-/Button-Text oder eine Eigenschaft des auslösenden Elements (etwa disabled) wird geändert und beim Weiter-Tabben erhält das hinzugefügte Element den nächsten Fokus
    3. Wenn das Pseudo-Fenster geschlossen wird: wird der Fokus auf das auslösende Element zurückverschoben?

2.3 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.

  1. Die Seite im Internet Explorer aufrufen.
  2. In der Web Accessibility Toolbar die Funktion Tables> Linearize wählen. Falls durch die Verschiebungen des Layouts Texte auf gleichfarbigem Hintergrund dargestellt werden und dadurch nicht mehr sichtbar sind, muss zusätzlich m Menü IE (Pfeiltaste) > Internet Explorer Accessibility Options gewählt und dann die Option Farbangaben auf Webseiten ignorieren aktiviert werden.
  3. Prüfen, ob die Reihenfolge der angezeigten Inhalte immer noch sinnvoll ist.

3. Hinweise

Zur Linearisierung: Die Anordnung der Seitenelemente kann sich ändern, wenn der Inhalt ohne das für die Darstellung auf dem Bildschirm vorgesehene Stylesheet genutzt wird. Ohne den passenden Kontext sind viele Inhalte nicht verständlich oder verwirrend. Ein Beispiel sind durch CSS versteckte Inhalte von Lightboxes oder anderen Popup-Elementen, die nun irgendwo auftauchen.

Zu gemischten Farbangaben: Gelegentlich wird die Farbe von Schriften im Stylesheet festgelegt, die Farbe des Hintergrundes jedoch in der HTML-Datei. Die Schriften erscheinen dann ohne das zugeordnete Stylesheet unter Umständen vor gleichfarbigem Hintergrund.

Zur Einfügung dynamisch generierter Inhalte unterhalb des auslösenden Elements: In manchen Fällen kann es angemessen sein, Inhalte nicht unmittelbar nach dem auslösenden Element, sondern weiter unten auf der Seite dynamisch einzufügen bzw. zu aktualisieren. Ein Beispiel ist die dynamische Ergebnisanzeige unterhalb eines mehrstufigen Suchformulars. Hier ist zu prüfen, ob das dynamische Verhalten des Formulars schon aus dem Kontext der Eingabefelder bzw. Auswahllisten heraus bzw. durch erläuternde Texte oder Hilfefunktionen deutlich wird.

Zu WAI-ARIA: Die Verwendung von WAI-ARIA spielt in diesem Prüfschritt keine Rolle.

4. Bewertung

Nicht voll erfüllt:

  • Versteckte Texte oder dynamische Einfügungen erscheinen an verwirrender Stelle im Quellcode.
  • Pseudofenster, die außerhalb der normalen Quellcodereihenfolge, also etwa am Seitenende, eingefügt werden, erhalten nicht unmittelbar oder beim nächsten Tabben den Fokus.
  • Beim Schließen von Pseudofenstern wird der Fokus nicht auf das auslösende Element zurückgesetzt.

Einordnung des Prüfschritts

Formulierung BITV 2.0

1.3.2 Aussagekräftige Reihenfolge

Wenn die Reihenfolge, in der der Inhalt präsentiert wird, Auswirkungen auf dessen Bedeutung hat, ist die richtige Lese-Reihenfolge durch Programme erkennbar.

1.3.3 Sensorische Merkmale

Anweisungen zum Verständnis und zur Nutzung des Inhalts stützen sich nicht ausschließlich auf sensorische Merkmale der Elemente wie z. B. Form, Größe, visuelle Platzierung, Orientierung oder Ton.

Abgerenzung von anderen Prüfkriterien

  • Geprüft wird hier die richtige Position eingeblendeter oder eingefügter Inhalte. Ob diese Inhalte selbst sinnvoll sind, wird in anderen Prüfkriterien wie 3.3.1a "Fehlermeldungen hilfreichFehlererkennung" oder 2.4.4a "Aussagekräftige Linktexte" geprüft.
  • Custom controls, die etwa Benutzerschnittstellen aus positionierten divs mit Hintergrundbildern erzeugen, werden bereits in einer Reihe von bestehenden Prüfkriterien implizit geprüft, etwa 1.4.3c "Inhalte bei benutzerdefinierten Farben erkennbar", 2.4.7a "Aktuelle Position des Fokus deutlich", und 2.4.6a "Title-Attribut für Symbole" und 4.1.2a "Name und Rolle von Bedienelementen verfügbar".

Einordnung des Prüfschritts nach WCAG 2.0

Guideline

Success criteria

Techniques

General Techniques

CSS Techniques

Scripting Techniques

Failures

Quellen

Relevante Artikel und Ressourcen zu DOM Scripting:

Fragen zu diesem Prüfschritt

In XHTML ist die Angabe eines Stylesheets zwingend erforderlich. Kann dann dieser Prüfschritt trotzdem erfüllt werden?

Strenggenommen geht es nicht darum, dass die Webseite ohne jede Aufbereitung genutzt werden kann. Sondern sie soll auch ohne die vom Webdesigner zugeordneten Stylesheets, also zum Beispiel mit Stylesheets eines Browsers oder mit individuellen, vom Benutzer selbst definierten Stylesheets zu gebrauchen sein.

Fast alle neueren Browser können mittlerweile Stylesheets auswerten. Ist die Prüfung der Ansicht ohne Stylesheets nicht langsam überflüssig?

Manche Browser ermöglichen die Nutzung eigener Stylesheets, deren Darstellungsverhalten dem Autor natürlich nicht bekannt ist. Auch die Ansicht einer Seite ohne Stylesheets kann es mitunter einfacher machen, sich in den Inhalten zurechtzufinden.

Der Prüfschritt zielt aber noch auf etwas anderes, und zwar auf die konsequente Trennung von Inhalt und Darstellung. Das Ziel des Einsatzes von Stylesheets ist ja, daß die Darstellung unabhängig vom Inhalt der Seite festgelegt ist. Wenn eine Webseite ohne das zugehörige Stylesheet in völlig unsinniger Reihenfolge erscheint, ist dieses Ziel nicht erfüllt. Denn dann hat erst das Stylesheet die Elemente des Webauftritts in eine vernünftige, brauchbare Reihenfolge gebracht. Seine Wirkung ist nicht (wie vorgesehen) auf die Darstellung beschränkt. Insofern bleibt die Prüfung der Ansicht ohne Stylesheets immer aktuell.

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt