<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Landmark regions with explicit ARIA role</title>
    <meta charset="utf-8">
  </head>
  <body>
    <header role="banner">
      <p>This is the banner region.  The markup uses the HTML5 header element with an explicit ARIA role: <code>&lt;header role="banner"&gt;</code>.</p>
    </header>
    <nav role="navigation">
      <p>This is the banner region.  The markup uses the HTML5 nav element with an explicit ARIA role: <code>&lt;nav role="navigation"&gt;</code>.</p>
    </nav>
    <main role="main">
      <h1>Landmark regions with explicit ARIA role</h1>
      <p>This is the main region.  The markup uses the HTML5 main element with an explicit ARIA role: <code>&lt;main role="main"&gt;</code>.</p>
    </main>
    <aside role="complementary">
      <p>This is a complementary region.  The markup uses the HTML5 aside element with an explicit ARIA role: <code>&lt;aside role="complementary"&gt;</code>.</p>
    </aside>
    <footer role="contentinfo">
      <p>This is the contentinfo region.  The markup uses the HTML5 footer element with an explicit ARIA role: <code>&lt;footer role="contentinfo"&gt;</code>.</p>
    </footer>
  </body>
</html>

Add demo of Landmark regions with explicit ARIA roles.
Add demo of Landmark regions with explicit ARIA roles.
