Skiplink-List – digital.sbb.ch

Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch

English

Skiplink-List.

Übersicht

Anteprima.

Die Skiplinks erscheinen erst, wenn sie per Tastatur fokussiert werden. Zum Ausprobieren in den Bereich klicken und die Tabulatortaste drücken.

Inhalt

Kontakt

Was macht die Komponente?

Die Skiplink-List bündelt Skip-Links. Mit ihnen springen Tastatur- und Screenreader-Nutzende direkt zu wichtigen Bereichen einer Seite. Ein Skip-Link ist erst sichtbar, wenn er per Tastatur (z.B. Tab) fokussiert wird. Bei mehreren Links ist nur der fokussierte sichtbar.

Wann soll die Komponente eingesetzt werden?

Auf jeder Seite mit wiederkehrender Navigation oder Kopfbereich, damit Nutzende diese überspringen können.
Um direkt zu Hauptinhalt, Menü oder anderen wichtigen Bereichen zu springen.

Anwendung

Regeln.

Platziere die Skiplink-List als erstes interaktives Element im DOM, damit sie sofort per Tastatur erreichbar ist.
Beschrifte jeden Skip-Link kurz und eindeutig nach seinem Ziel.
Jeder Skip-Link führt direkt zum Zielbereich.
Ein optionaler Titel ist visuell versteckt, wird aber von Screenreadern vorgelesen.

Specifica.

Apri in Figma

Beispiele

Skiplink List.

Skiplink List With Title.

HTML in Zwischenablage kopiert.

Implementation

Web Components.

Il web component si trova nel pacchetto @sbb-esta/lyne-elements.

Storybook con esempi interattivi

Codice sorgente su GitHub

Documentazione.

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>

Angular.

Questo componente è disponibile anche per Angular nel pacchetto @sbb-esta/lyne-angular.

Panoramica Angular

API Angular

Esempi Angular

API

class: `SbbSkiplinkListElement`, `sbb-skiplink-list`.

Properties.

Name	Attribute	Privacy	Type	Default	Description
`titleContent`	`title-content`	public	`string`	`''`	The title text we want to place before the list.
`titleLevel`	`title-level`	public	`'1' \| '2' \| '3' \| '4' \| '5' \| '6'`	`'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`.
`title`	Use this to provide a title for the skiplink-list (optional).

Navigieren auf digital.sbb.ch