Skiplink-List

Info

Was macht die Komponente?

Skip-Links sind Navigationshilfen, die es Nutzenden ermöglichen, schnell zu wichtigen Inhalten auf einer Seite zu springen, insbesondere für Screenreader-Nutzende und Tastaturnavigation.

Wann soll die Komponente eingesetzt werden?

Um die Barrierefreiheit einer Webseite zu verbessern.
Wenn Nutzende schnell zu Hauptinhalten, Menüs oder anderen wichtigen Bereichen der Seite gelangen sollen.
Um Nutzenden die Möglichkeit zu geben, lange Navigationsabschnitte zu überspringen und direkt zu relevanten Inhalten zu springen.

Regeln

Achte darauf, dass Skip-Links als erste interaktive Elemente im DOM platziert werden, damit sie sofort über die Tastatur erreichbar sind.
Verwende eine klare und prägnante Beschriftung für jeden Skip-Link, um die Zielbereiche eindeutig zu kennzeichnen.
Skip-Links sollen den Nutzenden direkt zu dem entsprechenden Abschnitt der Seite springen lassen, ohne zusätzlichen Inhalt oder Navigationsschritte.

Anatomie

Nummer	Typ	Beschreibung	Optional	Hinweis
1	Komponente	`sbb-block-link`	Nein	Es sind mehrere Links in der Liste erlaubt. Nur der jeweils fokussierte Link wird dargestellt.

Demo

Beispiele

Skiplink List

Skiplink List With Title

HTML-Markup kopiert.

Implementation

The sbb-skiplink-list is a component that can be used to collect one or more hidden sbb-block-links,
which become visible only when focused, e.g., using the Tab key.

When the component contains multiple link elements, only one of them is shown (the focused one), while the others stay visually hidden.

It has an optional sbb-title element, which is visually hidden too, but it's read from screen-readers,
and it can be set using the title-content property.

<sbb-skiplink-list title-level="2" title-content="Title text">
  <sbb-block-link href="https://www.sbb.ch/">Content</sbb-block-link>
  <sbb-block-link href="https://www.sbb.ch/en/help-and-contact.html">Contact</sbb-block-link>
  ...
</sbb-skiplink-list>

Properties

Name	Attribute	Privacy	Type	Default	Description
`titleContent`	`title-content`	public	`string \| undefined`		The title text we want to place before the list.
`titleLevel`	`title-level`	public	`SbbTitleLevel`	`'2'`	The semantic level of the title, e.g. 2 = h2.

CSS Properties

Name	Default	Description
`--sbb-skiplink-list-z-index`	`var(--sbb-overlay-default-z-index)`	To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.

Slots

Name	Description
	Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`.