CONTENTINFO Landmark

Definition A contentinfo landmark is a way to identify common information at the bottom of each page within a website, typically called the "footer" of the page, including information such as copyrights and links to privacy and accessibility statements.
ARIA Specification contentinfo landmark
Coding Patterns
  • Each page may have one contentinfo landmark.
  • The contentinfo landmark should be a top-level landmark.
  • When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one contentinfo landmark.
  • If a page includes more than one contentinfo landmark, each should have a unique label (see Step 3 above).
Techniques
  • The HTML5 footer element defines a contentinfo landmark when its context is the body element.
  • The HTML5 footer element is not considered a contentinfo landmark when it is descendant of any of following elements:
    • address
    • article
    • aside
    • blockquote
    • details
    • fieldset
    • figure
    • main
    • nav
    • section
    • table
  • If the HTML5 footer element technique is not being used, a role="contentinfo" attribute should be used to define a contentinfo landmark.
Headings
  • Each contentinfo landmark may have an h2 element describing the content of the footer.

Example of HTML5 footer element technique

<body>

  <header>
    <h1>website information<h1>
    .... banner content....
  </header>

  <nav>
    <h2>title for navigation<h2>
    <ul>
      <li><a href="page1.html">Link 1</a></li>
      <li><a href="page2.html">Link 2</a></li>
      <li><a href="page3.html">Link 3</a></li>
      <li><a href="page4.html">Link 4</a></li>
      .....
    </ul>
  </nav>

  <main>
    <h1>title for main content<h1>
    .... main content....
  </main>

  <footer>
    <h2>Contact, Policies and Legal<h2>
    .... contentinfo content....
  </footer>
</body>

Example of [role="contentinfo"] element technique

<body>

  <divrole="banner">
    <h1>website information<h1>
    .... banner content....
  </div>

  <div role="navigation">
    <h2>title for navigation<h2>
    <ul>
      <li><a href="page1.html">Link 1</a></li>
      <li><a href="page2.html">Link 2</a></li>
      <li><a href="page3.html">Link 3</a></li>
      <li><a href="page4.html">Link 4</a></li>
      .....
    </ul>
  </div>

  <div role="main">
    <h1>title for main content<h1>
    .... main content....
  </div>

  <div role="contentinfo">
    <h2>Contact, Policies and Legal<h2>
    .... contentinfo content....
  </div>
</body>