epubjs
Version:
Render ePub documents in the browser, across many devices
86 lines (83 loc) • 5.48 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Talk to Me: Media Overlays</title>
<link rel="stylesheet" type="text/css" href="css/epub.css" />
<meta name="dat-origPath" value="/html/body/section" /><link rel="prev" href="./ch03s02_5.html" /><link rel="next" href="./ch03s02_7.html" /></head><body>
<p data-origPath="/html/body/section/section[1]/p[32]">For example, to apply a yellow background to each section of prose as it is read,
as is traditionally found in accessible talking books, you would define the
following definition in your CSS file:</p>
<pre class="screen" data-origPath="/html/body/section/section[1]/pre[12]">.-epub-media-overlay-active
{
background-color: yellow;
}</pre>
<p data-origPath="/html/body/section/section[1]/p[33]">And that’s the long and short of creating overlays.</p>
<section class="sect2" title="Structural Considerations" data-origPath="/html/body/section/section[2]">
<h3 class="title" id="_structural_considerations">Structural Considerations</h3>
<p>I briefly touched on the need to escape nested structures, and skip unwanted
ones, but let’s go back to this functionality as a first best practice, as it is
critical to the usability of the overlays feature in exactly the same way markup
is to content-level navigation.</p>
<p>If you have the bad idea in your head that only <code class="literal">par</code>
elements matter for playback, and you can go ahead and make overlays that are
nothing more than a continuous sequence of these elements, get that idea back
out of your head. It’s the equivalent of tagging everything in the body of a
content file using <code class="literal">div</code> or <code class="literal">p</code> tags.</p>
<p>Using <code class="literal">seq</code> elements for problematic structures like
lists and tables provides the information a reading system needs to escape from
them.</p>
<p>Here’s how to structure a simple list, for example:</p>
<pre class="screen"><seq id="seq002" epub:type="list" epub:textref="chapter_012.xhtml#ol01">
<par id="list001item001" epub:type="list-item">
<text src="chapter_012.xhtml#ol01i01"/>
<audio src="audio/chapter12.mp4" clipBegin="0:26:48" clipEnd="0:27:11"/>
</par>
<par id="list001item002" epub:type="list-item">
<text src="chapter_012.xhtml#ol01i02"/>
<audio src="audio/chapter12.mp4" clipBegin="0:27:11" clipEnd="0:27:29"/>
</par>
…
</seq></pre>
<p>A reading system can now discover from the <code class="literal">epub:type</code>
attribute the nature of the <code class="literal">seq</code> element and of each
<code class="literal">par</code> it contains. If the reader indicates at any
point during the playback of the <code class="literal">par</code> element list
items that they want to jump to the end, the reading system simply continues
playback at the next <code class="literal">seq</code> or <code class="literal">par</code> element following the parent <code class="literal">seq</code>.
If the list contained sub-lists, you could similarly wrap each in its own <code class="literal">seq</code> element to allow the reader to escape back up
through all the levels.</p>
<p>A similar nested <code class="literal">seq</code> process is critical for table
navigation: a <code class="literal">seq</code> to contain the entire table,
individual <code class="literal">seq</code> elements for each row, and
table-cell semantics on the <code class="literal">par</code> elements containing
the text data.</p>
<p>A simple three-cell table could be marked up using this model as follows:</p>
<pre class="screen"><seq epub:type="table" epub:textref="ch007.xhtml#tbl01">
<seq epub:type="table-row" epub:textref="ch007.xhtml#tbl01r01">
<par epub:type="table-cell">…</par>
<par epub:type="table-cell">…</par>
<par epub:type="table-cell">…</par>
</seq>
</seq></pre>
<p>You could also use a <code class="literal">seq</code> for the table cells if they
contained complex data:</p>
<pre class="screen"><seq epub:type="table-cell" epub:textref="ch007.xhtml#tbl01r01c01">
<par>…</par>
…
</seq></pre>
<p>But attention shouldn’t only be given to <code class="literal">seq</code>
elements when it comes to applying semantics. Readers also benefit when <code class="literal">par</code> elements are identifiable, particularly for
skipping:</p>
<pre class="screen"><par id="note21" epub:type="note">
<text src="notes.xhtml#c02note03"/>
<audio src="audio/notes.mp4" clipBegin="0:14:23.146" clipEnd="0:15:11.744"/>
</par></pre>
<p>If all notes receive the semantic as in the above example, a reader could disable
all note playback, ensuring the logical reading order is maintained. All
secondary content that isn’t part of the logical reading order should be so
identified so that it can be skipped.</p>
<p>This small extra effort to mark up structures and secondary content does a lot to
make your content more accessible.</p>
</section>
</body>
</html>