epubjs
Version:
Render ePub documents in the browser, across many devices
69 lines (67 loc) • 4.31 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Getting Around: Navigating an EPUB</title>
<link rel="stylesheet" type="text/css" href="css/epub.css" />
<meta name="dat-origPath" value="/html/body/section" /><link rel="prev" href="./ch02s02_1.html" /><link rel="next" href="./ch02s02_3.html" /></head><body>
<p data-origPath="/html/body/section/p[13]">Another advantage of this attribute is that it allows you to selectively decide how
to hide rendering. For example, if your leveling changes from section to section,
you aren’t locked into a single “nothing below level 3” approach to tailoring your
content. Only the ordered lists you attach the attribute to are hidden from
view.</p>
<p data-origPath="/html/body/section/p[14]">Before turning to the other types of navigation lists you can include in the
navigation document, there is one additional accessibility requirement to note.
Since the <code class="literal">a</code> and <code class="literal">span</code>
elements allow all HTML5 inline content, you need to remember not to assume that
their content will always be rendered visually. Or, more to the point, to remember
that your entries might not voice properly if they include images or MathML or
similar.</p>
<p data-origPath="/html/body/section/p[15]">If the prose you include will present a challenge to voice playback, you need to
include a <code class="literal">title</code> attribute with an equivalent text
rendition to use instead:</p>
<pre class="screen" data-origPath="/html/body/section/pre[4]"><li><a href="chapter001.xhtml#pi" title="The life of pi">The Life of π</a></li></pre>
<p data-origPath="/html/body/section/p[16]">Some assistive technologies might voice the pi character in this example as the
letter “p”, for example, which might make sense in a biology book but would be an
awkwardly confusing title to announce in a math book.</p>
<p data-origPath="/html/body/section/p[17]">But to move on from the primary table of contents, there are other ways to help
readers navigate your document that are also a benefit to all. The landmarks nav,
for example, can provide quick access to key structures. These can be whatever you
want, but jumping to the index, glossaries, and other back matter elements are
common tasks the readers may want to perform many times while reading. Think of it
like a kind of bookmark list to key structures:</p>
<pre class="screen" data-origPath="/html/body/section/pre[5]"><nav epub:type="landmarks">
<h1>Guide</h1>
<ol>
<li>
<a epub:type="toc" href="contents.xhtml#toc">
Table of Contents
</a>
</li>
<li>
<a epub:type="bodymatter" href="chapter001.xhtml#bodymatter">
Start of Content
</a>
</li>
<li>
<a epub:type="glossary" href="glossary.xhtml#gloss">
Glossary
</a>
</li>
<li>
<a epub:type="index" href="index.xhtml#idx">
Index
</a>
</li>
</ol>
</nav></pre>
<p data-origPath="/html/body/section/p[18]">You’ll notice that, unlike the table of contents example, the <code class="literal">a</code> tags have <code class="literal">epub:type</code> attributes attached
to them to provide machine-readable semantics. The <code class="literal">epub:type</code> attribute is required on all links in the landmarks navigation
list. The additional semantics are there to help facilitate quick-link options in
reading systems so that the landmarks list doesn’t have to be opened and navigated
manually each time (e.g., a dedicated reading system option to jump to the
index).</p>
<p data-origPath="/html/body/section/p[19]">We touched on the need for page lists in the last section, so I’ll only note that a
page-list nav should be included if the ebook is part of a dual print-digital
workflow:</p>
</body>
</html>