<main class="demo">
      <!-- Skip Links -->
  <a href="#main" class="skipLink" ref="skipLink">Skip to main content</a>
<!-- Main content of the page      -->
    <section id='main'>
         <p> Note: use to the tab key to navigate  </p>  
    <button @click="alertHello">Say hello.          </button>

export default {
//   using ref attribute to access focus on the element
    watch: {
    $route() {
  data() {
    return {
      message: 'Welcome to Vue!'
  methods: {
    alertHello() {

.demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;

#main {
  margin: 3em auto;

button {
  color: #4fc08d;

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;

.skipLink {
  white-space: nowrap;
  margin: 1em auto;
  top: 0;
  position: fixed;
  left: 50%;
  margin-left: -72px;
  opacity: 0;

.skipLink:focus {
  opacity: 1;
  background-color: white;
  padding: .5em;
  border: 1px solid black;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.