DEV Community

Muhannad Abdelrazek
Muhannad Abdelrazek

Posted on • Edited on

Skip Navigation - Accessibility

#a11y #react #componetns #opensource

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.

GitHub logo 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:

Install

 npm install -S skip-links
Enter fullscreen mode Exit fullscreen mode

Usage

  1. Import component
 import SkipLinks from 'skip-links'
Enter fullscreen mode Exit fullscreen mode
  1. 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}/> ) }
Enter fullscreen mode Exit fullscreen mode

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 '#' } ]
Enter fullscreen mode Exit fullscreen mode

Q&A

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

Top comments (1)

Collapse
 
dance2die profile image
Sung M. Kim •

Hi, Muhannad.

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