Vuetensils

Skip

A functional component to help keyboard users skip to the main content

Features:

  • Visually hidden by default but visible on focus.
  • Sets tabindex on target when clicked (for focus ring).

Skip Example Nav

Start by clicking on the button to set the focus there. Then use the keyboard to navigate to the VSkip component. You will then be able to click the link to skip past the long list of links, to the main content.

Your implementation will vary, but it basically just relies on receiving the hash link to the ID of the main content element.

<template>
  <div>
    <button>click here to focus</button>

    <p>Tab to get to the skip component then press enter to skip to main content</p>

    <VSkip to="#main">
      Skip To Main Content
    </VSkip>

    <!-- perhaps a nav here -->
    <nav>
      <ul class="fake-nav">
        <li><a href="#">Example 1</a></li>
        <li><a href="#">Example 2</a></li>
        <li><a href="#">Example 3</a></li>
        <li><a href="#">Example 4</a></li>
        <li><a href="#">Example 5</a></li>
        <li><a href="#">Example 6</a></li>
      </ul>
    </nav>

    <main id="main">
      <p>This is the main content section</p>
      <p>It could even be a router-link.</p>
      <p>We're adding some extra paragraphs here.</p>
      <p>Because otherwise the header blocks this content :)</p>
    </main>
  </div>
</template>

<style>
.fake-nav {
  display: flex;
  margin-bottom: 1rem;
  padding-left: 0;
  list-style-type: none;
}
.fake-nav li {
  margin-right: .75rem;
}
</style>

Tab to get to the skip component then press enter to skip to main content

Skip To Main Content

This is the main content section

It could even be a router-link.

We're adding some extra paragraphs here.

Because otherwise the header blocks this content :)