Help
You might already be using a class value to mark up your navigational content, but if you want to provide screen readers and mobile devices a consistent, standardized method of accessing navigational content, then the HTML5 nav element is what you're looking for. In this excerpt from Ben Henick's HTML & CSS: The Good Parts you'll learn about the nav element and why it's an important addition to the HTML feature set.
Among the new elements in HTML5 intended for adding richer structure to
HTML documents, the nav element is
arguably the most important. While the other proposed structural
elements, such as the section
element, are great features for authors, they don’t have much direct
impact on end users. The nav element,
on the other hand, is a different case. It is important in that it gives
you a standard way to mark up navigational content so that user agents
can identify it and handle it differently if they choose to—which means
that user agents can use nav to
significantly improve the user experience.
Navigational content—that is, the lists of hyperlinks that each page of a website or web application provides for the purpose of navigating to other parts of a site, other features of an application, or specific parts of a page—can appear in a variety of places in a page or application. For example, in a page that uses a multicolumn layout, you might put primary navigation in the leftmost column of the page and secondary navigation in the rightmost column. Or, in another page design or a web application, you might put primary navigation in menus at the top of the page that expand to show their contents when the user selects them, and secondary navigation in the footer of the page.
Lacking the nav element, you
would most likely mark up navigational content using a div with a particular
class attribute. The class value “nav” is in fact one of the twenty
or so most commonly used class values
on the Web. Sites also use values like primaryNav and
secondaryNav to further distinguish between separate
classes of navigational content.
The problem with using class
values exclusively to mark up navigational content is the lack of
agreed-upon standard values that are used consistently across different
sites. The nav element solves that
problem by providing a common standard element that all web authors can
use for the same purpose. In turn, having a standard nav element helps with a common dilemma that
faces many authors: the need to decide where to place navigational
content in the source order of a document to try to ensure it does not
negatively affect document accessibility, or limit usability on
small-screen mobile devices.
A number of accessibility issues affect the decision about where to place navigational content in the source order of the document. For example:
There is a common concern that if you don’t place primary navigation near the top of a document, the document will be less accessible to users of AT (accessibility technology) products such as screen readers. The worry is that such users are accustomed to finding the primary navigation at the top of any given document and won’t be able to locate it elsewhere.
Paradoxically, there is a conflicting concern that if you place primary navigation at the top of a document in source order, it will make your content less accessible. That’s because in a typical site design, most every page of the site will have the same long set of navigational links that users of AT tools need to wade through to get to the main content. This can be frustrating and time-consuming.
Closely related to the second concern is the question of usability of content in browsers on small-screen mobile devices. A number of mobile browsers have a built-in means for intelligently reformatting content into a single column to make it more usable on a small screen. Mobile browsers typically do that reformatting based on the source order of the content, so if the primary navigation appears at the top of each page in source order, users of such browsers end up facing the same problem that users of AT tools face. On each and every page they are confronted with a long list of primary navigation that they then need to scroll through to get to the main content.
In practice, a common way that authors address the second and third concerns is to provide something like a “Skip to main content” or “Skip past navigation” hyperlink on each page prior to the primary navigation. This helps, but it is essentially a hack to work around the fact that prior to HTML5 there was no standard way (without using heuristics) that a screen reader or a browser on a mobile device could determine what part of document is navigation and what part is actual content.
With the addition of the nav element to
HTML5, user agents now have a standard element to look for that they
know contains navigational content. They can then provide alternative
means for presenting that navigational content to users, as a note in
the current draft of the HTML5 specification explains:
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.
Screen readers are not the only type of user agent for which nav is especially useful; it is extremely
useful for browsers on small-screen mobile devices as well. Such
browsers might, for example, make nav content accessible through a soft-key
menu rather than rendering it within the main text flow of a
page.
Of course, all the wonderful utility of the nav element is just a pipe dream unless AT
tools, browsers on mobile devices, and other user agents actually add
some features to their user interfaces to take advantage it.
Learn more about this topic from HTML & CSS: The Good Parts.
HTML and CSS are the workhorses of web design, but using them together to build consistent, reliable web pages is difficult if you're relying on outdated, confusing, and unnecessary HTML hacks and workarounds. With this practical book, you'll learn how to work with these tools far more effectively than is standard practice for most web developers. You'll learn how to connect the underlying theory and design of HTML and CSS to your everyday work habits.
