Skip Link

Version	Tag	Status	API
v1	`<oc-skip-link-v1>`	Stable, allowed for generation	SkipLinkV1

Overview (v1)

Source: ./src/components/skip-link/v1/Overview.mdx

The skip link component provides a mechanism for users to quickly navigate to the main content of a page, bypassing repetitive navigation links. It is particularly useful for improving accessibility, allowing users with assistive technologies to skip directly to the main content without having to tab through all the navigation links.

Default variation

Story Default:

<div class="relative oc-grid oc-gap-100">
  <oc-skip-link-v1>
    <oc-button-v1>überspringen</oc-button-v1>
  </oc-skip-link-v1>
  <oc-button-v1>1</oc-button-v1>
  <oc-button-v1>2</oc-button-v1>
  <oc-button-v1>3</oc-button-v1>
  <oc-button-v1>4</oc-button-v1>
  <oc-button-v1>5</oc-button-v1>
</div>

<div class="oc-mt-100">
  <oc-button-v1>Dummy</oc-button-v1>
</div>

<style>
  .relative {
    position: relative;
  }
</style>

Configuration

The skip link component offers a slot for buttons which you can use to let users skip to the content of a page. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the skip link component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Accessibility

The skip link component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

As soon as the skip link component is focused, the skip link menu becomes visible.

Key	Action
`Tab`	Focuses the first button, then opens the skip link menu. Use `Tab` to move between buttons.
`Enter` / `Space`	Selects the focused option and skips to or after the target section.

In the skip link menu, pressing Tab after the last button moves focus to the next focusable element, usually the next focusable element in the main content area.

Note: In addition to keyboard navigation, users may navigate the skip link menu using assistive technologies such as screen readers, or with custom navigation configurations depending on their accessibility needs.

To enable the skip link functionality, you need to define skip link targets in your HTML structure. These targets are identified using the data-skiplink attribute, which should be added to the main sections of your page that users may want to skip to. Here is an example of how to set up these targets:

<nav data-skiplink="main-navigation">
  <!-- Main navigation content -->
</nav>
<aside data-skiplink="sub-navigation">
  <!-- Sub navigation content -->
</aside>
<section data-skiplink="filters">
  <!-- Filter options content -->
</section>
<main data-skiplink="main-content">
  <!-- Main content of the page -->
</main>

The identifiers used in the data-skiplink attributes are a fixed set of values recognized by the skip link component. These identifiers correspond to the buttons in the skip link menu, allowing users to quickly navigate to these sections of the page:

ID	Displayed Name
main-navigation	Zur Hauptnavigation
sub-navigation	Zur Subnavigation
filters	Zu den Filtern
main-content	Zum Inhalt

Please be aware that your skip link will only be shown if your target element is both visible and focusable.

Configuration (v1)

Source: ./src/components/skip-link/v1/Configuration.mdx

Configure the skip link component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<div class="relative oc-grid oc-gap-100">
  <oc-skip-link-v1>
    <oc-button-v1>überspringen</oc-button-v1>
  </oc-skip-link-v1>
  <oc-button-v1>1</oc-button-v1>
  <oc-button-v1>2</oc-button-v1>
  <oc-button-v1>3</oc-button-v1>
  <oc-button-v1>4</oc-button-v1>
  <oc-button-v1>5</oc-button-v1>
</div>

<div class="oc-mt-100">
  <oc-button-v1>Dummy</oc-button-v1>
</div>

<style>
  .relative {
    position: relative;
  }
</style>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Source: ./src/components/skip-link/v1/SkipLinkV1.API.g.mdx

API: `<oc-skip-link-v1>` (SkipLinkV1)

The skip link component provides a way for users to skip directly to content of a page, bypassing repetitive navigation links. It is particularly useful for keyboard and screen reader users, enhancing accessibility.

Attributes / properties

Attribute	Type	Default	Required	Description
`variant`	`"in-page" \| "header"`	`"in-page"`	no	Sets the variant of the skip link. The `in-page` variant positions the skip link within top left corner of the parent element. The `header` variant places the skip link fixed at the top of the page and horizontal centered.

Slots

Slot	Required	Description
`default`	yes	Sets the content of the skip link. This slot is required and should contain a focusable element, such as an oc-button-v1. Per default the buttons will skip to the first focusable element after the current parent element. Alternative the buttons can have the following attributes: - `data-oc-skip-link-v1-to` for skipping to a specific element, - `data-oc-skip-link-v1-after` for skipping to the first focusable element after the current parent element.

Events

Event	Detail type	Description
`oc-property-change`	`OcSkipLinkV1Events["oc-property-change"]`	Whenever a property value changes, this event triggers. Use this event to track all property changes within the component. Refer to the Events documentation for more information.
`oc-mount`	`{ component: string; }`	Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
`oc-unmount`	`{ component: string; }`	Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

Variations (v1)

Source: ./src/components/skip-link/v1/Variations.mdx

Variations

Listed below are the most common variations of the skip link component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-skip-link-variations--default · tags: components, skip-link, 1, variations

Default behavior of the Skip Link component. Buttons from 1 to 5 can be skipped using the skip link.

<div class="relative oc-grid oc-gap-100">
  <oc-skip-link-v1>
    <oc-button-v1>überspringen</oc-button-v1>
  </oc-skip-link-v1>
  <oc-button-v1>1</oc-button-v1>
  <oc-button-v1>2</oc-button-v1>
  <oc-button-v1>3</oc-button-v1>
  <oc-button-v1>4</oc-button-v1>
  <oc-button-v1>5</oc-button-v1>
</div>

<div class="oc-mt-100">
  <oc-button-v1>Dummy</oc-button-v1>
</div>

<style>
  .relative {
    position: relative;
  }
</style>