Skip

<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"
    }
  ]
}
  • Content:
    @charset 'UTF-8';
    
    @include 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: rhythm(1);
    			padding-bottom: rhythm(1.5);
    			background-color: $color-cyberspace;
    			color: $color-snow;
    			text-align: center;
    			text-indent: 0;
    		}
    	}
    }
    
  • URL: /components/raw/skip/_skip.scss
  • Filesystem Path: src/atoms/skip/_skip.scss
  • Size: 529 Bytes

Skip stuff

Accessibility navigation

How to use

Use tab key to access skip to navigation of other elements.