Skip to main content

30 steps to a more accessible website

Step 9: Providing additional navigation aids

You may be familiar with the <link> tag in relation to external stylesheets. But did you know you can also use a similar syntax to point to your home page, and to previous and next pages in a series? For instance, on daily archive pages, you could point to the previous day's posts, and the next day's (if any). If you have individual pages for each entry, you could point to the previous and next entry.

<link rel="home" title="Home" href="http://url/of/home/page" />
<link rel="prev" title="Title of previous page" href="http://url/of/previous/page" />
<link rel="next" title="Title of next page" href="http://url/of/next/page" />

These links, normally invisible to visual browsers like Internet Explorer, can be displayed in alternate browsers and help users navigate through your website. You probably already provide several ways to navigate: weekly or monthly archives, links to recent posts, a monthly calendar of daily posts. You may even already have visible links on your archive pages pointing to previous and next days or entries. Those are all great; keep them, and add these too.

Who benefits?

  1. Marcus benefits. His text-only browser Lynx displays the additional navigation aids at the top of the page, using the title that we specified in the title attribute. Reading the daily archive page of June 18, this is what Marcus sees:
#Home June 17, 2002 June 19, 2002

(The # character lets Marcus know that this is metadata, not page content. Lynx does the same thing on the line with your meaningful page title.)

  • Michael benefits. His text-only browser Links (not to be confused with Marcus's browser, Lynx) also displays these additional navigation aids at the top of the page, like this:
Link: home Link: prev Link: next
  • Bill benefits. Mozilla displays the additional navigation links in the Site Navigation toolbar. The type of the link ("home", "prev", "next") is displayed on the toolbar button, and the title of the link is displayed as a tooltip. (Note: In Mozilla 1.2 and later, you can turn on the display of these links using the View menu, Show/Hide, Site Navigation Bar, Show Always.)
  • iCab users benefit. iCab displays the navigation links in a drop-down menu in the toolbar, using the title defined in each link.

How to do it

Further reading

« Step 8: Meaningful page titles | Contents | Step 10: Presenting main content first »

This guide is adapted from Dive Into Accessibility by Mark Pilgrim and is shared with the GNU Free Documentation License v1.1