It helps people who only use the keyboard to jump to what matters most.
Branch: master
Clone or download
Latest commit 5f2e3d2 Feb 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Update style link by WebAIM recommendation May 20, 2018
src use vue slot syntax Feb 13, 2019
tests/e2e/integration Acceptance testing files May 16, 2018
.babelrc Change babel transpiler to buble May 22, 2018
.eslintrc.js Fix compile vue template May 16, 2018
.gitignore Add publish demo command May 17, 2018
CHANGELOG.md chore(release): 1.0.6 Feb 13, 2019
LICENSE Initial config May 16, 2018
README.md Update README Aug 13, 2018
cypress.json
package-lock.json
package.json chore(release): 1.0.6 Feb 13, 2019
rollup.config.dev.js Change babel transpiler to buble May 22, 2018
rollup.config.prod.js Copy component to dist Aug 16, 2018

README.md

vue-skip-to

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

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.

In addition to being a technique recommended by WCAG 2.0, that's where this component was inspired. https://www.w3.org/TR/WCAG20-TECHS/G1.html
https://www.w3.org/TR/WCAG20-TECHS/G124.html

Install

NPM

npm install -S vue-skip-to

Yarn

yarn add vue-skip-to

How to use

In your main.js

import Vue from 'vue'
import VueSkipTo from 'vue-skip-to'

Vue.use(VueSkipTo)

In your App.vue

<template>
  <div id="app">
    <vue-skip-to to="#main" text="Skip to main content" />

    <logo :src="require('@/assets/logo.png')" />
    <h1 data-va="main header">{{ msg }}</h1>
    ...
    <div id="main" role="main">
      <!-- My content -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'app'
  components: {
    Logo
  },
  //...
}
</script>

Using with HTML files

<!--omitted -->
<body>
  <div id="app">
    <vue-skip-to to="#main"></vue-skip-to>

    <!-- my header, navigation, and more -->

    <div id="main" role="main">
      <!-- My content -->
    </div>
  </div>

  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/vue-skip-to"></script>
  <script>
    Vue.use(VueSkipTo)
    new Vue({
      el: "#app"
    })

  </script>
</body>
</html>

Check live demo

https://vue-skip-to.surge.sh

Props

Prop Data Type required Description Default
to String false Set destination ID #main
text String false Text content of link Skip to main content
tabindex String false Specifies the tab order null

Custom style

You can style the link through the selector .vue-skip-to

Feature

Inspired by this article, to know more, access the link:
http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/

  • This component working in all modern browsers and IE9;
  • 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;
  • Add focus to the destination, even when the address bar already has the corresponding hash;

Run the tests

git clone https://github.com/vue-a11y/vue-skip-to.git vue-skip-to
npm install
npm run dev
npm run test

Or run Cypress on interactive mode

npm run test:open

Roadmap

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

Contributing

  • Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
  • Fork repository, make changes and send a pull request;

If you want a faster communication, find me on @ktquez And follow us on Twitter @vue_a11y

Thank you