epubjs
Version:
Render ePub documents in the browser, across many devices
94 lines (91 loc) • 6.2 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Chapter 2. Building a Better EPUB: Fundamental Accessibility</title>
<link rel="stylesheet" type="text/css" href="css/epub.css" />
<meta name="dat-origPath" value="/html/body/section/section" /><link rel="prev" href="./ch02_6.html" /><link rel="next" href="./ch02_8.html" /></head><body>
<section class="sect2" title="Sections and Headings" data-origPath="/html/body/section/section/section[6]">
<h3 class="title" id="_sections_and_headings">Sections and Headings</h3>
<p>As I touched on in the introduction to this section, always group related
content that is structurally significant in <code class="literal">section</code> elements to facilitate navigation, and always indicate
why you’ve created the grouping using the <code class="literal">epub:type</code> attribute:</p>
<pre class="screen"><section epub:type="epilogue">
…
</section></pre>
<p>The entries in the table of contents in your navigation document are all
going to be structurally significant, which can be a helpful guide when it
comes to thinking about how to properly apply the <code class="literal">section</code> element. Some additional ideas on structural
significance can be gleaned from the terms in the <a class="ulink" href="http://idpf.org/epub/vocab/structure/" target="_top">EPUB 3
Structural Semantics Vocabulary</a>. For example, a non-exhaustive list
of semantics for sectioning content includes:</p>
<ul class="itemizedlist">
<li class="listitem"><p> foreword </p></li>
<li class="listitem"><p> prologue </p></li>
<li class="listitem"><p> preface </p></li>
<li class="listitem"><p> part </p></li>
<li class="listitem"><p> chapter </p></li>
<li class="listitem"><p> epilogue </p></li>
<li class="listitem"><p> bibliography </p></li>
<li class="listitem"><p> glossary </p></li>
<li class="listitem"><p> index </p></li>
</ul>
<p>Semantics are especially helpful when a section does not have a heading.
Sighted readers are used to the visual conventions that distinguish
dedications, epigraphs, and other front matter that may be only of slight
interest, for example, and can skip past them. Someone who can’t see your
content has to listen to it if you don’t provide any additional information
to assist them.</p>
<p>Headingless, unidentified content also means the person will have to listen
to it long enough to figure out why it’s even there. Have you just added an
epigraph to the start of your book, and skipping the containing <code class="literal">section</code> will take them to the first chapter, or
are they listening to an epigraph that starts the first chapter and skipping
the <code class="literal">section</code> will take them to chapter two?
These are the impediments you shift onto your reader when you don’t take
care of your data.</p>
<p>When the <code class="literal">section</code> does contain a heading, there
are two options for tagging: numbered headings that reflect the current
level or <code class="literal">h1</code> headings for every <code class="literal">section</code>. At this point in time, using numbered
headings is recommended, as support for navigation via the structure of the
document is still developing:</p>
<pre class="screen"><section epub:type="part">
<h1>Part I</h1>
<section epub:type="chapter">
<h2>Chapter 1</h2>
…
</section>
</section></pre>
<p>Numbered headings will also work better for forward-compatibility with older
EPUB reading systems.</p>
<p>Using an <code class="literal">h1</code> heading regardless of the nesting
level of the <code class="literal">section</code> will undoubtedly gain
traction moving forward, though. In this case, the <code class="literal">h1</code> becomes more of a generic heading, as traversal of the
document will occur via the document outline and not by heading tags (the <a class="ulink" href="http://dev.w3.org/html5/spec/Overview.html#outlines" target="_top">construction of this outline</a> is defined in HTML5).
There is only limited support for this method of navigation at this time,
however.</p>
<aside class="note" title="Note">
<h3 class="title">Note</h3>
<p>It’s also worth briefly noting that the <code class="literal">hgroup</code> element should probably only be used judiciously, if
at all, for title and subtitle grouping at this time. The element is not
yet widely supported, and there are a number of <a class="ulink" href="http://dev.w3.org/html5/status/issue-status.html#ISSUE-164" target="_top">proposals to change it</a> under review as of
writing.</p>
</aside>
<p>And remember that titles are an integral unit of information. If you want to
break a title across multiple lines, change font sizes, or do other
stylistic trickery, use spans and CSS and keep the display in the style
layer. Never add multiple heading elements for each segment. Use <code class="literal">span</code> elements if you need to visually change the
look and appearance of headings.</p>
<p>To break a heading across lines, we could use this markup:</p>
<pre class="screen"><h1>Chapter <span class="chapNum">One</span> Loomings.</h1></pre>
<p>and then add the following CSS class to change the font size of the <code class="literal">span</code> and treat it as a block element (i.e., place
the text on a separate line):</p>
<pre class="screen">span.chapNum {
display: block;
margin: 0.5em 0em;
font-size: 80%
}</pre>
<p>If you fragment your data, you fragment the reading experience and cause
confusion for someone trying to piece back together what heading(s) they’ve
actually run into.</p>
</section>
</body>
</html>