@barebones/a11y-skipper

A skip menu generation plugin inspired by the robust LinkedIn skip menu

Usage no npm install needed!

<script type="module">
  import barebonesA11ySkipper from 'https://cdn.skypack.dev/@barebones/a11y-skipper';
</script>

README

A11y Skipper Menu

Build Status

Usage

If any ID passed into the Skipper.init() object are not present on the current page they will not show up in the menu.

Installation

npm install @barebones/a11y-skipper --save

JavaScript

import '@barebones/a11y-skipper';

Barebones.skipper.init( {
    targetElement: '#a11y-catcher',
    primary: ['Skip to content', '#main'],
    secondary: ['Skip to search', '#search'],
    menu: [
        { label: 'Navigation', id: '#nav' },
        { label: 'Sidebar', id: '#sidebar' },
        { label: 'Footer', id: '#footer' }
    ],
    open: false
} );

CSS

@import url("@barebones/a11y-skipper");

/* Update the color variables if you want */
:root {
  --c-a11y-skipper-branding: black;
  --c-a11y-skipper-branding-inverse: white;
}

/* Add more CSS here if you need to override anything */

HTML

<!--Matches the ID passed into Skipper.init()-->
<div id="a11y-catcher">
    <!--A no-JS fallback skip link-->
    <a href="#main">skip to content</a>
</div>

<!--Matches the secondary string ID passed into Skipper.init()-->
<div id="search">Your search stuff here.</div>

<!--Matches the primary string ID passed into Skipper.init()-->
<div id="main">Your main content here.</div>