HTML and CSS Reference
In-Depth Information
7.4 Creating More Accessible Navigation Links
Problem
You want to mark up your navigational links in a way that will benefit the most users.
Solution
Enclose the list of navigational links inside the HTML5
nav
element. Use an unordered
list for the links if they can be visited in any order:
<
nav
role="navigation">
<
ul
>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
</
ul
>
</
nav
>
Or, if the sequence of the links is important, use an ordered list to mark up the navi-
gational links:
<
nav
role="navigation">
<
ol
>
<li><a href="#">Chapter 1</a></li>
<li><a href="#">Chapter 2</a></li>
<li><a href="#">Chapter 3</a></li>
</
ol
>
</
nav
>
Next, add a “skip navigation” link:
<div id="offscreen"><a href="#maincontent">Skip to the main content</a></div>
...
<nav role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</nav>
...
<article
id="maincontent"
role="main">
...
This link may be placed before the navigation or closer to the top of the page, depending
on how much content appears before the navigation. Its purpose is to provide keyboard
and assistive technology users a way to go directly to the main content on the page.
