HTML and CSS Reference
In-Depth Information
Discussion
A list, whether unordered or ordered, is generally considered the most appropriate
HTML element to use for groups of navigational links. This has been the case ever since
Christopher Schmitt first did it (see http://www.alistapart.com/articles/practicalcss/ ).
This markup can convey to assistive technology users how many navigational items are
in the list and how far down the list the user is.
In the future, you might not need to add an ARIA role or skip links. The user agent and
assistive technology should recognize each section element and allow users to jump
between page sections. That is, in that future, all you would need is this:
<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>
Purpose of skipping links
The skip links prevent users from repeatedly going through the content and links that
are listed on every page of a site. This is a critical addition to sites with long lists of
links, such as news or ecommerce sites.
The easiest way to add a skip link is to add an anchor text link. The exact location on
the screen doesn't matter, as long as the link is the first element in the page's tab order
and the link anchor is placed where the main content of the page begins.
Hiding skip to main content links
If you need to “hide” the skip link from sighted users, use CSS to position the text off
the screen (before you do this, consider that sighted keyboard users may be confused
because the text for the link will not be visible but the user will be able to tab to the link):
.offscreen {
left: −9999em;
position: absolute;
top: auto;
overflow: hidden;
width: 1px;
height: 1px;
}
 
Search WWH ::




Custom Search