Skiplink-List. Overview

Preview.

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

Inhalt Kontakt

What does the component do?

The skiplink list bundles skip links. They let keyboard and screen reader users jump directly to important areas of a page. A skip link only becomes visible when it receives keyboard focus (e.g. via Tab). With several links, only the focused one is visible.

When should the component be used?

  • On every page with repeating navigation or a header area, so that users can skip it.
  • To jump directly to the main content, menu or other important areas.
 Usage

Rules.

  • Place the skiplink list as the first interactive element in the DOM so that it is immediately reachable via keyboard.
  • Label each skip link briefly and clearly according to its target.
  • Each skip link leads directly to its target area.
  • An optional title is visually hidden but read by screen readers.

Specification.

Open in Figma
Examples Skiplink List.
Try it out on Storybook Show HTML
Skiplink List With Title.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

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.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

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).