Ensure All Page Content Is Contained By Landmarks
Web accessibility standards state that it is best practice to contain all content except skip links, within distinct regions such as the header, nav, main, and footer.
Why It Matters
When content is split between multiple high-level sections, navigating a web page is far simpler for screen reader users. Content outside of sections is difficult to find, and the content’s purpose may be unclear.
Fixing the Issue
Developers should ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.
This allows screen reader users to navigate to a section based on its HTML element or ARIA Landmark.
Good Code Example
The markup in the following example shows native HTML5 landmark elements:
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<header>This is the header</header>
<nav>This is the nav</nav>
<main>This is the main</main>
<footer>This is the footer</footer>
</body>
</html>
Copy ARIA best practices call for the use of native HTML5 landmark elements instead of ARIA roles where possible, but the markup in the following example works:
<html lang="en">
<head>
<title>Hello</title>
</head>
<body>
<div role="banner">This is the header</div>
<div role="navigation">This is the nav</div>
<div role="main">This is the main</div>
<div role="contentinfo">This is the footer</div>
</body>
</html>
Copy