ARIA Landmarks

ARIA Landmarks paired with their HTML5 equivalentshelp define the landmark regions of a page making it more semantic and easier to navigate.

The Problem

There are cases where there's no appropriate HTML5 sectioning element or the element alone is not enough to fully define a landmark.

The Solution

ARIA Landmark roles and labels can assist in defining and clarifying landmarks that HTML5 sectioning elements alone cannot.

Related Articles

Live Examples

Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

before

after

Code Comparison

Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.

source

Comparing /examples/aria/landmarks/before/index.html to /examples/aria/landmarks/after/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Accessibility Solutions - ARIA - Landmarks</title>
<link rel="stylesheet" href="../../../presentation.css" />
<link rel="stylesheet" href="landmarks.css" />
</head>
<body id="top">
<header
role="banner">
<a href="#main" class="skip-link sr-only sr-only-focusable"
>Skip to main content</a
>
<nav
role="navigation">
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Architecto</a></li>
<li><a href="#">Quas</a></li>
<li><a href="#">Nobis</a></li>
</ul>
</nav>
<form class="search"
role="search">
<input type="search" aria-label="Search" />
<button type="submit">Search</button>
</form>
</header>
<main
role="main" id="main">
<h1
id="example-h1">ARIA Landmark Examples</h1>
<
p role="complementary"aside>
Building on the example in the Navigation &rarr; Landmarks page, this
source code illustrates ways to add additional landmarks to a page
beyond sectioning elements.
</
paside>
<p>
Key highlights of changes from <strong>before</strong> to
<strong>after</strong>:
</p>
<ul>
<li>
Now that HTML5 Sectioning Elements are widely supported, adding an
ARIA <code>role</code> to them is duplicative.
</li>
<li>
The search form has an available ARIA <code>role</code> that doesn't
have a native HTML5 equivalent so adding <code>role="search"</code> is
appropriate for the search form in the header.
</li>
<li>
Whenever a landmark role (like <code>&lt;nav></code> in this example)
is used more than once on a page, provide each instance of that
landmark with a unique <code>aria-label</code>. Don't add the role to
the <code>aria-label</code>, it'll be read twice. For example an
aria-label of <strong>Footer Navigation</strong> would read as
<strong>"Footer Navigation: Navigation"</strong> by screen readers.
</li>
</ul>
<blockquote>
<a
href="https://www.w3.org/TR/wai-aria-practices/#no_aria_better_bad_aria"
>No ARIA is better than Bad ARIA</a
>. Be sure to take the overall context into account before adding
additional roles and landmarks.
</blockquote>
</main>
<footer>
&copy; Copyright Information makes it look official

<nav
role="navigationaria-label="Footer">
<ul>
<li><a href="#">Accusamus dolore</a></li>
<li><a href="#">Tenetur corporis</a></li>
<li><a href="#">Atque fuga</a></li>
</ul>
</nav>
</footer>
</body>
</html>

styles

Comparing /examples/aria/landmarks/before/landmarks.css to /examples/aria/landmarks/after/landmarks.css

footer {
background-color: #eee;
border-top: 1px solid #999;
padding: 1em;
text-align: center;
}

header {
align-items: center;
border-bottom: 1px solid #999;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

main {
padding: 1em;
}

nav ul {
list-style: none;
margin: 0;
padding: 0;
}

nav li {
display: inline-block;
padding: 1em;
}

.search {
padding: 1em;
}

.skip-link:focus {
left: 0;
line-height: 1;
padding: 10px;
position: absolute;
top: 0;
}