Web Accessibility - Skip Navigation Link

Creating a Skip Navigation Link


<div id="skiplinks">
	<a href=“#content”>Skip to Content</a>
	<!-- additional skip links here -->
</div>

<!-- this anchor should go immediately before the content section -->
<a name="content"></a>

#skiplinks a {
	position: absolute;
	left: -9999px;
}

#skiplinks a:focus {
	position: absolute;
	left: 10px;
	top: 10px;
	background-color: white;
	color: blue;
}

You must be logged in to save your changes.

Title
Content	<h1>Creating a Skip Navigation Link</h1><h2>INSERT INTO HTML DIRECTLY AFTER <body> TAG </h2><pre><br /><div id="skiplinks"><br /> <a href=“#content”>Skip to Content</a><br /> <!-- additional skip links here --><br /></div></pre><p> </p><h2>ADD ANCHORS IN THE PLACES YOU WOULD LIKE TO TARGET WITH THE LINKS </h2><pre><!-- this anchor should go immediately before the content section --><br /><a name="content"></a> </pre><p> </p><h2>INSERT INTO CSS FILE </h2> <pre>#skiplinks a {<br /> position: absolute;<br /> left: -9999px;<br />}</pre><pre>#skiplinks a:focus {<br /> position: absolute;<br /> left: 10px;<br /> top: 10px;<br /> background-color: white;<br /> color: blue;<br />}<br /></pre><p> </p>
Keywords