Was wird geprüft?
Verschiedene Inhaltsbereiche wie Navigation, Suche oder Seiteninhalt können von Nutzenden assistiver Technologien übersprungen werden. Der Seitenaufbau soll für diese Nutzenden unabhängig von der Darstellung deutlich werden. Mindestens eine der folgenden Voraussetzungen soll erfüllt sein:
Es sind Sprunglinks vorhanden, zumindest ein Sprunglink zum Inhalt.
HTML5 Elemente zur Bereichsauszeichnung (
header
,nav
,main
,aside
,footer
) oder die diesen Elementen entsprechenden WAI-ARIA document landmarks erschließen den Seitenaufbau sinnvoll.Es werden sinnvolle Bereichsüberschriften (HTML-Strukturelemente
h1
bish6
) für "Navigation", Inhalt" o.ä. eingesetzt. Diese Technik wird mittlerweise selten genutzt, seit es in HTML Elemente für die Bereichsauszeichnung gibt. Inhaltlich orientierte Überschriften werden in der Regel nicht als Bereichsüberschriften gewertet.
iframes sollten den Bereich im title
-Attribut benennen.
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 – sind darauf angewiesen, dass die Struktur unabhängig von der Darstellung auf dem Bildschirm für Hilfsmittel wie Screenreader zugänglich und nutzbar ist. Die Verwendung von Sprunglinks, HTML5 Elementen zur Auszeichnung von Bereichen, oder Bereichsüberschriften ist dafür eine wesentliche Voraussetzung.
Bei iframes hilft ein sinnvoller Titel Screenreader-Nutzenden bei die Orientierung.
Gängige Screenreader werten das title
- und das in der
Programmierung gebräuchliche name
-Attribut aus.
Dabei wird das title
-Attribut vorrangig ausgegeben.
So können Nutzende die Bereichsüberschriften, Sprunglinks, HTML5-Elemente für Regionen bzw. 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 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 (oder ggf. die ersten nach einem Cookie-Bannner oder Dialog)
Sprunglinks zum Überspringen von Inhaltsblöcken sind das letzte fokussierbare Element vor dem zu überspringenden Inhaltsblock oder dessen erster Link
2.2 Prüfung der HTML5 Bereichsauszeichnung bzw. der entsprechenden WAI-ARIA document landmarks
Seite im Firefox aufrufen.
Quelltextanalyse: Prüfen, ob die verschiedenen Seitenbereiche durch die Auszeichnung mit
header, nav, main, aside, footer
sinnvoll erschlossen werden.Das Landmarks bookmarklet aufrufen. Die document landmarks werden nun, wenn vorhanden, hervorgehoben.
Wenn document landmarks eingesetzt werden, prüfen, ob die Zuordnung der Rollen (z. B.
navigation, main
) korrekt ist und dem Aufbau der Seite entspricht.Sind mehrere Navigationsbereiche mit
nav
oderrole="navigation"
ausgezeichnet, prüfen, ob sie mitaria-label
oderaria-labelledby
sinnvoll bezeichnet und damit unterscheidbar sind.
2.3 Prüfung der Bereichsüberschriften
Seite im Firefox aufrufen.
Das Bookmarklet "Inhalte gegliedert" oder ein anderes Bookmarklet zur Anzeige von Überschriften aufrufen.
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 korrekt gliedern.
2.4 Prüfung von iframe-Titeln
Seite im Firefox aufrufen.
In der Web Developer Toolbar die Funktion Outline > Outline Frames aufrufen.
Dann ebenfalls in der Web Developer Toolbar die Funktion Information > Display Element Information aufrufen. Der Cursor wird nun als Fadenkreuz angezeigt.
Mit dem Fadenkreuz die Kante der hervorgehobenen iframes anklicken und für alle iframes, die Inhalte haben prüfen, ob für alle iframes ein aussagekräftiger
title
-Text vorhanden ist. Dies kann z.B. sein "Werbung", "Social Media", oder die Kurzbezeichnung eines im iframe eingebundenen Videos.Wenn iframes leer sind, also keine Inhalte haben, sollten Sie über das
hidden
oder ària-hidden`-Attribut versteckt sein.
3. Hinweise
Eigenständige Bereiche
Eigenständige Bereiche sind zum Beispiel:
Navigationsbereiche (Hauptnavigation, Servicenavigation, Bereichsnavigation)
Hauptinhaltsbereich
Zusätzliche Inhalte
Fußbereich
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 grundsätzlich negativ bewertet. Es hängt vom Inhalt und von der Komplextät der Seiten ab, ob ein Mechanismus zum Überspringen von Bereichen erforderlich ist.
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
Gemeint ist die "Sie-sind-hier"-Navigation am Seitenanfang (auch breadcrumb trail oder Krümelpfad). Wenn Breadcrumbs als Listen ausgezeichnet sind, brauchen sie einen (eventuell versteckten) vorangestellten Hinweis wie "Seitenpfad", "Sie sind hier", oder "Navigationspfad" um so für Screenreader-Nutzer von anderen Menüs unterscheidbar zu sein.
Hinweis zu iframes
Im title
-Attribut soll der Zweck oder Inhalt, nicht aber die Lage des
Frames auf dem Bildschirm angegeben werden (siehe
9.2.4.2 "Sinnvolle Dokumenttitel").
Angemessene title
-Attribute sind zum Beispiel "Werbung" und "Social Media",
nicht jedoch "top" oder "rechts".
4. Bewertung
Erfüllt
Alle Bereiche der Seite können über Sprunglinks, HTML5 Elemente für Regionen und/oder WAI ARIA document landmarks oder sinnvolle Bereichsüberschriften erreicht und übersprungen werden
Teilweise erfüllt oder schlechter
Die Nutzung der Bereichsauszeichnung ist falsch oder irreführend
Sprunglinks werden nicht bei Fokuserhalt eingeblendet
Bereichsüberschriften oder Sprunglinks sind mittels
display:none
verstecktMehrere wichtige, mit
nav
oderrole="navigation"
ausgezeichnete Navigationsbereiche sind nicht durcharia-label
oderaria-labelledby
-Attribut ausgezeichnet und damit nicht voneinander unterscheidbar
Einordnung des Prüfschritts
Abgrenzung zu anderen Prüfschritten
In diesem Prüfschritt geht es um die Auszeichnung der Seitenbereiche mit Überschriften, Sprunglinks und WAI-ARIA-Attributen (landmarks). Die inhaltliche Strukturierung von Seiteninhalten wird in Prüfschritt 9.1.3.1a "HTML-Strukturelemente für Überschriften" geprüft.
In diesem Prüfschritt wird geprüft, ob iframes (wenn vorhanden) aussagekräftige Titel haben. Die Inhalte von iframes werden ebenso geprüft wie andere Seiteninhalte, etwa in Prüfschritt 9.1.3.1d "Inhalt gegliedert".
Einordnung des Prüfschritts nach WCAG 2.2
Guidelines
Success criteria
Techniques
General Techniques
G1: Adding a link at the top of each page that goes directly to the main content area
G123: Adding a link at the beginning of a block of repeated content to go to the end of the block
G124: Adding links at the top of the page to each area of the content
G140: Separating information and structure from presentation to enable different presentations
HTML Techniques
ARIA Techniques
Quellen
WCAG 2.1 Hinweis zum Unterschied von name
und title
The
title
attribute is not interchangeable with thename
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.
( H64: Using the title attribute of the frame and iframe elements)
WCAG 2.1 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.
( 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.