EPUB tips to become an Accessibility SuperHero

Romain Deltour
XML Prague 2016

The book famine

a bookshelf fool of books an empty bookshelf

Who's impacted?

(Fake) statistics on people with print disabilities Describes the proportion of print-disabled people within a population of a hundred invidividuals. Print-disabled people may represent a minority, say 5%. But a majority of persons will also face reading difficulties when ageing, affecting another 60%. The others will –at some point or another– face situational disability.

All of us!

# 1 Structure and semantics

The Spiderman

With great
STRUCTURE
comes great ACCESSIBILITY

HTML5 native semantics

<section>
  <h1>SuperHeroes</h1>
  <section>
    <h1>Spiderman</h1>
    <p>A web expert!</p>
  </section>
  (...)
</section>

<section>
  <h1>SuperHeroes</h1>
  <section>
    <h1>Spiderman</h1>❌
    <p>A web expert!</p>
  </section>
  (...)
</section>

<section>
  <h1>SuperHeroes</h1>
  <section>
    <h2>Spiderman</h2>✔︎
    <p>A web expert!</p>
  </section>
  (...)
</section>

Semantic inflections

<p>Attendees of XML Prague have the opportunity
  to discuss cool topics while enjoying
  frosty or hot beverages
  <a href="#note-bev" epub:type="noteref">1</a>.
</p>


  ...

<aside id="note-bev" epub:type="footnote">
  <p>I usually favor beer over coffee, but YMMV.</p>
</aside>
<p>Attendees of XML Prague have the opportunity
  to discuss cool topics while enjoying
  frosty or hot beverages
  <a href="#note-bev" epub:type="noteref">1</a>.
</p>

  ...

<aside id="note-bev" epub:type="footnote">
  <p>I usually favor beer over coffee, but YMMV.</p>
</aside>

Beware of overuse

Thor girl

You have a hammer
but
everything is not
a nail!

# 2Navigation

The Flash girl

I can get there...
and I can get there fast!

Table of Contents

<nav epub:type="toc">
  <ol>
    <li>
      <a href="chap1.xhtml">Super Heroes</a>
      <ol>
        <li>
          <a href="chap1.xhtml#sec-1.1">The Marvel Universe</a>
          <ol hidden="">
            <li>
              <a href="chap1.xhtml#sec-1.1.1">Spiderman</a>
            </li>
          </ol>
         </li>
       </ol>
     </li>
  </ol>
</nav>

Page List

<span epub:type="pagebreak" id="p24" title="24"/>

<nav epub:type="page-list">
    <h2>Pagebreaks of the print version</h2>
    <ol>
        <li><a href="ch1.xhtml#p1">1</a></li>
        <li><a href="ch1.xhtml#p2">2</a></li> 
        …
        <li><a href="ch42.xhtml#p72">72</a></li>
        <li><a href="ch42.xhtml#p73">73</a></li>
        … 
    </ol>
</nav>

# 3Alternative content

Daredevil, practicing

Some people need
to perceive things
differently

Image descriptions

<p id="spiderman">Spider-Man's traditional
  red and blue costume is woven with spider
  web patterns.</p>

<p>.... </p>

<img src="spiderman.jpg"
        alt="Spiderman in his red and blue suit"
        aria-describedby="spiderman"/>

Image descriptions

<figure>
  <img src="spiderman.jpg" 
       alt="Spiderman in his red and blue suit"/>
  <figcaption>Spider-Man's traditional
  red and blue costume is woven with spider
  web patterns.
  </figcaption>
</figure>

Not everything is an image!

Thor girl

Use HTML tables,
SVG diagrams,
MathML formulas!

Media overlays

<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0">
  <body>
    <par id="par1">
  <text src="chapter1.xhtml#sentence1"/>
  <audio src="chapter1_audio.mp3"
       clipBegin="0s" clipEnd="10s"/>
</par>
    <par id="par2">
      <text src="chapter1.xhtml#sentence2"/>
      <audio src="chapter1_audio.mp3"
             clipBegin="10s" clipEnd="20s"/>
    </par>
    ...
  </body>
</smil>

Media overlays – Demo

# 4Metadata

Dr Manhattan, thinking

Let me see through
the nature of it
beforehand!

Metadata records

<package … >
  <metadata>
      … 
      <link rel="onix-record"
      href="EPUB/meta/onix-9781234567890.xml"/>
      …
  </metadata> 
    …
</package>

# 5Planification

Amanda Waller, expert in strategy

It's a process.
You need
to plan for it

# 6Tooling

The Batman

You don't need superpowers...
Use the right
tools!

Some useful tools

Baseline for “Born Accessible” EPUB 3

We want to provide minimum requirements, clear guidance for Publishers, and assurance to consumers on what they can expect.

Kick-off events near Baltimore, Feb 24-25

Thank you!

@rdeltour