How to Add Skip Navigation Links for Better Web Accessibility in HTML?

Last Updated : 30 Apr, 2024

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.

HTML

<!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>GeeksforGeeks</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>
                GeeksforGeeks 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.
                GeeksforGeeks 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>
                GeeksforGeeks 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. GeeksforGeeks 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:

Untitled-video---Made-with-Clipchamp

Example 2: In this example, the user can access the Sections by clicking the section link

HTML

<!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>
                    GeeksforGeeks 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. GeeksforGeeks 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. GeeksforGeeks 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>