A11Y Solutions
Provides auto-suggestions when entering text


    ARIA Landmarks paired with their HTML5 equivalents help 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.

    Please note that this Before example contains inaccessible code, use this link to skip to the After Live Example



    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.


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

    <!DOCTYPE html>
    <html lang="en">
    <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" />
    <body id="top">
    <a href="#main" class="skip-link sr-only sr-only-focusable"
    >Skip to main content</a
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Architecto</a></li>
    <li><a href="#">Quas</a></li>
    <li><a href="#">Nobis</a></li>
    <form class="search"
    <input type="search" aria-label="Search" />
    <button type="submit">Search</button>
    role="main" id="main">
    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.
    Key highlights of changes from <strong>before</strong> to
    Now that HTML5 Sectioning Elements are widely supported, adding an
    ARIA <code>role</code> to them is duplicative.
    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.
    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.
    >No ARIA is better than Bad ARIA</a
    >. Be sure to take the overall context into account before adding
    additional roles and landmarks.
    &copy; Copyright Information makes it look official

    <li><a href="#">Accusamus dolore</a></li>
    <li><a href="#">Tenetur corporis</a></li>
    <li><a href="#">Atque fuga</a></li>


    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;