KAWWA Markup Pattern Library


Navigation

Skip navigation link Component Information

  • Class name: (k-skip)
  • Version: 1.0

Add to list

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

COPY
  1. <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

COPY
  1. .k-skip {display: inline;}
  2. 
                                
  3. 	.k-skip a {
  4. 		position: absolute;
  5. 		overflow: hidden;
  6. 		left: -10000px;
  7. 		top: auto;
  8. 		width: 1px;
  9. 		height: 1px;
  10. 	}
  11. 	.k-skip a:focus {position: static; width: auto; height: auto;}
  12. 
                                

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:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce