skip-link
Skip-Link muss ein auflösbares, nutzbares Ziel haben
Prüft, dass das href-Fragment eines Skip-Links („skip to ...“) auf ein echtes, aktuell nutzbares Element im Dokument verweist.
Anwendbarkeit. Gilt für <a href="#fragment">-Elemente, die an einem von zwei Merkmalen als Skip-Links erkennbar sind:
- der zugängliche Name folgt einer üblichen Skip-Link-Formulierung in einer der mitgelieferten Sprachen: „skip“ oder „jump to“ (Englisch); „aller au contenu“, „passer au contenu“, „accéder au contenu“, „accès direct“, „évitement“ (Französisch); „springen“, „überspringen“, „direkt zum“, „zum Inhalt“ (Deutsch); „saltar“, „ir al contenido“ (Spanisch); „スキップ“, „本文へ“ (Japanisch). „jump to“ steht neben „skip“, weil echte Skip-Links beide Konventionen verwenden (z. B. ein Link „Jump to section“);
- oder es ist der erste Link im Dokument und steht vor dem
main-Element (oder einem Element, dessen role-Attribut zu main aufgelöst wird, sein erstes echtes Rollen-Token ohne Berücksichtigung der Groß-/Kleinschreibung): die übliche Stelle eines Skip-Links, unabhängig von der Formulierung.
Andere Ankerlinks auf dieselbe Seite sind keine Skip-Links und bleiben unberücksichtigt. Hat die Seite weder ein <main> noch role="main", ist ein Custom Element, dem seine ElementInternals die Rolle main geben (this.attachInternals().role), das main, an dem die Position eines Links gemessen wird.
Erwartung. Das Fragment des Links verweist auf ein echtes Element im Dokument (über eine passende id oder ein veraltetes <a name="...">), und dieses Ziel ist aktuell nutzbar (nicht aus dem Accessibility Tree ausgeblendet und, sofern Browser-Geometrie verfügbar ist, mit einer Fläche gerendert, die kein Vorfahre auf nichts beschneidet: einer mit overflow: hidden, der auf keine Größe zusammengefallen ist, oder einer mit overflow: clip, der es außerhalb hält). Ein Skip-Link, dessen Ziel fehlt oder faktisch unbrauchbar ist, bietet kein verlässliches Sprungziel. Ein leeres Ziel (kein Element und kein Text darin), etwa <a id="content" tabindex="-1"></a> oder ein veraltetes <a name>, hat naturgemäß keine Fläche: Das Folgen des Links verschiebt den Fokus oder den Startpunkt der sequenziellen Fokusnavigation dorthin (HTML, „scroll to the fragment“), sodass der nächste Tab von dort aus weitergeht. Gemessen wird stattdessen, was es markiert: sein nächster Vorfahre mit eigenem Inhalt, etwa das <main>, das es einleitet. Ein Ziel mit display: contents hat keine eigene Box und wird an den Boxen seiner Kinder gemessen.
Was ein Befund meldet.
href: dashrefdes Links.unusableReasonCode(ein nicht nutzbares Ziel): warum es nicht nutzbar ist:ACC_TREE_INELIGIBLE, wenn es aus dem Accessibility Tree ausgeblendet ist,NO_CLIENT_RECTS, wenn es nicht gerendert wird,ZERO_AREA_TARGET, wenn es, oder bei einem leeren Ziel der Inhalt, den es markiert, keine Fläche hat oder auf nichts beschnitten ist.targetSelector(ein nicht nutzbares Ziel): ein Selektor für das Ziel.geometryCheckEnabled(ein nicht nutzbares Ziel): ob sich die Geometrie des Ziels messen ließ, wofür ein Browser nötig ist.viewport.width,viewport.height(ein Ziel, dessen Geometrie gemessen wurde): der Viewport, in dem die Seite dargestellt wurde, in CSS-Pixeln. Ein Ziel, das bei einer Breite ausgeblendet ist, kann bei einer anderen nutzbar sein.
Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.
Beispiele
<a href="#target">Skip to content</a><div id="target">Target content</div>
Das Fragment-Ziel existiert und ist nutzbar.
<a href="#missing">Skip to main content</a>
Das Fragment-Ziel des Links existiert nirgends auf der Seite, daher führt seine Aktivierung ins Leere.
<a href="#contenu">Aller au contenu</a>
Auch die französische Skip-Link-Formulierung wird erkannt, und das Ziel fehlt.
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
SKIP_LINK_TARGET_MISSING
- Laden Sie die Seite, drücken Sie ein- oder zweimal Tab, bis der im Bericht genannte Sprunglink erscheint, und notieren Sie sein href.
- Drücken Sie Eingabetaste, um ihm zu folgen.
- Drücken Sie noch einmal Tab und sehen Sie, wo der Fokus landet.
Bestanden. Das Folgen des Links springt zum Hauptinhalt und das nächste Tab geht zum ersten Bedienelement darin.
Nicht bestanden. Nichts passiert oder der Fokus bleibt oben, weil kein Element zum Ziel des Links passt, sodass der Link wiederholte Inhalte nicht überspringt (Best Practice, G1).
SKIP_LINK_TARGET_UNUSABLE
- Laden Sie die Seite in der Fensterbreite, die der Bericht angibt (falls vorhanden), drücken Sie Tab, bis der Sprunglink erscheint, und drücken Sie Eingabetaste.
- Beobachten Sie, ob die Seite zum Ziel scrollt und der Zielbereich sichtbar ist.
- Drücken Sie noch einmal Tab und sehen Sie, wo der Fokus landet.
Bestanden. Die Seite springt zum sichtbaren Hauptinhalt und das nächste Tab geht zum ersten Bedienelement darin.
Nicht bestanden. Das Ziel ist verborgen, wird nicht angezeigt oder hat keine Größe, sodass der Fokus nicht an den wiederholten Inhalten vorbeigeht (Best Practice, G1).