Skip to content

Instantly share code, notes, and snippets.

@kristindiannefoss
Last active August 16, 2016 17:28
Show Gist options
  • Save kristindiannefoss/8aee1b56bafe5bce14d404908b831f6c to your computer and use it in GitHub Desktop.
Save kristindiannefoss/8aee1b56bafe5bce14d404908b831f6c to your computer and use it in GitHub Desktop.
Practicing using ARIA labels/roles in html
<div>
  <h1 role="heading">Main Title</h1>
    <form action="/" method="get" role="search">
      <label for="search-field">Search:</label>
      <input type="search" role="searchbox">
      <input type="submit" role="button">
    </form>
</div>
<nav role="navigation">
  <ul>
   <li><a href="/" role="link">Home</a></li>
   <li><a href="/products" role="link">About</a></li>
   <li><a href="/about" role="link">Contact</a></li>
 </ul>
</nav>
<main>
<div>
  <div>
    <h2 role="heading">Content Title Subject One</h2>
    <p role="contentinfo">This is the content of this important section</p>
  </div>
  <div>
    <h2 role="heading">Content Title Subject Two</h2>
    <p role="contentinfo">This is the content of the section important section</p>
  </div>
  <div>
    <img src="mountain.jpg" alt="mountains at sunset in Germany" role="img" />
  </div>
</div>
<footer>
  <div>
    <span>Copyright &amp;copy; Aurelio De Rosa 2014</span>
  </div>
</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment