Skip Links

When a keyboard user navigates your app they will tab through potentially repetitive elements in a component like a header.

To improve this you can utilize Skip Links (or as called by WCAG: Bypass Blocks).

Example

A typical use case is a "Skip to main content" or "Back to top" link. In the below page we want to have this link hidden unless accessibility features are used.

<ion-content>
  <a class="skip-link" [href]="path + '#main'">Skip to Main Content</a>
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button>A</ion-button>
        <ion-button>B</ion-button>
        <ion-button>C</ion-button>
        <ion-button>D</ion-button>
      </ion-buttons>
      <ion-title>Food</ion-title>
    </ion-toolbar>
    
  </ion-header>
  <main id="main">
    This is the main content of the page
  </main>
</ion-content>

The class="skip-link" uses this css which uses the opacity:0 technique to hide the element until it is focused (by pressing tab) and then we set opacity:1 to make it visible.

.skip-link {
    position: fixed;
    opacity: 0;
    z-index: 9999;

    &:focus {
        opacity: 1;
    }
}

The a element has a href that points to a hash fragment called main.

Pressing enter on the keyboard will scroll to the element identified as main (<main id="main">) which skips past all the elements in our header.

Your implementation may be different based on your framework.

Example​

Example