Skip to main content

Skip Links

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { SkipLinks } from '@iag/chroma-react-ui.components';

Default​

The <SkipLinks> component is used to allow keyboard users and assistive devices to quickly jump to different parts of the page by using the the element id as a link. This is an important accessibility feature to ensure users do not have to tab through links in a header or navigation every time they visit a page.

The links prop can be a single object or multiple objects which are then converted into a <nav> list of links that users can navigate using tab or shift+tab. Due to these links being rendered as a list in this way it is important to ensure that the <SkipLinks> component to be the first component in your App.

You must also ensure that the id values that you are using in your links prop exist in the page. For example for a simple skip to main content, add an id="main" to your <main> tag, (eg. <main id="main">) and then it can be passed into the links prop, {name: 'Main', id: 'main'}.

Properties​