{"id":15379297,"url":"https://github.com/andreasbm/skip-navigation","last_synced_at":"2025-04-15T17:34:15.698Z","repository":{"id":57101753,"uuid":"177176803","full_name":"andreasbm/skip-navigation","owner":"andreasbm","description":"Web component friendly skip navigation functionality","archived":false,"fork":false,"pushed_at":"2020-04-08T12:34:10.000Z","size":519,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-20T21:17:51.792Z","etag":null,"topics":["accessibility","focus","keyboard","link","skip","tab"],"latest_commit_sha":null,"homepage":"https://appnest-demo.firebaseapp.com/skip-navigation/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andreasbm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-22T16:43:37.000Z","updated_at":"2022-03-06T04:47:48.000Z","dependencies_parsed_at":"2022-08-20T22:40:56.323Z","dependency_job_id":null,"html_url":"https://github.com/andreasbm/skip-navigation","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fskip-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fskip-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fskip-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andreasbm%2Fskip-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andreasbm","download_url":"https://codeload.github.com/andreasbm/skip-navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241106084,"owners_count":19910756,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","focus","keyboard","link","skip","tab"],"created_at":"2024-10-01T14:18:44.892Z","updated_at":"2025-02-28T05:30:37.236Z","avatar_url":"https://github.com/andreasbm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003ch1 align=\"center\"\u003e@a11y/skip-navigation\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@a11y/skip-navigation?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@a11y/skip-navigation.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@a11y/skip-navigation\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@a11y/skip-navigation.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://david-dm.org/andreasbm/skip-navigation\"\u003e\u003cimg alt=\"Dependencies\" src=\"https://img.shields.io/david/andreasbm/skip-navigation.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://github.com/andreasbm/skip-navigation/graphs/contributors\"\u003e\u003cimg alt=\"Contributors\" src=\"https://img.shields.io/github/contributors/andreasbm/skip-navigation.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eWeb component friendly skip navigation functionality.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e Go here to see a demo \u003ca href=\"https://appnest-demo.firebaseapp.com/skip-navigation/\"\u003ehttps://appnest-demo.firebaseapp.com/skip-navigation/\u003c/a\u003e.\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://raw.githubusercontent.com/andreasbm/skip-navigation/master/example.gif\" width=\"600\"\u003e\n\u003c/p\u003e\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#installation)\r\n\r\n## ➤ Installation\n\n```\n$ npm i @a11y/skip-navigation\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)\r\n\r\n## ➤ Usage\n\nHere's an example on how to use this library. After you have imported it you can use the `\u003cskip-button\u003e` and `\u003cskip-anchor` tags. The `skip-button` element presents a skip button to the user when it is focused. The `skip-anchor` element defines where to the focus should be set when the skip button is used.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cskip-button\u003e\u003c/skip-button\u003e\n    \u003ca href=\"#\"\u003eIrrelevant link 1\u003c/a\u003e\n    \u003ca href=\"#\"\u003eIrrelevant link 2\u003c/a\u003e\n\n    \u003c!-- More irrelevant links.. --\u003e\n\n    \u003cskip-anchor\u003e\u003c/skip-anchor\u003e\n\n    \u003c!-- Main content --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf 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.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n\n    \u003c!-- When this skip button is pressed the focus is shifted to the anchor with the maincontent ID --\u003e\n    \u003cskip-button for=\"maincontent\"\u003eSkip to main content\u003c/skip-button\u003e\n    \u003cskip-anchor id=\"navigation\"\u003e\u003c/skip-anchor\u003e\n\n    \u003ca href=\"#\"\u003eIrrelevant link 1\u003c/a\u003e\n    \u003ca href=\"#\"\u003eIrrelevant link 2\u003c/a\u003e\n\n    \u003c!-- More irrelevant links.. --\u003e\n\n    \u003cskip-anchor id=\"maincontent\"\u003e\u003c/skip-anchor\u003e\n\n    \u003c!-- Main content --\u003e\n\n    \u003c!-- When this skip button is pressed the focus is shifted to the anchor with the navigation ID --\u003e\n    \u003cskip-button for=\"navigation\"\u003eSkip to navigation\u003c/skip-button\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#documentation)\r\n\r\n## ➤ Documentation\n\nThis section documents the `attributes`, `css variables` and `slots` of the web components this library exposes.\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#skip-button)\r\n\r\n## ➤ skip-button\n\nButton that skips to an anchor.\n\n### Attributes\n\n| Attribute | Type     | Description                                      |\n|-----------|----------|--------------------------------------------------|\n| `for`     | `String` | Optional ID of the anchor that should be navigated to. |\n\n### Methods\n\n| Method        | Type       | Description         |\n|---------------|------------|---------------------|\n| `focusAnchor` | `(): void` | Focuses the anchor. |\n\n### Slots\n\n| Name | Description                                      |\n|------|--------------------------------------------------|\n|      | Text to the user. Defaults to \"Skip to main content\" |\n\n### CSS Custom Properties\n\n| Property                      | Description    |\n|-------------------------------|----------------|\n| `--skip-button-bg`            | Background.    |\n| `--skip-button-border-radius` | Border radius. |\n| `--skip-button-color`         | Foreground.    |\n| `--skip-button-font-size`     | Font size.     |\n| `--skip-button-padding`       | Padding.       |\n| `--skip-button-transition`    | Transition.    |\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#skip-anchor)\r\n\r\n## ➤ skip-anchor\n\nAnchor that the skip button can skip to.\n\n### Attributes\n\n| Attribute | Type     | Description                                      |\n|-----------|----------|--------------------------------------------------|\n| `id`      | `String` | Optional ID that should be associated with the anchor when using the skip-button for attribute. |\n\n### Methods\n\n| Method  | Type       | Description            |\n|---------|------------|------------------------|\n| `focus` | `(): void` | Focuses the component. |\n\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#motivation)\r\n\r\n## ➤ Motivation\n\nWithout 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.\n\nRead more [here](https://webaim.org/techniques/skipnav/) if you are interested in learning more.\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#contributors)\r\n\r\n## ➤ Contributors\n\t\n\n| [\u003cimg alt=\"Andreas Mehlsen\" src=\"https://avatars1.githubusercontent.com/u/6267397?s=460\u0026v=4\" width=\"100\"\u003e](https://twitter.com/andreasmehlsen) | [\u003cimg alt=\"You?\" src=\"https://joeschmoe.io/api/v1/random\" width=\"100\"\u003e](https://github.com/andreasbm/weightless/blob/master/CONTRIBUTING.md) |\n|:--------------------------------------------------:|:--------------------------------------------------:|\n| [Andreas Mehlsen](https://twitter.com/andreasmehlsen) | [You?](https://github.com/andreasbm/weightless/blob/master/CONTRIBUTING.md) |\n\n\r\n[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)\r\n\r\n## ➤ License\n\t\nLicensed under [MIT](https://opensource.org/licenses/MIT).\n\n  ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fskip-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasbm%2Fskip-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasbm%2Fskip-navigation/lists"}