epubjs
Version:
Render ePub documents in the browser, across many devices
75 lines (72 loc) • 6.25 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_1.html" /><link rel="next" href="./ch02_3.html" /></head><body>
<p data-origPath="/html/body/section/section/p[10]">It’s not always obvious to sighted readers at this point why semantics are
important for them, though, as they just expect to see the visual presentation
the forms provide and to navigate around with fingers and eyes. But that’s also
because no one yet expects more from their digital reading experience than what
they were accustomed to in print. Knowing whether a section is a chapter or a
part as you skip forward through your ebook can make it so you don’t always have
to rely on opening the table of contents. Knowing where the body matter section
begins can allow a reading system to jump you immediately to the beginning of
the story instead of the first page of front matter. Knowing where the body ends
and back matter begins could allow the reading system to provide the option to
close the ebook and go back to your bookshelf; it might also allow links to
related titles you might be interested in reading next to be displayed. Without
semantically rich data, only the most rudimentary actions are possible. With it,
the possibilities for all readers are endless.</p>
<p data-origPath="/html/body/section/section/p[11]">So, to wrap up the analogy, while some of us can read in the shadow world of
generalized markup, all we get when we aim that low is an experience that pales
to what it could be, and one that needlessly introduces barriers to access. If
I’ve succeeded in bringing these terms into relief, you can hopefully now
appreciate better why semantics and structure have to be applied in harmony to
get the most value from your data. The accessibility of your ebook is very much
a reflection of the effort you put into it. The reading system may be where the
magic unfolds for the reader, but all data magic starts with the quality of the
source.</p>
<p data-origPath="/html/body/section/section/p[12]">With that bit of high-level knowledge under our belts, let’s now turn to how the
two work together in practice in EPUB 3 to make content richer and more
accessible.</p>
<h3 class="title" id="_data_integrity" data-origPath="/html/body/section/section/section[1]/h3">Data Integrity</h3>
<p data-origPath="/html/body/section/section/section[1]/p[1]">The most important rule to remember when structuring your content is to use
the right element for the right job. It seems like an obvious statement, but
too often people settle for the quick solution without thinking about its
impact; look no further than the Web for examples of markup run amok. Print
to digital exports are also notorious for taking the path of least
complexity (<code class="literal">p</code>-soup, as I like to call the
output that wraps most everything in paragraph tags). In fairness, though,
print layout programs typically lack the information necessary for the
export to be anything more than rudimentary.</p>
<p data-origPath="/html/body/section/section/section[1]/p[2]">When present, however, reading systems and assistive technologies are able to
take advantage of specialized tags to do the right thing for you, but
there’s little they can do if you don’t give them any sense of what they’re
encountering.</p>
<p data-origPath="/html/body/section/section/section[1]/p[3]">When it comes to EPUB 3, if you don’t know what’s changed in the new HTML
specification, go and read the element definitions through; it’s worth the
time. EPUB 3 uses the XHTML flavor of HTML5 for expressing text content
documents, so knowledge of the specification is critical to creating good
data. Don’t assume knowledge from HTML4, as the purpose of many elements has
changed, and elements you thought you knew might have different semantic
meanings now (especially the old inline formatting elements like <code class="literal">i</code>, <code class="literal">b</code>, <code class="literal">small</code>, etc.).</p>
<p data-origPath="/html/body/section/section/section[1]/p[4]">And remember that structure is not about what you want an element to mean.
The changes to the HTML5 element definitions may not always make the most
sense (see the human restriction on the <code class="literal">cite</code>
element as one commonly cited example), but twisting definitions and uses to
fit your own desires isn’t going to make you a friend of accessibility,
either. Reading systems and assistive technologies are developed around the
common conventions.</p>
<p data-origPath="/html/body/section/section/section[1]/p[5]">And whatever you do, don’t perpetuate the sin of immediately wrapping <code class="literal">div</code> and <code class="literal">span</code> tags
around any content you don’t know how to handle. It’s <a class="ulink" href="http://idpf.org/epub/30/spec/epub30-contentdocs.html#sec-xhtml-content-type-attribute" target="_top">a violation</a> of the EPUB 3 specification to create
content that uses generic elements in place of more specific ones, and it
doesn’t take long to check if there really is no other alternative first.
When you make up your own structures using generic tags, you push the
logical navigation and comprehension of those custom structures onto the
reader (and potentially mess up the HTML5 outline used for navigation).
Sighted readers may not notice anything, but when reading flows through the
markup, convoluted structures can frustrate the reader and interfere with
their ability to effectively follow the narrative flow.</p>
</body>
</html>