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

Source

# Installation

Globally:

// main.js
import Vue from "vue"
import { VSkip } from "vuetensils/src/components"

Vue.component("VSkip", VSkip)

Locally:

<script>
// SomeComponent.vue
import { VSkip } from "vuetensils/src/components"

export default {
  components: {
    VSkip,
  },
  // ...
}
</script>

# Skip Example Nav

Start by clicking on 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.

(Note: this site has a floating header that blocks the main content)

Last Updated: 5/24/2020, 12:26:03 AM