Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demonstration of the disparity between semantic HTML and 'DIV soup'

A simple website header

Correct

<header>
  <a href="#">Welcome to my site</a>
  <nav>
    <ul>
      <li aria-current="true"><a href="#">home</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
</header>

An assistive technology is able to understand that:

  • the structure represents group of introductory or navigational aids, by using the <header> element.
  • the unordered list represents a section that links to other pages or to parts within the page, by using the <nav> element.
  • the first menu item is a link to the current page, by using aria-current="true"

Incorrect

<div id="header">
  <a href="#">Welcome to my site</a>
  <div class="menu">
    <span class="active"><a href="#">home</a></span>
    <span><a href="#">portfolio</a></span>
    <span><a href="#">blog</a></span>
    <span><a href="#">contact</a></span>
  </ul>
</div>

For many more great examples of ARIA usage, please check out Heydon Pickering's demos

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment