# AccessibilitySkiplinks
The AccessibilitySkiplinks provides quick links to the most important parts of the site like Homepage, Main Navigation, Main Content, Search, Sitemap, etc. To serve their purpose AccessibilitySkiplinks should one of the first elements on the page after maybe AccessibilityFlyingFocus. Skiplinks can be accessed with keyboard shortcuts and are only visible on focus.
Unique Component
This component must only exist once per layout.
#the-skiplinks#the-skiplinks__title
Customisation
This component needs to be customized for each project, as the links and text may vary.
# Dependencies
This component uses multi-language variables and a standard Nuxt component.
# i18n
Make sure you have skiplinks defined in your language files under a11y.
// e.g. nuxt-starter/i18n/de.js
export default {
...
a11y: {
...
skiplinks: {
title: 'Schnellnavigation',
home: 'Homepage',
sitemap: 'Sitemap',
nav: 'Navigation',
main: 'Inhalt',
search: 'Suche'
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Components
- nuxt-link
# Props
None.
# Variants
None.
# Example
Good
<!-- nuxt-starter/layouts/default.vue -->
<!--
The component will check for the brower and os,
therefore it makes sense to wrap the component
in client-only to prevent server side rendering -->
<client-only>
<AccessibilitySkiplinks />
</client-only>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Bad
<!-- nuxt-starter/pages/index.vue -->
<!-- Do not use the component on pages or components! -->
<div class="page">
<AccessibilitySkiplinks />
</div>
<!-- nuxt-starter/layouts/default.vue -->
<!-- Do not use this component more than once per layout -->
<AccessibilitySkiplinks />
<AccessibilitySkiplinks />
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# TODO
- Improve focus handling (a11y helper script)