Using CSS to create a Skip Link that surfaces to the visual user onFocus.

Donald F. Evans

April 29, 2011

Question

How can I best use a skip link to create as little impact on the visual user but also provide a good experience for the Screen Reader user and the Keyboard only user?

Answer

Using the CSS focusable property along with a bit of styling will do the job. Tab through this doc and watch the skip link surface when it has focus.

Example

Skip to Main Content

This is a heading


This is a line of text
Content begins here.

Code: <STYLE TYPE="text/css" MEDIA=screen> .visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px); /* for IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); margin: -1px; border: 0 !important; padding: 0; width: 1px; !important; height: 1px !important; overflow: hidden; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } </style> <a href="#content" class="visuallyhidden focusable" title="Skip to Main Content.">Skip to Main Content</a> ... <a name="content">Content begins here.</a>

Other Resources