Skip to content

Commit 1b30a01

Browse files
ktquezktquez
committed
Add README complete
1 parent a50a2bb commit 1b30a01

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

‎README.md

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,127 @@
11
# vue-skip-to
22
It helps people who only use the keyboard to jump to what matters most
3+
4+
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+
6+
However, we are responsible for doing our utmost to make our applications usable and accessible to everyone.
7+
8+
"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+
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
13+
14+
## Install
15+
#### NPM
16+
```shell
17+
npm install -S vue-skip-to
18+
```
19+
20+
#### Yarn
21+
```shell
22+
yarn add -S vue-skip-to
23+
```
24+
25+
## How to use
26+
In your `main.js`
27+
```javascript
28+
import Vue from 'vue'
29+
import VueSkipTo from 'vue-skip-to'
30+
31+
Vue.use(VueSkipTo)
32+
```
33+
34+
In your `App.vue`
35+
```vue
36+
<template>
37+
<div id="app" tole="main">
38+
<vue-skip-to to="#main" test="Skip to main content" />
39+
40+
<logo :src="require('@/assets/logo.png')" />
41+
<h1 data-va="main header">{{ msg }}</h1>
42+
...
43+
</div>
44+
</template>
45+
<script>
46+
export default {
47+
name: 'app'
48+
components: {
49+
Logo
50+
},
51+
//...
52+
}
53+
</script>
54+
```
55+
56+
## Using with HTML files
57+
```html
58+
<!--omitted -->
59+
<body>
60+
<div id="app">
61+
<vue-skip-to to="#main"></vue-skip-to>
62+
63+
<!-- my header, navigation, and more -->
64+
65+
<div id="main" role="main">
66+
<!-- My content -->
67+
</div>
68+
</div>
69+
70+
<script src="https://unpkg.com/vue"></script>
71+
<script src="https://unpkg.com/vue-skip-to"></script>
72+
<script>
73+
Vue.use(VueSkipTo)
74+
new Vue({
75+
el: "#app"
76+
})
77+
78+
</script>
79+
</body>
80+
</html>
81+
```
82+
83+
## Check live demo
84+
https://vue-skip-to.surge.sh
85+
86+
87+
## Props
88+
Prop | Data Type | required | Description | Default
89+
--------------- | ---------- | --------- | ---------------------- | -------------
90+
`to` | String | false | Set destination ID | #main
91+
`text` | String | false | Text content of link | Skip to main content
92+
`tabindex` | String | false | Specifies the tab order | null
93+
94+
95+
## Custom style
96+
You can style the link through the selector `.vue-skip-to`
97+
98+
## Feature
99+
Inspired by this article, to know more, access the link:
100+
http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/
101+
102+
- This component working in all modern browsers and IE9;
103+
- 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`;
104+
- Add focus to the destination, even when the address bar already has the corresponding hash;
105+
106+
## Run the tests
107+
108+
```shell
109+
git clone https://github.com/vue-a11y/vue-skip-to.git vue-skip-to
110+
npm install
111+
npm run dev
112+
npm run test
113+
```
114+
115+
Or run Cypress on interactive mode
116+
```shell
117+
npm run test:open
118+
```
119+
120+
## Contributing
121+
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
122+
- Fork repository, make changes and send a pull request;
123+
124+
If you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez)
125+
And follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
126+
127+
**Thank you**

0 commit comments

Comments
 (0)