How to Add Skip Navigation Links for Better Web Accessibility in HTML?
Adding skip navigation links in HTML is an essential practice for enhancing web accessibility. These links allow users to bypass repetitive navigation menus and directly access the main content of a webpage, especially for screen reader users or keyboard-only users. This simple addition significantly improves the usability and accessibility of a website, ensuring a smoother browsing experience for all users.
Approach:
- Create HTML Structure: Begin by adding the necessary HTML structure to your webpage. This includes elements like <header>, <nav>, <main>, and <footer>. Ensure that your main content area has an id attribute, such as id=”main-content”, to serve as the target for the skip link.
- Add Skip Link: Insert an anchor (<a>) element at the beginning of your HTML body. This anchor will serve as the skip link. Give it an href attribute pointing to the id of your main content area (e.g., href=”#main-content”). Also, provide it with a visually hidden class or style to keep it off-screen by default.
- Style Skip Link: Use CSS to style the skip link. Position it off-screen initially, typically with position: absolute; and top: -40px; This ensures it remains hidden from view until you click the tab.
Syntax:
<body>
<a href="#main-content" class="skip-navigation">
Skip to main content
</a>
<!-- Rest of your HTML -->
</body>
<main id="main-content">
<!-- Main content of your webpage -->
</main>
Example 1: In this example, clicking on Tab the Skip button will appear clicking which the content will be skipped to the main content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Skip Navigation Example</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.skip-link {
position: absolute;
top: -40px;
left: 10px;
background-color: #333;
color: #fff;
padding: 10px;
text-decoration: none;
z-index: 999;
transition: top 0.3s;
}
.skip-link:focus {
top: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
nav {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding-top: 20px;
}
footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<h1>w3wiki</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div>
<h2>About Us</h2>
<h2>Company Profile and Brand</h2>
<p>
w3wiki is a leading platform that provides computer
science resources and coding challenges for programmers and
technology enthusiasts, along with interview and exam
preparations for upcoming aspirants. With a strong emphasis on
enhancing coding skills and knowledge, it has become a trusted
destination for over 12 million plus registered users worldwide.
The platform offers a vast collection of tutorials, practice
problems, interview tutorials, articles, and courses, covering
various domains of computer science.
</p>
<p>
Our exceptional mentors hailing from top colleges &
organizations have the ability to guide you on a journey from
the humble beginnings of coding to the pinnacle of expertise.
Under their guidance watch your skills flourish as we lay the
foundation and help you conquer the world of coding.
</p>
<p>
Our brand is built on the pillars of expertise, accessibility,
and community. We strive to empower individuals to enhance their
programming skills, to bridge the gap between academia and
industry, and provide a supportive community to the learners.
w3wiki is committed to promoting technological
advancement and providing opportunities for growth in the
ever-evolving field of computer science.
</p>
<h2>Corporate History, Mission, Vision, and Motto</h2>
<h3>Corporate History</h3>
<p>
w3wiki was founded in 2008 by Sandeep Jain with a vision
to establish a comprehensive platform for computer science
education and skill development. Over the years, the platform
has experienced exponential growth, cementing its position as
one of the most trusted and renowned names in the programming
community.
</p>
<h3>Mission</h3>
<p>
Our mission is to empower programmers and technology enthusiasts
worldwide to excel in their coding skills and unleash their full
potential. We want to bridge the gap between theory and
practice, equipping individuals with skills and expertise
required to tackle real-world challenges in the ever evolving
field of technology and get them prepared for their dream jobs.
</p>
<h3>Vision</h3>
<p>
We envision a world where every programmer has unfettered access
to top-tier learning resources, enabling them to continuously
enhance their skills and flourish amidst the ever-evolving
technology landscape. w3wiki aspires to be the definitive
platform for programmers, empowering them to stay at the
forefront of their careers and make a significant impact in the
dynamic tech industry. With the time we have evolved and
introduced other core fields preparation courses to support the
young aspirants.
</p>
<h3>Motto</h3>
<p>
“Learn, Practice, and Excel” – This motto encapsulates our
unwavering dedication to continuous learning, hands-on practice,
and the pursuit of excellence. We firmly believe that learning
is an ongoing journey that spans a lifetime, and with persistent
practice and unwavering dedication, individuals can truly excel
in the vast realm of computer science.
</p>
</div>
<main id="main-content">
<h2>Main Content</h2>
<p>This is the main content of the page.</p>
<p>
It could include articles, posts, or any other relevant
information.
</p>
</main>
<footer>
<p>All rights reserved</p>
</footer>
</body>
</html>
Output:
Example 2: In this example, the user can access the Sections by clicking the section link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Skip Navigation Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
nav {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding-top: 20px;
}
footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
/* Style for content sections */
.content-section {
padding: 20px;
background-color: #f0f0f0;
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li><a href="#section4">Section 4</a></li>
</ul>
</nav>
<main id="main-content">
<!-- Main content -->
<div class="content-section" id="section1">
<h2>Section 1</h2>
<p>
w3wiki is a leading platform that provides computer
science resources and coding challenges for programmers and
technology enthusiasts, along with interview and exam
preparations for upcoming aspirants. With a strong emphasis
on enhancing coding skills and knowledge, it has become a
trusted destination for over 12 million plus registered
users worldwide. The platform offers a vast collection of
tutorials, practice problems, interview tutorials, articles,
and courses, covering various domains of computer science.
</p>
</div>
<div class="content-section" id="section2">
<h2>Section 2</h2>
<p>
Our brand is built on the pillars of expertise,
accessibility, and community. We strive to empower
individuals to enhance their programming skills, to bridge
the gap between academia and industry, and provide a
supportive community to the learners. w3wiki is
committed to promoting technological advancement and
providing opportunities for growth in the ever-evolving
field of computer science.
</p>
<p>
Our exceptional mentors hailing from top colleges &
organizations have the ability to guide you on a journey
from the humble beginnings of coding to the pinnacle of
expertise. Under their guidance watch your skills flourish
as we lay the foundation and help you conquer the world of
coding.
</p>
</div>
<div class="content-section" id="section3">
<h2>Section 3</h2>
<p>
We envision a world where every programmer has unfettered
access to top-tier learning resources, enabling them to
continuously enhance their skills and flourish amidst the
ever-evolving technology landscape. w3wiki aspires to
be the definitive platform for programmers, empowering them
to stay at the forefront of their careers and make a
significant impact in the dynamic tech industry. With the
time we have evolved and introduced other core fields
preparation courses to support the young aspirants.
</p>
</div>
<div class="content-section" id="section4">
<h2>Section 4</h2>
<p>
“Learn, Practice, and Excel” – This motto encapsulates our
unwavering dedication to continuous learning, hands-on
practice, and the pursuit of excellence. We firmly believe
that learning is an ongoing journey that spans a lifetime,
and with persistent practice and unwavering dedication,
individuals can truly excel in the vast realm of computer
science.
</p>
</div>
</main>
<footer>
<p>Website Footer</p>
</footer>
</body>
</html>
Output: