Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 2 months 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 (about 3 years ago)
- Last Synced: 2024-04-14T04:55:43.582Z (5 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"
})