epubjs
Version:
Render ePub documents in the browser, across many devices
85 lines (81 loc) • 5.14 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_7.html" /><link rel="next" href="./ch02_9.html" /></head><body>
<section class="sect2" title="Context Changes" data-origPath="/html/body/section/section/section[7]">
<h3 class="title" id="_context_changes">Context Changes</h3>
<p>A nasty side-effect of current print-based export processes is that changes
in context are visually styled either using CSS and/or with images. When you
use the CSS <code class="literal">margin-top</code> property to add spacing,
you’re taking away from anyone who can’t see the display that a change in
context has occurred. Graphics to add whitespace are no better, since they
don’t typically specify an alt value and are ignored by accessible
technologies. Graphics that include asterisms or similar as the alt text are
slightly better, but are still a suboptimal approach in that they don’t
convey any meaning except through the reading of the alt value.</p>
<p>There are people who would argue that context breaks represent the borders
between untitled subsections within sections, but from a structural and
navigational perspective it’s typically not true or wanted, so don’t be too
tempted to add <code class="literal">section</code> elements.</p>
<p>HTML5 has, in fact, addressed this need for a transitioning element by
changing the semantics of the <code class="literal">hr</code> element for
this purpose:</p>
<pre class="screen"><p>… the world swam and disappeared into darkness.</p>
<hr class="transition"/>
<p class="nonindent">When next we met …</p></pre>
<p>By default this tag would include a horizontal rule, but you can use CSS to
turn off the effect and leave a more traditional space for visual
viewing:</p>
<pre class="screen">hr.transition {
width: 0em;
margin: 0.5em 0em;
}</pre>
<p>or you could add a fleuron or other ornament:</p>
<pre class="screen">hr.transition {
background: url('img/fleuron.gif') no-repeat 50% 50%;
height: 1em;
margin: 0.5em 0em;
}</pre>
<p>Styling the <code class="literal">hr</code> element ensures that the context
change isn’t lost in the rush to be visually appealing.</p>
</section>
<section class="sect2" title="Lists" data-origPath="/html/body/section/section/section[8]">
<h3 class="title" id="_lists">Lists</h3>
<p>You’d typically not expect to have to hear the advice that you should use
lists for sets of related items, but rely too heavily on print tools to
create your content and the result will be paragraphs made to look like list
items, or single paragraphs that merge all the items together using only
<code class="literal">br</code> tags to separate them.</p>
<p>If you don’t use proper list structures, readers can get stuck having to
traverse the entire set of items before they can continue with the narrative
flow (in the case of one paragraph per item) or having to listen to every
item in full to hear the list (when <code class="literal">br</code> tags are
used).</p>
<p>A list element, on the other hand, provides the ability both to move quickly
from item to item and to escape the list entirely. It also allows a reading
system to inform a reader how many items are in the list and which one they
are at for referencing. Picture a list with tens or hundreds of items and
you’ll get a sense for why this functionality is critical.</p>
<p>Using paragraphs for lists also leads people to resort to visual trickery
with margins to emulate the deeper indentation that a nested list would
have. These kinds of illusions take away from all but sighted readers that
there exists a hierarchical relationship. The correct tagging allows readers
to navigate the various levels with ease.</p>
<p>A final note is to always use the right kind of list:</p>
<ul class="itemizedlist">
<li class="listitem"><p> the <code class="literal">ol</code> element is used
when the order of the items is important. </p></li>
<li class="listitem"><p> the <code class="literal">ul</code> element is used
when there is no significance or weak significance to the items
(e.g., just because you arrange items alphabetically does not impart
meaning to the order). </p></li>
<li class="listitem"><p> the <code class="literal">dl</code> element is used
to define terms, mark up glossaries, etc. </p></li>
</ul>
<p>Lists have these semantics for good purpose, so don’t use CSS to play visual
games with them.</p>
</section>
</body>
</html>