Skip Link Code Snippet

Ready-to-use skip navigation link code for your websites.

Why Skip Links?

Skip links allow keyboard and screen reader users to bypass repetitive navigation and jump directly to main content. They are:

Live Demo

PressTabin this demo area to see the skip link appear:

Skip to main content

Main Content

This is the main content area. The skip link lets you jump here directly.

HTML Code

Add this as thefirst elementinside your<body>tag:

<!-- Skip link - place as first element in body -->
<aclass="skip-link"href="#maincontent">Skip to main content</a>
<!-- Your header/navigation here -->
<header>...</header>
<!-- Main content with matching ID -->
<mainid="maincontent">
 ...
</main>

CSS Code

Add this CSS to hide the skip link until it receives keyboard focus:

/* Skip link - hidden until focused */
.skip-link{
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
z-index:100;
}
/* Visible when focused */
.skip-link:focus{
position:fixed;
top:0;
left:0;
width:auto;
height:auto;
overflow:visible;
padding:0.75rem 1.5rem;
background:#0C234B;/* UA Arizona Blue */
color:#ffffff;
font-size:1rem;
font-weight:600;
text-decoration:none;
outline:3px solid #AB0520;/* UA Arizona Red */
outline-offset:2px;
}

Variations

Multiple Skip Links

For complex pages, you can offer multiple targets:

<navclass="skip-links"aria-label="Skip navigation">
<ahref="#maincontent">Skip to main content</a>
<ahref="#search">Skip to search</a>
<ahref="#footer">Skip to footer</a>
</nav>

With Smooth Scroll

Add smooth scrolling (but ensure it respects reduced motion preferences):

html{
scroll-behavior:smooth;
}
@media(prefers-reduced-motion: reduce) {
html{
scroll-behavior:auto;
 }
}

Testing Your Skip Link

  1. Load your page and pressTab— skip link should be the first thing focused
  2. Verify the skip link is visible when focused
  3. PressEnter— focus should move to main content
  4. Test with a screen reader — link should be announced
  5. Verify focus indicator is clearly visible (3:1 contrast minimum)

Common Mistakes

  • Missing target ID:Ensure#maincontentmatches an actual element ID
  • Wrong element order:Skip link must be first focusable element
  • Hidden from screen readers:Don't usedisplay: noneorvisibility: hidden
  • Not actually hidden:Using onlyopacity: 0still takes up space

Related Resources