SkipToSection

Creates a hidden button that skips your tab focus to a specific section farther down the page. This allows vision impaired users to quickly tab to points of interest.

Installation

Terminal

pnpm add @mvps-genesis/accessibility

Example Usage

.js

import {SkipToSection} from '@mvps-genesis/accessibility';

// Create from array
SkipToSection.createFromArray([
    // array of options to be passed into each class instance
    {
        label: 'Menu',
        targetElement: '.js-navigation-menu'
    },
    {
        label: 'Search',
        targetElement: '[itemprop="query-input"]'
    },
    {
        label: 'Content',
        targetElement: '.g-main-content-element'
    },
    {
        label: 'Footer',
        targetElement: '.g-site-footer'
    }
]);

// Basic class constructor
new SkipToSection({
    label: 'Custom Section',
    targetElement: '.my-custom-section'
});

Parameters

object - options

An object containing the following keys:

string - options.label

A description of the section they can jump to. This label will be inserted into the string:

Skip to "${this.options.label}"? Press ENTER.

element or selector - options.targetElement

The element to be scrolled/focused to after pressing the hidden button. If the targetElement is not focusable it will attempt to focus the first focusable element contained within it.