<SkipToContent … />

A React component which provides a flexible & configurable 'skip to main content' link.

✨ Introduction

<SkipToContent … /> is a flexible & configurable wrapper around a standard HTML 'skip to main content' anchor/link tag (<a>).

Quoting from the "Skip Navigation" Links article on WebAIM:

The main content is not usually the first thing on a web page. Keyboard and screen reader users generally must navigate a long list of navigation links, sub-lists of links, corporate icons, site searches, and other elements before ever arriving at the main content. This is particularly difficult for users with some forms of motor disabilities.

Without some sort of system for bypassing the long list of links, some users are at a huge disadvantage. Consider users with no arm movement, who use computers by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action perhaps 100s of times before reaching the main content is simply unacceptable.

Of course, sighted people who use their mouse do not have any trouble with pages such as this. They can almost immediately scan over the page and identify where the main content is. In effect, sighted users have a built-in "skip navigation" mechanism: their eyes. They can also bypass the many links before the main content and click directly on the link they want with the mouse. The "skip navigation" idea was invented to give screen reader and keyboard users the same capability of going directly to the main content that sighted mouse users take for granted.

🚀 Getting started

🏗️ Installation

You can install <SkipToContent … /> using a package manager such as yarn or npm…

$ yarn add "@magica11y/react-skip-to-content"
# OR
$ npm install --save "@magica11y/react-skip-to-content"

You can also include <SkipToContent … /> from a CDN on your page, such as jsDelivr or unpkg…

<script src="https://cdn.jsdelivr.net/npm/@magica11y/react-skip-to-content@latest/dist/magica11y.reactSkipToContent.min.js"></script>
<!-- OR -->
<script src="https://unpkg.com/@magica11y/react-skip-to-content@latest/dist/magica11y.reactSkipToContent.js"></script>

🎲 Usage

import React from 'react';
import ReactDOM from 'react-dom';

import SkipToContent from '@magica11y/react-skip-to-content';

const App = () => {
  return (
    <>
      <SkipToContent targetId="#main-content" />

      <main id="main-content">
        {/* rest of your React application here */}
      </main>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

🔩 API

<SkipToContent … /> takes the following props:

Prop name	Type	Default	Description
targetId	string	(required)	Value of the id attribute to which the link should navigate to
linkComponent	React.Node (optional)	a	React component to replace the underlying anchor tag
className	ClassNamesExport (optional)	null	Object to pass to the classnames function

🏁 Typechecking

You can import the Flow types from the provided libdefs in node_modules/@magica11y/react-skip-to-content/lib by configuring them in your .flowconfig…

[libs]
node_modules/@magica11y/react-skip-to-content/lib

📜 License

See LICENSE.md for more details.

Handcrafted with ❤️ by Rishabh Rao.