skip-element web component

The <skip-element> custom element adds skip links before and after its content.

Why? For anyone not using a pointing device it can be cumbersome to navigate past an element with many focus stops. Imagine navigating by keyboard and having to tab past an iframe with many interactive elements. Or a carousel.

Demo: https://backflip.github.io/skip-element/

Usage

1. Use module via npm:

   Install dependency:

   npm install skip-element

   Import module:

   import "skip-element";

2. If you are feeling lucky, you can alternatively load it via jsDelivr CDN:

   <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

   NOTE: This should be done for demo purposes only as it makes it impossible to implement a reasonable content security policy.

3. Wrap the content you want to be able to skip with <skip-element>:

   <skip-element name="iframe">
   	<iframe src="https://example.com" title="Exemplary iframe using example.com"></iframe>
   </skip-element>

This generates the following markup:

<skip-element name="iframe">
	<a href="#UUID-after" id="UUID-before" class="skip-element-link">Skip forward over iframe</a>
	<iframe src="https://example.com" title="Exemplary iframe using example.com"></iframe>
	<a href="#UUID-before" id="UUID-after" class="skip-element-link">Skip backwards over iframe</a>
	<style>
		/* Default styles, see note regarding custom styles below */
	</style>
</skip-element>

Advanced usage

Attributes

• name: Element name used in skip link labels, defaults to "element" (which is not very descriptive).
• before: Before skip link label, defaults to "Skip forward over {name}".
• after: After skip link label, defaults to "Skip backwards over {name}".
• visible: Whether to show the skip links even when not focused, defaults to false.

Custom element name

By default, the module will automatically register as skip-element in the custom element registry. To avoid this, import it with ?nodefine and register it yourself:

import { SkipElement } from "skip-element?nodefine";

customElements.define("my-skip-element", SkipElement);

Custom styles

See index.js for default styles. They can be overriden from outside as everything is happening in light DOM.