<ul class="skip" role="menu">
<li role="menuitem"><a href="#siteNav">Till navigationen</a></li>
<li role="menuitem"><a accesskey="s" href="#siteMain">Till innehållet</a></li>
</ul>
<ul class="skip" role="menu">
{{#each skip_item}}
<li role="menuitem"><a {{#if accesskey}}accesskey="{{accesskey}}" {{/if}}href="#{{id}}">{{text}}</a></li>
{{/each}}
</ul>
{
"navId": "navbar",
"content_id": "content",
"skip_item": [
{
"id": "siteNav",
"text": "Till navigationen"
},
{
"id": "siteMain",
"text": "Till innehållet",
"accesskey": "s"
}
]
}
@charset "UTF-8";
@use '../../configurations/bem' as bem;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/functions' as func;
@include bem.b(skip) {
position: relative;
z-index: 1001;
height: 0;
margin: 0;
padding: 0;
list-style: none;
li {
height: 0;
margin: 0;
padding: 0;
}
a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
border: 0;
&:focus {
width: 100%;
height: auto;
padding-top: func.rhythm(1);
padding-bottom: func.rhythm(1.5);
background-color: colors.$color-cyberspace;
color: colors.$color-snow;
text-align: center;
text-indent: 0;
}
}
}
Accessibility navigation
Use tab key to access skip to navigation of other elements.