Getting Around: Navigating an EPUB

We’ve gone over a number of ways to assist in accessible navigation by improving the structure and semantics of your content, but navigating at the content level is only a complement to a good table of contents. EPUB 3 includes a new declarative means of creating tables of contents called the navigation document, which is a fancy way of saying that you can now create a special kind of XHTML document for reading systems to provide their own built-in navigation mechanism(s).

Declarative tables of contents are not new to EPUB 3, however. EPUB 2 had a file format called the NCX for this purpose, which was taken from the DAISY talking book standard (and that format can still be included in EPUB 3 publications for forwards compatibility with older reading systems). But the NCX was a complex solution to a much simpler problem, and actually hindered accessibility in this new context, as its lack of intrinsic display controls led to navigation levels being chopped off to improve visual rendering.

So, to strike back up on a common theme, not all markup is created equal, and the quality of your table of contents for navigation is a reflection whether you put the full structure of your publication in it or not. The new navigation document fortunately gives you the best of both worlds in that it doesn’t require the decision to pick either visual clarity or full accessibility to be made.

Let’s take a quick tour through the actual creation process to see how this is done for both reading groups.

The navigation document uses the new HTML5 nav element to define various kinds of navigation lists, as more than just a table of contents can be included in it. But as a primary table of contents is required in every EPUB, we’ll begin by looking at a very minimal example:

<nav epub:type="toc">
    <h1>Contents</h1>
    <ol>
        <li>
            <a href="chapter_001.xhtml">Chapter 1. Loomings.</a>
        </li>
        <li>
            <a href="chapter_002.xhtml">Chapter 2. The Carpet-Bag.</a>
        </li>
    </ol>
</nav>

The epub:type attribute identifies that this nav element represents the table of contents (via the “toc” value). But if the rest of the navigation list looks like nothing more than an ordered list of links, that’s because that’s exactly what navigation lists are. The nav element should include a heading, but after that it only ever includes a single ol element.