You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+100-43
Original file line number
Diff line number
Diff line change
@@ -1,66 +1,117 @@
1
1
# vue-skip-to
2
-
It helps people who only use the keyboard to jump to what matters most
2
+
3
+
> Helps people who only use the keyboard to jump to what matters most
4
+
5
+
-[Installation](##installation)
6
+
-[Usage](##usage)
7
+
-[Props](##props)
8
+
-[Custom styling](##custom-styling)
9
+
-[Running tests](##running-tests)
10
+
-[About](##about)
11
+
-[Contributing](##contributing)
3
12
4
13
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?
5
14
6
15
However, we are responsible for doing our utmost to make our applications usable and accessible to everyone.
7
16
8
17
"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.
9
18
10
-
In addition to being a technique recommended by WCAG 2.0, that's where this component was inspired.
11
-
https://www.w3.org/TR/WCAG20-TECHS/G1.html
12
-
https://www.w3.org/TR/WCAG20-TECHS/G124.html
19
+
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.
20
+
21
+
[Check out the live demo!](https://vue-skip-to.surge.sh)
22
+
23
+
## Installation
13
24
14
-
## Install
15
-
#### NPM
16
25
```shell
26
+
// npm
17
27
npm install -S @vue-a11y/skip-to
18
-
```
19
28
20
-
#### Yarn
21
-
```shell
29
+
// yarn
22
30
yarn add @vue-a11y/skip-to
23
31
```
24
32
25
-
## How to use
26
-
In your `main.js`
33
+
## Usage
34
+
35
+
### Vue SFC
36
+
27
37
```javascript
38
+
// main.js
39
+
28
40
importVuefrom'vue'
29
41
importVueSkipTofrom'@vue-a11y/skip-to'
30
42
31
43
Vue.use(VueSkipTo)
32
44
33
45
newVue({
34
-
//... options
46
+
//...
35
47
})
36
48
```
37
49
38
-
In your `App.vue`
39
50
```vue
51
+
// App.vue
52
+
40
53
<template>
41
54
<div id="app">
42
55
<VueSkipTo to="#main" text="Skip to main content" />
43
56
44
-
<logo :src="require('@/assets/logo.png')" />
45
-
<h1 data-va="main header">{{ msg }}</h1>
46
-
...
47
-
<div id="main" role="main">
48
-
<!-- My content -->
49
-
</div>
57
+
<!-- header, navigation, and more -->
58
+
59
+
<main id="main">
60
+
<!-- content -->
61
+
</main>
50
62
</div>
51
63
</template>
64
+
52
65
<script>
53
66
export default {
54
67
name: 'app'
55
68
components: {
56
-
Logo
69
+
Logo,
70
+
VueSkipTo,
57
71
},
58
72
//...
59
73
}
60
74
</script>
61
75
```
62
76
63
-
## Using with HTML files
77
+
#### Skip-to list
78
+
79
+
To use multiple links, simply pass an array into the `to` prop with the following shape:
80
+
81
+
```json
82
+
[
83
+
{
84
+
"anchor": "<STRING>", // destination id
85
+
"label": "<STRING>"// link text
86
+
}
87
+
//...
88
+
]
89
+
```
90
+
91
+
```vue
92
+
// App.vue
93
+
94
+
<template>
95
+
<div id="app">
96
+
<vue-skip-to
97
+
title-list="Skip to"
98
+
:to="[
99
+
{ anchor: '#main', label: 'Main content' },
100
+
{ anchor: '#footer', label: 'Footer' },
101
+
]"
102
+
></vue-skip-to>
103
+
104
+
<!-- header, navigation, and more -->
105
+
106
+
<main id="main"></div>
107
+
108
+
<footer id="footer"></div>
109
+
</div>
110
+
</template>
111
+
```
112
+
113
+
### In HTML files
114
+
64
115
```html
65
116
<!--omitted -->
66
117
<scriptsrc="https://unpkg.com/vue"></script>
@@ -70,11 +121,11 @@ export default {
70
121
<divid="app">
71
122
<vue-skip-toto="#main"></vue-skip-to>
72
123
73
-
<!--my header, navigation, and more -->
124
+
<!-- header, navigation, and more -->
74
125
75
-
<divid="main"role="main">
76
-
<!--My content -->
77
-
</div>
126
+
<mainid="main">
127
+
<!-- content -->
128
+
</main>
78
129
</div>
79
130
80
131
<script>
@@ -86,42 +137,48 @@ export default {
86
137
</html>
87
138
```
88
139
89
-
## Check live demo
90
-
https://vue-skip-to.surge.sh
91
-
92
-
93
140
## Props
94
-
Prop | Data Type | required | Description | Default
- This component working in all modern browsers and IE9;
107
-
- Ensures that the target element receives focus, even if it is not a tag that naturally receives focus as the tag `input` and `a`. In this case, the `div` are also given the focus and the `tabindex` attribute with the value of `-1`;
108
-
- Add focus to the destination, even when the address bar already has the corresponding hash;
150
+
Override the default styles by targeting the following:
This component was inspired by [this article](http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/).
175
+
176
+
- This component working in all modern browsers and IE9;
177
+
- Ensures that the target element receives focus, even if it is not a tag that naturally receives focus as the tag `input` and `a`. In this case, the `div` are also given the focus and the `tabindex` attribute with the value of `-1`;
178
+
- Add focus to the destination, even when the address bar already has the corresponding hash;
179
+
124
180
## Contributing
181
+
125
182
- From typos in documentation to coding new features;
126
183
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
127
184
- Fork repository, make changes and send a pull request;
0 commit comments