Skip Tab Focus to Content

As an accessibility feature, it is recommended that you give the (keyboard tabbing) user the option to skip header elements and focus directly into your main content.  To achieve this you will simply need to add a "Skip to Content" link at the top of your page which links to the main content element by ID.  This will ensure that users relying on keyboard tabbing can easily skip all the header and navigation links.

  1. Create Skip to Content link
    #Content refers to the ID of your main content block.
    <a href="#Content" class="visuallyhidden">Skip to content</a>
  2. Define your "visuallyhidden" CSS class
    .visuallyhidden {
    	clip: rect(0 0 0 0);
    	height: 1px;
    	margin: -1px;
    	overflow: hidden;
    	padding: 0;
    	position: absolute;
    	width: 1px;
    	&:focus, &:active {
    		outline: none;
    		clip: auto;
    		height: auto;
    		margin: 0;
    		overflow: visible;
    		width: auto;
    		z-index: 100;
    	}
    }
  3. Ensure your target element has tabindex set to -1
    This ensures that target area container does not become selectable (more details here).
    <div id="Content" tabindex="-1">