Navigation
Skip navigation link 
- Class name: (k-skip)
- Version: 1.0
The "skip navigation link" is a hidden link (that's why there's nothing to see in the demo below) that allows users of screen-readers systems to jump directly to the page content without having to "listen" to all the menu sections everytime he arrives to a new page.
This component allows the skip link to be revealed when it gains focus, helping also keyboard users to jump menus.
Just add this component before every navigation menu.
HTML5 Plain Code
-
<p class="k-skip"><a href="#wrapper">Skip this menu</a></p>
Replace the link pointer ("#wrapper", in the example) to the anchor of the next interesting point in your page.
CSS Code
-
.k-skip {display: inline;} -
.k-skip a { -
position: absolute;
-
overflow: hidden;
-
left: -10000px;
-
top: auto;
-
width: 1px;
-
height: 1px;
-
}
-
.k-skip a:focus {position: static; width: auto; height: auto;}
IE Backward Compatibility
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:
Navigation
Forms
Tables
Blocks
Site Utilities
Editorial
eCommerce