How to Add a “Skip to Main Content” Link in HTML?
Add a ‘Skip to Main Content’ link in HTML to assist screen reader users by enabling them to quickly access key information, improving website accessibility for all users. This feature allows users to bypass repetitive sections like headers and menus, jumping straight to the main content area.
Approach
- First, Create the basic structure of the web page using different HTML elements. The anchor <a> element with a href attribute pointing to “#maincontent”, serves as a skip link to the main content section.
- The skip link is enhanced with ARIA attributes such as role=”link” and aria-label=”Skip directly to main content”, ensuring accessibility for users of assistive technologies like screen readers.
- CSS styles are applied to the skip link .skip-link to position it off-screen initially top: -40px, making it visually hidden but accessible to screen readers.
- When focused:focus, it shifts into view top: 10px for keyboard navigation.
- The main content section <main> is identified with the id=”maincontent” attribute, allowing the skip link to target it directly when activated.
- Press the tab key to get Skip to Main Content link on UI then press enter to Skip to Main Content
Example: The example below shows how to Add a “Skip to Main Content” Link in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>ARIA Enhanced Skip Link</title>
<style>
* {
padding: 0;
margin: 0;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #444;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 10px;
}
h1 {
height: 23vh;
text-align: center;
background-color: rgb(191, 242, 191);
}
main {
background-color: rgb(206, 206, 232);
height: 90vh;
}
h2,
p {
text-align: center;
}
footer {
background-color: rgb(191, 242, 191);
height: 23vh;
}
</style>
</head>
<body>
<a href="#maincontent" class="skip-link"
role="link"
aria-label="Skip directly to main content">
Skip to Main Content
</a>
<header>
<h1>Welcome to My Website</h1>
</header>
<main id="maincontent">
<h2>Main Content</h2>
</main>
<footer>
<p>Copyright © 2024</p>
</footer>
</body>
</html>
Output:
Output