EPUB Accessibility

Romain Deltour – DAISY
Auto-WCAG Workshop, July 2016

A brief history

  1. OEBPS
  2. OEBPS 1.1
  3. OEBPS 2.2
  4. EPUB begins
  5. EPUB 2.0
  6. EPUB 2.0.1
  7. EPUB 3
  8. EPUB 3.0.1
  9. EPUB 3.1

Focus on accessibility.
Convergence with the web.

Future: IDPF + W3C merger?

@idpfmemes ♥ @w3cmemes

So, What is EPUB?

A distribution and interchange format standard for digital publications and documents, developped by IDPF.

A (static) website in a ZIP
$ unzip -l foo.epub

Archive:  foo.epub
  Length     Date   Time    Name
 --------    ----   ----    ----
       20  04-20-16 10:02   mimetype
      952  04-20-16 10:02   EPUB/1-cover.xhtml
      685  04-20-16 10:02   EPUB/2-titlepage.xhtml
     3462  04-20-16 10:02   EPUB/3-chap1.xhtml
     1736  04-20-16 10:02   EPUB/4-chap2.xhtml
     4507  03-18-16 22:36   EPUB/css/styles.css
   139681  03-18-16 23:44   EPUB/images/cover.jpg
     3692  11-30-15 14:37   EPUB/images/header.png
    28599  11-30-15 14:40   EPUB/images/logo.png
    44086  12-01-15 13:04   EPUB/image/table.png
     5291  04-20-16 10:02   EPUB/package.opf
      236  04-20-16 10:02   META-INF/container.xml
 --------                   -------
   232947                   12 files

A family of specifications

One spec to rule them all
http://www.idpf.org/epub/31/spec/epub-spec.html

EPUB accessibility primer
(to become an a11y superhero)

# 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 conferences 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 conferences 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>

# 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"/>

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

# 4TTTS (theoretically, TTS)

The Batman

Nice try, Robin!

PLS lexicons

<lexicon
  alphabet="x-sampa"
  xmlns=
  "http://www.w3.org/2005/01/pronunciation-lexicon">
  <lexeme>
    <grapheme>defence</grapheme>
    <grapheme>defense</grapheme>
    <phoneme>dI'fEns</phoneme>
    <phoneme alphabet="ipa">dɪˈfɛns</phoneme>
  </lexeme>
</lexicon>

<item
      id="pls"
      href="EPUB/lexicon.pls"
      media-type="application/pls+xml"/>

SSML annotations

<p>
   The guitarist was playing a
   <span ssml:ph="beIs">bass</span> that was shaped
   like a <span ssml:ph="b&s">bass</span>.
</p>

# 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>

Accessibility Metadata

+
linked external records

Accessibility
work in progress

epubtest.org

http://epubtest.org/testsuite/accessibility/

Screenshot of the epubtest.org website

W3C DPUB Accessibility Note

https://www.w3.org/TR/dpub-accessibility/

EPUB Accessibility specification

http://www.idpf.org/epub/latest/accessibility (ED)

EPUB Accessibility specification

3 categories of conformance:

Conformance of Accessible publications

EPUB Accessibility Techniques

http://www.idpf.org/epub/latest/accessibility-techniques (ED)

EPUB Accessibility Checker

Requirementsopen of comments!

Resources

Questions?

@rdeltour