<skippy-links>
Skippy-links is a small and open-source web component that enables you to easily add skip links to your page, improving accessibility and making it a better place for everyone.
Introduction
Assistive technology users often have to tab through a long navigation until they get to the main content. This can be confusing and take a lot of time and energy.
Skip links are links that are placed before any other content and provide a way for assistive technology users to jump to the most important sections of the page, like for instance the main content, or even jump directly to a search input on the page.
Skip links seem like a minor improvement to the page, but they can make a huge difference for assistive technology users!
Getting started
1. Install with NPM
To install the skip-links npm module, open a terminal window in your project folder and run:
npm install skippy-links2. Import into your project
After installing it you can add it to the head section of you project’s html.
<script src=“node_modules/skippy-links/dist/skippy-links.js” type=“module”></script>3. Add to your page
Add the skip-links element to your page. Skip links should be the first element on the body section.
<body>
<skippy-links></skippy-links>
<!-- Add your content after the <skip-links> element -->
</body>4. Add skippy-links-label attributes
Add the skippy-links-label attribute to any element you want to add to the skip-links element and make sure the target element also has an id.
For instance if you want to add a link to the <main> section with the “Main Content” label:
<main id=“main” skippy-links-label=“Main Content”>
<!-- your main content -->
</main>Skip links best practices
- Don’t use more than 3 skip links per page
- They should be the first element on the page’s body tag
- Use clear labels for each skip link
- They should have a prominent visible state design
- They are not a replacement for inpage navigation