Accessible header

This semantic HTML contains all accessibility features by default.

<!-- This link lets people skip content and jump directly to the navigation -->
<header id="example-header">
	<a href="#nav-example">Skip to 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>Sign in</button></li>
		</ul>
	</nav>
</header>

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

<div role="banner" tabindex="-1" id="example-header">
	<a href="/">Website name</a>
</div>