Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andreasbm/skip-navigation

Web component friendly skip navigation functionality
https://github.com/andreasbm/skip-navigation

accessibility focus keyboard link skip tab

Last synced: about 21 hours ago
JSON representation

Web component friendly skip navigation functionality

Host: GitHub
URL: https://github.com/andreasbm/skip-navigation
Owner: andreasbm
License: mit
Created: 2019-03-22T16:43:37.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2020-04-08T12:34:10.000Z (over 4 years ago)
Last Synced: 2024-09-04T06:22:35.534Z (28 days ago)
Topics: accessibility, focus, keyboard, link, skip, tab
Language: TypeScript
Homepage: https://appnest-demo.firebaseapp.com/skip-navigation/
Size: 507 KB
Stars: 4
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
@a11y/skip-navigation



		







	




  Web component friendly skip navigation functionality.

  _{Go here to see a demo https://appnest-demo.firebaseapp.com/skip-navigation/.}







	



[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#installation)

## ➤ Installation

```

$ npm i @a11y/skip-navigation

```

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)

## ➤ Usage

Here's an example on how to use this library. After you have imported it you can use the `` and `

  

    

    Irrelevant link 1

    Irrelevant link 2

    

    

    

  

```

If you want to have multiple `skip-button` elements you can set an `id` on the `skip-anchor` and use the `for` attribute on the `skip-button` like this.

```html

  

    

    Skip to main content

    

    Irrelevant link 1

    Irrelevant link 2

    

    

    

    

    Skip to navigation

  

```

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#documentation)

## ➤ Documentation

This section documents the `attributes`, `css variables` and `slots` of the web components this library exposes.

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#skip-button)

## ➤ skip-button

Button that skips to an anchor.

### Attributes

| Attribute | Type     | Description                                      |

|-----------|----------|--------------------------------------------------|

| `for`     | `String` | Optional ID of the anchor that should be navigated to. |

### Methods

| Method        | Type       | Description         |

|---------------|------------|---------------------|

| `focusAnchor` | `(): void` | Focuses the anchor. |

### Slots

| Name | Description                                      |

|------|--------------------------------------------------|

|      | Text to the user. Defaults to "Skip to main content" |

### CSS Custom Properties

| Property                      | Description    |

|-------------------------------|----------------|

| `--skip-button-bg`            | Background.    |

| `--skip-button-border-radius` | Border radius. |

| `--skip-button-color`         | Foreground.    |

| `--skip-button-font-size`     | Font size.     |

| `--skip-button-padding`       | Padding.       |

| `--skip-button-transition`    | Transition.    |

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#skip-anchor)

## ➤ skip-anchor

Anchor that the skip button can skip to.

### Attributes

| Attribute | Type     | Description                                      |

|-----------|----------|--------------------------------------------------|

| `id`      | `String` | Optional ID that should be associated with the anchor when using the skip-button for attribute. |

### Methods

| Method  | Type       | Description            |

|---------|------------|------------------------|

| `focus` | `(): void` | Focuses the component. |

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#motivation)

## ➤ Motivation

Without being able to bypass long lists of links, some users are at a huge disadvantage. A user should never be required to perform any action perhaps 200s of times before reaching the main content. Sighted users have a built-in "skip navigation" mechanism: their eyes so why not give one to keyboard users? A "skip navigation" link is a link at the top of the page which jumps the user down to an anchor or target at the beginning of the main content. The most accessible method for visually hiding "skip navigation" links is to hide them off screen, then cause them to be positioned on screen when they receive keyboard focus.

Read more [here](https://webaim.org/techniques/skipnav/) if you are interested in learning more.

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#contributors)

## ➤ Contributors

	

| [](https://twitter.com/andreasmehlsen) | [](https://github.com/andreasbm/weightless/blob/master/CONTRIBUTING.md) |

|:--------------------------------------------------:|:--------------------------------------------------:|

| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/weightless/blob/master/CONTRIBUTING.md) |

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)

## ➤ License

	

Licensed under [MIT](https://opensource.org/licenses/MIT).