Skip Link

Demo

Example Text

Hello there! Come here my little friend. Don't be afraid. Don't worry, he'll be all right. What happened? Rest easy, son, you've had a busy day. You're fortunate you're still in one piece. Ben? Ben Kenobi!

HTML Code

<a class="hidden" id="skipLink" href="#demomain">Skip to content</a>
<div id="content">
	<nav>
	<ul>
		<li><a href="#">Main</a></li>
		<li><a href="#">Things</a></li>
		<li><a href="#">Stuff</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
	<div id="demomain">
		<h1 tabindex="0" id="demoHead">Here's a heading and some content! It's important to focus on me.</h1>
    	<p>Content, content, content...lorem ipsum, etc.</p>
		<button id="demoBtn">Push me</button>
	</div>
</div>

CSS Code

*:focus {
    border: 2px solid blue;
}

* {
 box-sizing: border-box;
}

body {
  margin: 0;
  height: 500px;
}

a {
  color: #333;
  text-decoration: none;
  padding: 0.5rem;
}

button {
  font-size: 1.25rem;
  border-radius: 0.33em;
  font-family: inherit;
  background: #111;
  color: #fefefe;
  padding: 0.75rem;
  border: 0;
  text-align: center;
  margin-top: 20vh;
  margin-left: 25%;
  width: 50%;
}

ul {
	list-style: none;
	margin-top: 0px;
	padding-left: 0px;
	background-color: lightgreen;
}

ul > li {
  font-size: 1.25rem;
  font-family: inherit;
  color: #000;
  padding: 0.75rem;
  display: inline-block;
  width: 24%;
  text-align: center;
  margin: 0px;
}

ul > li a {
	width: 100%;
}

ul > li:hover {
	background-color: aliceblue;
}

ul > li a:focus {
	background-color: aliceblue;
}

.hidden {
  padding: 0.75rem;
  padding-bottom: 1.25rem;
  position: absolute;
  background: #000;
  color: #fff;
  left: 50%;
  height: 50px;
  transform: translateY(-100%);
  transition: transform 0.3s;
  opacity: 0;
}

.hidden:focus {
	transform: translateY(0%);
  opacity: 1;
  border: 2px solid aliceblue;
}

#content {
	height: 400px;
	background-color: #009FD4;
}

p {
	color: white;
	padding-left: 20px;
}

Why use a skip link?

Skip links serve as shortcuts that allow users to bypass repetitive content, such as navigation menus, and jump directly to the main content of a page. This is especially valuable for individuals with disabilities, such as those with motor or visual impairments, who may find navigating through lengthy menus time-consuming. It should be noted that skip links can and need to be used for repeated blocks of content that are not only navigation menus. Skip links contribute to a more efficient and user-friendly experience, ensuring that everyone, regardless of their abilities, can quickly access and engage with the core content of a webpage without unnecessary barriers or delays. By prioritizing inclusivity through skip links, designers and developers contribute to a more equitable and accommodating digital environment.

What are some accessibility concerns?

Visibility and Consistency:
- Concern: Skip links should be clearly visible and consistently present across all pages of the website. Inconsistent placement or visibility can confuse users.
- Mitigation: Ensure skip links are styled to be easily noticeable, and maintain a consistent position or appearance throughout the website.
Focus Styling:
- Concern: Users navigating with a keyboard should be able to perceive when a skip link has received focus for better visibility and understanding.
- Mitigation: Apply clear focus styling to skip links so that users can easily identify which link is currently in focus.
Positional Awareness:
- Concern: Skip links that rely on absolute positioning may not be visible to users who have custom stylesheets or altered default browser settings.
- Mitigation: Implement skip links using a method that ensures their visibility, such as using a visually hidden technique that remains accessible to screen readers.
Testing Across Browsers and Devices:
- Concern: Skip links may behave inconsistently across various browsers and devices.
- Mitigation: Test skip links on different browsers and devices to ensure consistent behavior and functionality. Address any issues specific to certain environments.
Mobile Responsiveness:
- Concern: On smaller screens, skip links may occupy valuable space or conflict with the mobile interface.
- Mitigation: Implement responsive design for skip links, considering their visibility and positioning on mobile devices. Adjust the design to accommodate smaller screens without compromising usability.

2.1.1
Keyboard ( level A ) :
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
2.4.1
Bypass Blocks ( level A ) :
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
2.4.5
Multiple Ways ( level AA ) :
More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
3.2.3
Consistent Navigation ( level AA ) :
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Additional Ability Services:

Chat with usLiveChat