18.2 Providing navigational aid for keyboard users using skip links

Der Hauptinhaltsbereich ist üblicherweise nicht das erste Element auf einer Seite. Zuerst kommt zumindest noch ein Header mit verschiedenen Elementen wie Logo, Navigation, eventuell Suche, einem Login, ...
Sehende Benutzer können sich visuell orientieren und gleich zum Hauptinhalt springen. Screenreader können sich an Landmarks orientieren und ebenfalls schnell zum Hauptinhalt navigieren. Tastaturbenutzer müssen sich mühsam durchtabben.

Was ist ein Skiplink?

Ein Skiplink ist ein Link, der es Benutzern erlaubt, Teile des Inhalts zu umgehen und direkt zu anderen Bereichen zu springen.

Wer profitiert von Skiplinks?

  • Benutzer mit Sehbeeinträchtigungen, die ein Keyboard in Kombination mit Bildschirmvergrößerungssoftware oder Screenreadern verwenden
  • Benutzer mit motorischen Beeinträchtigungen, die keine Maus verwenden können und mit einem Keyboard (oder eine AT, die mit einem Keyboard funktioniert bzw. ein Keyboard emuliert), wie z.B. Benutzer eines Switch Controls, Mund- oder Kopfstabes (mouth stick, head wand).

Relevante Success Criteria

SC 2.4.1 Bypass Blocks (Level A)
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Einen accessible Skiplink implementieren

Der Skiplink sollte das erste fokussierbare Element auf der Seite sein - idealerweise ist das das erste Kindelement des body-Elements. Das Ziel des Skiplinks ist die Region main auf der Seite (das <h1>-Element ist auch ok).

<body>
  <a href="#main" id="skip-link">Skip to main content</a>
  <header>
    ...
  </header>
  <main id="main">
    ...
  </main>
</body>

Soll der Skiplink immer sichtbar sein?
Da gibt's unterschiedliche Meinungen ... ein sichtbarer Skiplink verwirrt sehr wahrscheinlich nicht betroffende Benutzer, und ein Keyboard-User benutzt ja sowieso sein Keyboard, kann den Skiplink daher gar nicht »übersehen«. Wichtig ist, dass der Skiplink richtig versteckt ist, sodass er sichtbar wird, sobald er fokussiert wird.

Skiplink zugänglich verstecken

Der Skiplink muss für Keyboards weiterhin zugeänglich sein, auch wenn er visuell versteckt ist. Au0erdem sollte er aus dem Dokumentfluss herausgenommen werden, da sonst die Inhalte beim ein- und ausblenden springen. Das erreicht man mit einer absoluten Positionierung, wenn sichergestellt ist, dass das Element sichtbar wird, sobald es fokussiert wird.

<body>
<a href="#main" class="visually-hidden" id="skip-link">Skip to main content</a>
...
</body>
.visually-hidden:not(:focus):not(:active) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%),
  position: absolute;
  white-space: nowrap;
}

OR

#skip-link {
  /* move the link out of the viewport */
  position: absolute;
  /* adjust value as needed */
  top: -30em;
  /* add any visual styles you like */
}

Skiplink deutlich anzeigen, wenn er fokussiert wird

Relevante Success Criteria

SC 2.4.11 Focus Not Obscured (Minimum) (Level AA)
When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.
SC 2.4.12 Focus Not Obscured (Enhanced) (Level AAA)
When a user interface component receives keyboard focus, no part of the component is hidden by author-created content. 
/* :not(:focus):not(:active) macht den Link sichtbar, sobald er fokussiert wird */
.visually-hidden:not(:focus):not(:active) { ... }

OR

#skip-link:focus-visible {
  /* move the link out of the viewport */
  position: absolute;
  /* bring the link back down into view */
  top: 0;
  /* ensure it is positioned on top of everything else when it is shown */
  z-index: 10; /* adjust/choose value as needed */
}

Sicherstellen, dass der Fokus zum Ziel des Skiplinks geht

  • prüfe, ob das <main>-Element existiert
  • prüfe, ob die ID des <main>-Element mit der ID des href-Attributs übereinstimmt.

Einen beschreibenden Namen für den Skiplink wählen

Auf die Wortwahl achten:

Relevante Success Criteria

SC 2.4.4 Link Purpose (In Context) (Level A)
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambigous to users in general.
SC 2.4.9 Link Purpose (Link Only) (Level AAA)
A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.

Mehrere Skiplinks

Z.B. Skiplink zur Suche, wenn diese nicht einfach erreichbar ist. Ob es sinnvoll ist, mehrere Skiplinks zu haben, sollte mit Test herausgefunden werden. Zuviele Skiplinks sind auch nicht gut – sonst erzeugt man das Problem, das Skiplinks eigentlich lösen sollten.

In-Page Skiplinks

  • Toc - Tables of Content
  • Skiplinks vor einem Iframe
  • Listings – siehe IKEA-Website
  • Back to top Link
<section>Content before the iframe...</section>

<a href="#iframe-skip">Skip iframe content</a>

<iframe title="[ iframe title ]" src="[ src url ]"></iframe>

<section id="iframe-skip" tabindex="-1">Content after the iframe</section>

Links