https://github.com/vue-a11y/vue-skip-to

It helps people who only use the keyboard to jump to what matters most.
https://github.com/vue-a11y/vue-skip-to

skip-links skip-to

Last synced: about 1 month ago
JSON representation

It helps people who only use the keyboard to jump to what matters most.

• Host: GitHub
• URL: https://github.com/vue-a11y/vue-skip-to
• Owner: vue-a11y
• License: mit
• Created: 2018-05-16T05:37:24.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-07-15T20:48:15.000Z (over 3 years ago)
• Last Synced: 2024-04-14T04:55:43.582Z (8 months ago)
• Topics: skip-links, skip-to
• Language: Vue
• Homepage: https://vue-skip-to.surge.sh
• Size: 1.25 MB
• Stars: 75
• Watchers: 4
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-a11y-vue - @vue-a11y/skip-to - It helps people who only use the keyboard to jump to what matters most. (Components and plugins / Courses)
• awesome-access - @vue-a11y/skip-to - It helps people who only use the keyboard to jump to what matters most. (Components and plugins / Courses)

README

        
# vue-skip-to

---

🔥 HEADS UP! You are in the Vue 2 compatible branch, [check the branch for Vue 3 support](https://github.com/vue-a11y/vue-skip-to/tree/next).

---

> Helps people who only use the keyboard to jump to what matters most

- [Installation](##installation)

- [Usage](##usage)

- [Props](##props)

- [Custom styling](##custom-styling)

- [Running tests](##running-tests)

- [About](##about)

- [Contributing](##contributing)

The population grows very fast nowadays and with that the number of visually impaired increases as well. Did you know that we have over 350 million visually impaired people in the world?

However, we are responsible for doing our utmost to make our applications usable and accessible to everyone.

"Skip to content" or "skip to a section" of your site is one of the most common accessibility techniques today, but not as used as it should be.

This pattern is detailed in the Techniques for WCAG 2.0 in notes [G1](https://www.w3.org/TR/WCAG20-TECHS/G1.html) and [G124](https://www.w3.org/TR/WCAG20-TECHS/G124.html), and also served as the inspiration for creating this component.

[Check out the live demo!](https://vue-skip-to.surge.sh)

## Installation

```shell

// npm

npm install -S @vue-a11y/skip-to

// yarn

yarn add @vue-a11y/skip-to

```

## Usage

### Vue SFC

```javascript

// main.js

import Vue from 'vue'

import VueSkipTo from '@vue-a11y/skip-to'

Vue.use(VueSkipTo)

new Vue({

  //...

})

```

```vue

// App.vue

  


    


    

    

      

    

  


export default {

  name: 'app'

  components: {

    Logo,

    VueSkipTo,

  },

  //...

}

```

#### Skip-to list

To use multiple links, set an array into the `to` prop with the following shape:

```js

[

  {

    "anchor": "", // destination id

    "label": "" // link text

  }

  //...

]

```

```vue

// App.vue

  


    


    

    


    

  

```

### In HTML files

```html

  

  

  


    


    

    

      

    

  


  

    new Vue({

      el: "#app"

    })