Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 2.4.1a (30 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 2.4.1a
Bereiche überspringbar

Technische Angaben

Version bis 10.07.2017 | Aktuell
BITV-Bedingung 2.4.1 Umgehen von Elementgruppen
WCAG-Erfolgskriterium 2.4.1 Blöcke umgehen
Bewertungsalternativen ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung mittleres Gewicht (2 Punkte)
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Seitenbereiche sind durch Überschriften, Sprunglinks oder WAI ARIA document landmarks erschlossen, Frames und Iframes haben sinnvolle Titel.
Prüfschritt nicht anwendbar Überschriften oder Sprunglinks sind nicht erforderlich, denn die Seite hat keine unterschiedlichen Bereiche.

Was wird geprüft?

Verschiedene Inhaltsbereiche wie Navigation, Suche, oder Seiteninhalt sollten mit sinnvollen Bereichsüberschriften (den HTML-Strukturelementen h1 bis h6) versehen oder über Sprunglinks erreichbar sein, damit Nutzer assistiver Technologien sie überspringen können und der Seitenaufbau unabhängig von der Darstellung deutlich wird.

Verschiedenen Inhaltsbereiche wie Navigation, Suche oder Seiteninhalt können von Nutzern assistiver Technologien übersprungen werden. Der Seitenaufbau soll unabhängig von der Darstellung deutlich werden. Eine der folgenden Voraussetzungen soll erfüllt sein:

  • Es werden sinnvolle Bereichsüberschriften (HTML-Strukturelemente h1 bis h6) eingesetzt
  • Es sind Sprunglinks vorhanden.
  • HTML5 Elemente zur Auszeichnung von Bereichen (header, nav, main, aside, footer) erschließen den Seitenaufbau sinnvoll.
  • Zusätzlich können WAI-ARIA document landmarks zur Strukturierung der Seitenbereiche eingesetzt werdenstrukturieren die Seitenbereiche sinnvoll. Wenn landmarks verwendet werden, müssen sie den Seitenaufbau sinnvoll erschließen.

Frames und Iframes brauchen ein sinnvolles title-Attribut.

Warum wird das geprüft?

Visuell werden Webseiten mit Mitteln wie Überschriften, Spalten oder Kästen strukturiert. Dank dieser Strukturierung weiß der Benutzer, was zusammengehört, kann das Angebot der Webseite leicht überblicken und gezielt auf die Inhalte zugreifen, die ihn interessieren.

Benutzer, die diese visuelle Ordnung nicht nutzen können – zum Beispiel, weil sie blind sind oder nur einen kleinen Ausschnitt der Seite sehen können – sind darauf angewiesen, dass die Struktur unabhängig von der Darstellung auf dem Bildschirm zugänglich und nutzbar ist. Die Verwendung von (oft unsichtbaren) Bereichsüberschriften, oder von Sprunglinks oder HTML5 Elementen zur Auszeichnung von Regionen ist dafür eine wesentliche Voraussetzung.

Bei Frames ist eine sinnvoller Titel wichtig für die Orientierung mit Screenreadern. Gängige Screenreader werten das title- und das in der Programmierung gebräuchliche name-Attribut aus. Dabei wird das title-Attribut vorrangig ausgegeben. Sie sprechen beim Umschalten zwischen den Frames mit den Tastenkürzeln den Titel des aktiven Frames aus.

Noch in der Entwicklung sind die WAI-ARIA document landmarks werden mittlerweile gut von assistiven Technologien unterstützt zur Abbildung der Struktur. Richtig eingesetzt können sie in der Zukunft die Zugänglichkeit und Nutzbarkeit von Webseiten wesentlich verbessern.

Der Einsatz von HTML5 Elementen für Regionen wird inzwischen gut von assisitven Technologien unterstützt. Die zusätzliche Berücksichtigung eines role-Attributs (WAI ARIA document landmarks) kann die Unterstützung von Regionen jedoch verbessern.

So können Benutzer die Bereichsüberschriften, Sprunglinks, HTML5-Elmente für Regionen bzw. und WAI-ARIA document landmarks anwenden:

  • Konstante Bereiche am Seitenbeginn, etwa Navigation oder Seitenkopf, überspringen, um direkt zum Inhalt zu gelangen
  • Zwischen Bereichen hin- und her wechseln

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn es auf der Seite deutlich voneinander abgegrenzte Bereiche gibt, etwa Navigation und Inhalt. Das ist bei informationsorientierten Seiten meist der Fall.

2. Prüfung

2.1. Prüfung der Bereichsüberschriften

  1. Seite im Firefox aufrufen.
  2. Über die Web Developer Toolbar die Seite ohne Stylesheets anzeigen (über CSS > Styles deaktivieren > Alle Styles deaktivieren Stylesheets deaktivieren).
  3. Das Bookmarklet "Inhalte gegliedert" aufrufen.
  4. Die Bereichsüberschriften im Zusammenhang mit den durch sie strukturierten Inhalten ansehen und prüfen, ob sie aussagekräftig sind, die Strukturelemente für Überschriften nutzen, und die Inhaltsbereiche der Seite vollständig und korrekt gliedern.

2.2. Sprunglink-Prüfung

Wenn Sprunglinks vorhanden sind, prüfen, ob die folgenden Anforderungen erfüllt sind:

  • Sprunglinks verschieben beim Auslösen den Tastaturfokus zum angegebenen Bereich (bzw. beim Überspringen von Inhaltsblöcken auf den Inhalt direkt nach dem zu überspringenden Bereich)
  • Sprunglinks sind entweder permanent sichtbar oder werden bei Fokuserhalt eingeblendet
  • Sprunglinks am Seitenbeginn sind die ersten fokussierbaren Elemente der Tabreihenfolge
  • Sprunglinks zum Überspringen von Inhaltsblöcken sind das letzte fokussierbare Element vor dem zu überspringenden Inhaltsblock oder dessen erster Link

2.3. Prüfung der HTML5 Elemente für Regionen und WAI-ARIA document landmarks

  1. Seite in Firefox aufrufen.
  2. Quelltextanalyse: Prüfen, ob die verschiedenen Seitenbereiche durch die Auszeichnung mit header, nav, main, aside, footer sinnvoll erschlossen werden.
  3. In der Juicy Studio Accessibility Toolbar ARIA > document landmarks wählen. Die document landmarks werden, wenn vorhanden, hervorgehoben.
  4. Wenn document landmarks eingesetzt werdeen, prüfen, ob die Zuordnung der Rollen (z.B. navigation, main) korrekt ist und dem Aufbau der Seite entspricht.
  5. Sind mehrere Navigationsbereiche nur mit nav oder role="navigation" ausgezeichnet, dann prüfen, ob sie mit aria-label oder aria-labelledby sinnvoll bezeichnet sind.

2.4. Prüfung von Frame-Titeln

  1. Seite im Internet Explorer aufrufen.
  2. In der Web Accessibility Toolbar die Funktion Frames > Frame Name / Title aufrufen und prüfen, ob für alle Frames ein aussagekräftiger title-Text vorhanden ist.

3. Hinweise

Eigenständige Bereiche

Eigenständige Bereiche sind zum Beispiel:

  • Navigation und Inhalt
  • Spalten mit unterschiedlichen Inhalten
  • Bereiche, die durch Umrahmung als zusammengehörig gekennzeichnet sind
  • Frames oder Iframes

Der Fußbereich wird nicht als eigenständiger Bereich gewertet, wenn dort lediglich redundante Links, Copyright-Hinweise oder Angaben zum Erstellungs- oder Änderungsdatum stehen.

Hinweis zu Sprunglinks und Document Landmarks

Das Fehlen von Sprunglinks und die Nichtverwendung von WAI-ARIA Document Landmarks werden nicht negativ bewertet.

Hinweis zu mehrfach verwendeten Landmarks bzw. HTML5-Elemente für Bereiche

Wird eine WAI-ARIA document landmark bzw. ein HTML5-Element für Bereiche mehrfach verwendet (z.B. role="navigation" oder nav), sollte sie mit Hilfe von aria-label oder aria-labelledby aussagekräftig benannt werden.

Hinweis zu Sie-sind-hier"-Navigationen

Die "Sie-sind-hier"-Navigation am Seitenanfang (auch breadcrumb trail oder Krümelpfad) Wenn Breadcrumbs als Listen ausgezeichnet sind, brauchen sie einen (eventuell versteckte) vorangestellten Hinweis wie "Seitenpfad", "Sie sind hier", oder "Navigationspfad" um so für Screenreader-Nutzer von anderen Menüs unterscheidbar zu sein.

Hinweis zu Frames und Iframes

Im title-Attribut soll der Zweck oder Inhalt, nicht aber die Lage des Frames auf dem Bildschirm angeben werden. Angemessene title-Attribute sind zum Beispiel "Navigation" und "Inhalt", nicht jedoch "top" oder "rechts". Oft werden in Framesets auch leere Frames eingebunden, die ausschließlich zu Layoutzwecken verwendet werden. Bei solchen Frames sollte als Bezeichnung "Leer" gewählt werden.

4. Bewertung

Erfüllt:

  • Alle Bereiche der Seite können über Überschriften, oder Sprunglinks, HTML5 Elemente für Regionen und/oder WAI ARIA document landmarks erreicht und übersprungen werden. Frames und Iframes haben sinnvolle Titel.

Nicht voll erfüllt:

  • Bereichsüberschriften sind nicht aussagekräftig oder irreführend.
  • Der Einsatz von HTML5 Elementen für Regionen erschließt die Seitenbereiche nicht vollständig.
  • Die Zuordnung von WAI-ARIA document landmarks ist falsch oder irreführend.
  • Bereichsüberschriften oder Sprunglinks sind mittels display:none versteckt
  • Der Seitenpfad (Breadcrumb) ist als Liste ausgezeichet, hat aber keinen vorangestellten Hinweis (z.B. Überschrift)
  • Mehre wichtige Navigationsbereiche sind mit WAI-ARIA document landmarks oder HTML5-Elementen für Bereiche ausgezeichnet und sind nicht mit aria-label oder aria-labelledby unterschieden.

Nicht erfüllt:

  • Es gibt auf der Seite verschiedene Bereiche mit für sich nutzbaren Inhalten, es sind aber keine Überschriften vorhandendiese werden jedoch weder mit Überschriften, noch mit Sprunglinks oder HTML5 Elementen erschlossen.
  • Auf der Seite werden mehrere klar abgrenzbare Themen behandelt, es wurde aber nur pro forma eine Hauptüberschrift ausgezeichnet.

Einordnung des Prüfschritts

Formulierung BITV 2.0

2.4.1 Umgehen von Elementgruppen

Für Gruppen von Elementen, die auf mehreren Webseiten wiederholt werden, sind Mechanismen verfügbar, um diese zu umgehen.

1.3.1 Informationen und Beziehungen

Alle Informationen, Strukturen und Beziehungen, die durch Layout und Präsentation vermittelt werden, sind durch Programme erkennbar oder im Text verfügbar.

Abgrenzung zu anderen Prüfkriterien

  • In diesem Prüfschritt geht es um die Auszeichnung der Seitenbereiche mit Überschriften, Sprunglinks und WAI-ARIA-Attributen (landmarks). Die inhlatliche Strukturierung von Seiteninhalten wird in Prüfschritt 1.3.1a "HTML-Strukturelemente für Überschriften" geprüft.
  • In diesem Prüfschritt wird geprüft, ob Frames und Iframes (wenn vorhanden) vernünftige Titel haben. Die Inhalte von Iframes werden ebenso geprüft wie andere Seiteninhalte, etwa in Prüfschritt 1.3.1d "Inhalte gegliedert".

Einordnung des Prüfschritts nach WCAG 2.0

Guidelines

Success criteria

Techniques

General Techniques
HTML Techniques
ARIA Techniques

Quellen

Artikel zu diesem Prüfschritt auf bitvtest.de

WCAG 2.0 Hinweis zum Unterschied von name und title

The title attribute is not interchangeable with the name attribute. The title labels the frame for users; the name labels it for scripting and window targeting. The name is not presented to the user, only the title is.

Quelle: H64: Using the title attribute of the frame and iframe elements

WCAG 2.0 Verknüpfung von WAI ARIA document landmarks und Text

The purpose of this technique is to provide names for regions of a page that can be read by assistive technology. The aria-labelledby attribute provides a way to associate an section of the page marked up as a region or landmarks with text that is on the page that labels it.

Quelle: ARIA13: Using aria-labelledby to name regions and landmarks

Ergänzung von HTML5 Elementen mit WAI ARIA

Script, das bei HTML5 Elementen automatisch ARIA-Rollen ergänzt: Polyfill accessifyhtml5.js von Yatil

Fragen zu diesem Prüfschritt

Müssen die Bereiche der Webseite durch h1-Überschriften ausgezeichnet werden?

Bei den meisten Webangeboten sind bestimmte Bereiche durchgängig für die Navigation reserviert. Andere wiederkehrende Bereich können etwa die Suche oder der Seitenkopf sein. Diese Bereiche sind auf allen Seiten des Angebots gleich aufgebaut und gestaltet. Sie haben keinen engen Bezug zum besonderen Seiteninhalt, sind eigentlich nicht den einzelnen Seiten, sondern eher dem Webauftritt als ganzen zuzurechnen. Es liegt daher nahe, die Navigation, den Inhaltsbereich und weitere klar abgegrenzte Bereiche der Seite jeweils mit einer h1-Hauptüberschrift zu versehen.

Es gibt jedoch auch andere Möglichkeiten, Seitenbereiche auszuzeichnen, etwa durch h5- oder h6-Überschriften, falls diese in der Gliederung der Seiteninhalte nicht verwendet werden (vergleiche den Artikel auf einfach-für-alle: "Passende Überschrift hier einsetzen")

Vom BITV-Test werden unterschiedliche Herangehensweisen akzeptiert. Es muss in jedem Fall geprüft werden, ob Überschriften konsistent eingesetzt werden, um die Seiten-Bereiche und deren Inhalte zu erschließen.

Können die document landmarks nicht Überschriften ersetzen? Sonst werden Bereiche ja doppelt ausgezeichnet.

Langfristig werden die document landmarks (oder die neuen semantischen Elemente in HTML5) Bereichsüberschriften ersetzen können. Bisher ist aber die Auswertung von landmarks durch verbreitete Screenreader noch so unvollständig, dass auf eine Strukturierung der Seite durch Bereichsüberschriften noch nicht verzichtet werden sollte. Dass Bereichsauszeichungen unter Umständen zweimal vorgelesen werden, ist ein Nachteil, der gegenüber einer möglicherweise fehlenden Auszeichnung der Bereiche geringer wiegt.

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