Landmarks

Ready

HTML
View
Context
Assets
Notes


        
        <header class="sample-header">
    <nav class="sample-nav" aria-label="Header Menu">
        <ul>
            <li><a href="https://www.google.com/">Lorem</a></li>
            <li><a href="https://www.google.com/">Ipsum</a></li>
            <li><a href="https://www.google.com/">Dolar</a></li>
            <li><a href="https://www.google.com/">Set</a></li>
        </ul>
    </nav>
</header>
<main id="main" class="sample-main">
    <section class="sample-hero" style="background-image: url(https://via.placeholder.com/1200x300)">
        <div class="sample-hero__overlay">
            <h1 class="h3">Page Title</h1>
            <p>High-level description for the page. Component maybe a hero. Could be a carousel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin leo quis sapien mollis faucibus.</p>
        </div>
    </section>
    <section>
        <h2 class="h3">Section Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit dolor fringilla ipsum vehicula semper. Sed hendrerit nibh in metus egestas interdum. Cras ultricies venenatis nulla, vitae ullamcorper ex aliquet at. Cras ultricies erat
            egestas dolor bibendum, eu facilisis tortor euismod.</p>
    </section>
    <section>
        <h2 class="h4">Related Content</h2>
        <ul class="sample-article-list">
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
        </ul>
    </section>
</main>
<footer class="sample-footer">
    <nav class="sample-nav" aria-label="Footer Menu">
        <ul>
            <li><a href="https://www.google.com/">Lorem</a></li>
            <li><a href="https://www.google.com/">Ipsum</a></li>
            <li><a href="https://www.google.com/">Dolar</a></li>
            <li><a href="https://www.google.com/">Set</a></li>
        </ul>
    </nav>
</footer>


        <header class="sample-header">
    <nav class="sample-nav" aria-label="Header Menu">
        <ul>
            <li><a href="https://www.google.com/">Lorem</a></li>
            <li><a href="https://www.google.com/">Ipsum</a></li>
            <li><a href="https://www.google.com/">Dolar</a></li>
            <li><a href="https://www.google.com/">Set</a></li>
        </ul>
    </nav>
</header>
<main id="main" class="sample-main">
    <section class="sample-hero" style="background-image: url(https://via.placeholder.com/1200x300)">
        <div class="sample-hero__overlay">
            <h1 class="h3">Page Title</h1>
            <p>High-level description for the page. Component maybe a hero. Could be a carousel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin leo quis sapien mollis faucibus.</p>
        </div>
    </section>
    <section>
        <h2 class="h3">Section Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit dolor fringilla ipsum vehicula semper. Sed hendrerit nibh in metus egestas interdum. Cras ultricies venenatis nulla, vitae ullamcorper ex aliquet at. Cras ultricies erat egestas dolor bibendum, eu facilisis tortor euismod.</p>
    </section>
    <section>
        <h2 class="h4">Related Content</h2>
        <ul class="sample-article-list">
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
        </ul>
    </section>
</main>
<footer class="sample-footer">
    <nav class="sample-nav" aria-label="Footer Menu">
        <ul>
            <li><a href="https://www.google.com/">Lorem</a></li>
            <li><a href="https://www.google.com/">Ipsum</a></li>
            <li><a href="https://www.google.com/">Dolar</a></li>
            <li><a href="https://www.google.com/">Set</a></li>
        </ul>
    </nav>
</footer>


        
            
            /* No context defined for this component. */

File:

Content:


                                .sample-header,
.sample-footer {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: color(neutral, light);
}

.sample-nav {

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

  li {
    margin-top: 0;
  }

  li + li {
    margin-left: 10px;
  }
}

.sample-main {

  section {
    padding: 0 20px;
  }
}

.sample-hero {
  position: relative;
  padding: 0;
  height: 300px;
  background-repeat: no-repeat;
  background-position: center;

  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
  }

  h1,
  p {
    color: color(neutral, lightest);
  }

  p {
    @include font-size(20);
  }
}

.sample-article-list {
  display: flex;
  margin: 0 -15px 40px;
  padding: 0;

  li {
    padding: 0 15px;
    width: 33.333333%;
    list-style: none;
  }
}

.sample-article {
  border-radius: 6px;
  border: 1px solid color(neutral, lighter);
  background-color: color(neutral, lightest);

  &__image {
    height: 150px;
    overflow: hidden;

    img {
      width: 100%;
      min-width: 100%;
      min-height: 100%;
      object-fit: cover;
    }
  }

  &__content {
    padding: 0 20px;
  }

  p {
    @include font-size(16);
  }
}

.sample-footer {
  background-color: color(neutral, lighter);
}

URL: /components/raw/landmarks/_landmarks.scss
Filesystem Path: components/landmarks/_landmarks.scss
Size: 1.5 KB

Content:


                                <header class="sample-header">
    <nav class="sample-nav" aria-label="Header Menu">
        <ul>
            <li><a href="https://www.google.com/">Lorem</a></li>
            <li><a href="https://www.google.com/">Ipsum</a></li>
            <li><a href="https://www.google.com/">Dolar</a></li>
            <li><a href="https://www.google.com/">Set</a></li>
        </ul>
    </nav>
</header>
<main id="main" class="sample-main">
    <section class="sample-hero" style="background-image: url(https://via.placeholder.com/1200x300)">
        <div class="sample-hero__overlay">
            <h1 class="h3">Page Title</h1>
            <p>High-level description for the page. Component maybe a hero. Could be a carousel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin leo quis sapien mollis faucibus.</p>
        </div>
    </section>
    <section>
        <h2 class="h3">Section Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam hendrerit dolor fringilla ipsum vehicula semper. Sed hendrerit nibh in metus egestas interdum. Cras ultricies venenatis nulla, vitae ullamcorper ex aliquet at. Cras ultricies erat egestas dolor bibendum, eu facilisis tortor euismod.</p>
    </section>
    <section>
        <h2 class="h4">Related Content</h2>
        <ul class="sample-article-list">
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
            <li>
                <article class="sample-article">
                    <div class="sample-article__image">
                        <img src="https://via.placeholder.com/400x200" alt="Lorem ipsum" />
                    </div>
                    <div class="sample-article__content">
                        <h3 class="h6">Article Title</h3>
                        <p>Article description here. w3schools states that articles should make sense on thier own. As a general rule of thumb, you should beable to use this component outside of the context of this list.</p>
                    </div>
                </article>
            </li>
        </ul>
    </section>
</main>
<footer class="sample-footer">
    <nav class="sample-nav" aria-label="Footer Menu">
        <ul>
            <li><a href="https://www.google.com/">Lorem</a></li>
            <li><a href="https://www.google.com/">Ipsum</a></li>
            <li><a href="https://www.google.com/">Dolar</a></li>
            <li><a href="https://www.google.com/">Set</a></li>
        </ul>
    </nav>
</footer>

URL: /components/raw/landmarks/landmarks.html
Filesystem Path: components/landmarks/landmarks.html
Size: 3.7 KB

Usage

Aria landmarks are supplementary, semantic markup used by assistive technology to quickly identify and navigate the contents of a webpage. The majority of the guiding principles and rules surrounding landmarks can be referenced at www.w3.org.

General Guidelines

All top-level elements, or direct children of the body tag, should either be a landmark element or include a role attribute.
Using too many landmark elements or unnecessary aria attributes can make the overall layout of a page difficult to understand for screen reader users.
The aside landmark should be used for supplementary content; It should not be used for sidebar navigation.
HTML5 elements often come with default role attributes, so proper integration of those elements should take precendence of the use of landmark roles. For example, form, main and nav tags should be used instead of role="form", role="main" or role="navigation" in most situations.
The aria-label attribute overrides whatever text is within an element when read by assistive technology. Use it when you'd like to get more descriptive for the purpose of screen readers and the like. For example, a 'Read More' link can be misleading without visual context as it sits right under a block of text. A visually impaired user may ask themselves "Read more of what?". Use an aria-label attribute to provide a more thorough explanation as to what that 'Read More' link is refering to. IE aria-label="Read the full article". Additionally, it should be noted that an aria-label attribute is redundant in the case of most section landmarks that already have a header within it.
It is better not to landmark than to landmark incorrectly. If all else fails, use a div element.