Skip Navigation - Accessibility

What is the Skip navigation?

Skip navigation is a way to provides the links to keyboard & screenreader users that helps them to jump to the main content area or any specific area on website.

Muhnad / skip-links

React component that helps you to add skip navigation links. https://skiplinks.surge.sh

Skip links

React component that helps you to add skip navigation links.

Read about skip links:

• skip to main content
• skip navigation

Install

  npm install -S skip-links

Usage

1. Import component

  import SkipLinks from 'skip-links'

2. Call component and pass props

  render() {
    const links = [
      {title: 'Skip to main content', to: 'main'},
      {title: 'Skip to footer', to: 'footer'}
    ];

    return (
      <SkipLinks links={links}/>
    )
  }

Props

Prop	Type	required	Description
links	Array	True	Add links you need to show as object have title and to.

Shape of array:

  [
    {
      title: String Required, // Text you need to show
      to: String Required //  Destination ID without hash '#'
    }
  ]

Q&A

• How to customize the skip links
  1. you can pass style attribute directly to your…

View on GitHub

Comments

[Sung M. Kim]

Hi, Muhannad.

I believe this post also fits well with #opensource tag 😉