Accessible navigation

This semantic HTML contains all accessibility features by default.

<a href="#nav-example">Skip to example navigation</a>
<nav tabindex="-1" class="nav-example" id="nav-example">
	<ul>
		<li><a href="/">Home</a></li>
		<li><a href="/about/">About</a></li>
		<li><a href="/contact/">Contact</a></li>
		<li><button aria-haspopup="true">Sign in</button></li>
	</ul>
</nav>

If you can’t use semantic HTML give the element a specific attribute to define its role

<div role="navigation">
  <ul>
    <li><a href="/">Website name</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
  <ul/>
</div>