RPeraltaJr
11/26/2017 - 5:39 AM

WAI-ARIA Roles (Landmark Roles, Widget Roles, etc.)

For more information visit:

  1. http://karlgroves-sandbox.com/CheatSheets/ARIA-Cheatsheet.html
  2. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
index.html
content_copyfile_download
<!doctype html>
<html>
<head>
<title>Title of your document</title>
<meta charset="utf-8">
<meta name="description" content="description of your document">
</head>


<body>

<header role="banner">
  <h1>Title of your document</h1>
  <!-- Use 'aria-label' if more than one navigation/role -->
  <nav role="navigation" aria-label="mainnav">
    <ol>
      <li>
        <a href="#">alpha</a>
      </li>
      <li>
        <a href="#">bravo</a>
      </li>
      <li>
        <a href="#">charlie</a>
      </li>
      <li>
        <a href="#">delta</a>
      </li>
    </ol>
    <form role="search">
      <input type="search" placeholder="Need to find something?">
      <input type="submit" value="search">
    </form>
  </nav>
</header>

<main role="main">
  <h2>Main Content</h2>
  <p>Juicy content</p>
</main>

<aside role="complementary">
  <h2>Sidebar</h2>
  <p>Complementary content</p>
</aside>

<nav role="navigation" aria-label="pagenav"> <!-- Use 'aria-label' if more than one navigation/role -->
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

<footer role="contentinfo">
  <h2>Footer</h2>
  <p>Information about the document</p>
</footer>

</body>
</html>