HTML Landmarks for accessibility
Why we need accessibility Landmarks ?
It helps the physical impairment users who are using a screen reader and allows them to jump to a particular section of a webpage.
Primary Landmark Elements
<header>- defines your header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<header>Define your complete header including navigation etc.</header>
</body>
</html><nav>- defines your navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
</body>
</html><footer>- defines your footer in which we can add the copyrights
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<footer>Your footer content goes here...</footer>
</body>
</html><main>- it is the main container in which we can place our content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<main>
<div>
<h1>Heading</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, dolores.</p>
</div>
</main>
</body>
</html><aside>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<aside>
<h1>This is heading text in aside Tag</h1>
<p>This is paragraph text in aside Tag</p>
</aside>
</body>
</html><section>- it is the container in which we can place our content and make them separate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<header>
<nav>Your navigation structure goes here...</nav>
</header>
<main>
<section>
<div>
<h1>Heading</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. At, dolores.</p>
</div>
</section>
<section>Second content here</section>
<section>Third content here</section>
</main>
<footer>Your footer content goes here...</footer>
</body>
</html>Primary Landmark Roles :
| Elements | Roles |
|---|---|
<header> | role="banner" |
<nav> | role="navigation" |
<aside> | role="contentinfo" |
<sidebar> | role="complementary" |
<footer> | role="footer" |
Understanding it with the example :
As showing in the image below is the example of current page without using a landmark
Now let’s fix the issue showing in the axeDevtools - Document should have one main landmark. To fix this issue we have added one role="main" to the container of the page where our main content lies and notice that now we are not getting the error.
Resources :
Thank you so much for reading my article.😊