Skip to content

Instantly share code, notes, and snippets.

Last active August 12, 2016 13:23
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Demonstration of the disparity between semantic HTML and 'DIV soup'

A simple website header


  <a href="#">Welcome to my site</a>
      <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>

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"


<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>

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