📖 Chapter 90: HTML for E-Books (EPUB 3)

Accessible E-Books & The Ace Validator

DAISY Standards, WCAG 2.1 AA Compliance, EPUB Accessibility Metadata, and Automated Auditing with the Ace CLI

LEARNING OBJECTIVES ⌵
  • Understand the DAISY Consortium guidelines and global legal mandates (e.g., the European Accessibility Act — EAA).
  • Implement mandatory EPUB accessibility metadata in package.opf (schema:accessMode, accessibilityFeature, accessibilityHazard, accessModeSufficient).
  • Author accessible XHTML content documents: semantic heading hierarchies, data tables with scope, and extended image descriptions.
  • Execute automated accessibility audits using the Ace by DAISY CLI tool (@daisy/ace) and resolve audit violations.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

When a civic engineer designs a public library, ramps, braille signage, elevators, and high-contrast wayfinding are not decorative afterthoughts—they are fundamental structural requirements embedded into the blueprint from day one.

In digital publishing, millions of readers with blindness, low vision, motor disabilities, or dyslexia consume books exclusively through screen readers (Apple VoiceOver, NVDA, JAWS), refreshable braille displays, and text-to-speech (TTS) engines.

+-------------------------------------------------------------------------------+
|                       ACCESSIBLE PUBLISHING PARADIGM                          |
|                                                                               |
|  [Visual Rendering]     -> Clean typography, responsive scaling, themes       |
|  [Auditory Rendering]   -> Text-to-Speech (TTS), correct pronunciation guides |
|  [Tactile Rendering]    -> Refreshable Braille display line navigation        |
|  [Structural Semantics] -> Screen reader landmark jumps (Chapters, Footnotes) |
+-------------------------------------------------------------------------------+

An inaccessible e-book—with unlabeled charts, missing chapter landmarks, and skipped heading levels—is equivalent to a library with locked doors and no stairs.

Modern EPUB 3 standards, established jointly by the W3C and the DAISY Consortium, enforce WCAG 2.1 Level AA compliance. In fact, under the European Accessibility Act (EAA), all commercial e-books distributed across major global marketplaces must be certified accessible.

Technical Deep Dive & Specifications

EPUB Accessibility Conformance (W3C / DAISY)

The W3C EPUB Accessibility 1.1 specification requires compliance across three core vectors:

  1. Content Conformance: The XHTML markup must meet all WCAG 2.1 Level AA success criteria (contrast, alt text, valid table scopes, keyboard nav).
  2. Structural Semantics: DPUB-ARIA roles (doc-chapter, doc-footnote, doc-toc) and logical heading trees (h1 -> h2 -> h3).
  3. Accessibility Metadata: Machine-readable metadata embedded directly inside the package.opf file.
                  +-----------------------------------+
                  |   Accessible EPUB Publication     |
                  +-----------------------------------+
                                    |
        +---------------------------+---------------------------+
        |                                                       |
        v                                                       v
+-------------------------------+               +-------------------------------+
|   Content & Markup (WCAG)     |               |  OPF Metadata (Schema.org)    |
| - Semantic Headings (No skips)|               | - accessMode (textual, visual)|
| - Extended Alt Descriptions   |               | - accessibilityFeature        |
| - Tables with <th scope="...">|               | - accessibilityHazard         |
| - DPUB-ARIA & Landmarks       |               | - accessModeSufficient        |
+-------------------------------+               +-------------------------------+

Mandatory Accessibility Metadata in package.opf

Every accessible EPUB 3 publication must include Schema.org accessibility metadata declared in the <metadata> block:

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
  <!-- Standard Dublin Core metadata omitted for brevity -->

  <!-- 1. How information is conveyed -->
  <meta property="schema:accessMode">textual</meta>
  <meta property="schema:accessMode">visual</meta>

  <!-- 2. Minimal modes required for complete comprehension -->
  <meta property="schema:accessModeSufficient">textual,visual</meta>
  <meta property="schema:accessModeSufficient">textual</meta>

  <!-- 3. Specific accessibility features present in the book -->
  <meta property="schema:accessibilityFeature">structuralNavigation</meta>
  <meta property="schema:accessibilityFeature">alternativeText</meta>
  <meta property="schema:accessibilityFeature">tableOfContents</meta>
  <meta property="schema:accessibilityFeature">readingOrder</meta>
  <meta property="schema:accessibilityFeature">displayTransformability</meta>

  <!-- 4. Sensory hazards (flashing, sound, motion) -->
  <meta property="schema:accessibilityHazard">none</meta>

  <!-- 5. Human-readable summary for readers before purchasing -->
  <meta property="schema:accessibilitySummary">
    This publication conforms to WCAG 2.1 Level AA. All diagrams include descriptive alternative text and complex tables include structured headers.
  </meta>

  <!-- 6. Formal Conformance Certification -->
  <meta property="dcterms:conformsTo">EPUB Accessibility 1.1 - WCAG 2.1 Level AA</meta>
  <meta property="a11y:certifiedBy">DAISY Consortium / Certified Publisher</meta>
</metadata>

Content Document Accessibility Rules

1. Strict Heading Hierarchies

Never skip heading levels for visual styling. Always proceed hierarchically:

<!-- VALID HIERARCHY -->
<h1>Chapter 1: Cloud Architecture</h1>
  <h2>1.1 Load Balancing</h2>
    <h3>Round-Robin Strategies</h3>

<!-- INVALID (SKIPPED LEVEL) - FAILS ACE AUDIT -->
<h1>Chapter 1: Cloud Architecture</h1>
  <h4>Round-Robin Strategies</h4> <!-- Skipped h2 and h3! -->

2. Accessible Complex Tables

Tables must include <caption>, proper semantic <thead> / <tbody>, and explicit scope="col" or scope="row" attributes:

<table class="data-table">
  <caption>Table 7.1: Network Protocol Latency Benchmarks</caption>
  <thead>
    <tr>
      <th scope="col">Protocol</th>
      <th scope="col">Round-Trip Time (ms)</th>
      <th scope="col">Throughput (MB/s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTTP/1.1</th>
      <td>142</td>
      <td>12.5</td>
    </tr>
    <tr>
      <th scope="row">HTTP/3 (QUIC)</th>
      <td>38</td>
      <td>48.2</td>
    </tr>
  </tbody>
</table>

3. Complex Diagram Long Descriptions (aria-details)

For complex technical architectures or charts where short alt text is insufficient:

<figure>
  <img src="../images/k8s_architecture.svg" 
       alt="Kubernetes Cluster Architecture Diagram" 
       aria-details="desc-k8s" />
  <figcaption>Figure 7.2: High-Level Kubernetes Control Plane.</figcaption>
</figure>

<!-- Extended description linked via aria-details -->
<div id="desc-k8s" class="sr-only">
  <p>
    The Kubernetes cluster diagram illustrates the Control Plane consisting of 
    kube-apiserver, etcd, kube-scheduler, and kube-controller-manager communicating 
    with two Worker Nodes via the kubelet process over port 10250.
  </p>
</div>

The Ace by DAISY Testing Workflow

The Ace by DAISY CLI tool is the worldwide industry standard for automated EPUB 3 accessibility auditing:

# 1. Install Ace CLI globally via NPM
npm install -g @daisy/ace

# 2. Run an accessibility audit on an EPUB archive or extracted folder
ace --outdir ./reports/a11y-audit ./my_book.epub

# 3. View the generated interactive HTML report
open ./reports/a11y-audit/report.html

+-------------------------------------------------------------------------------+
|                       ACE BY DAISY AUDIT REPORT OUTPUT                        |
+-------------------------------------------------------------------------------+
| Publication: Architecting Resilient Distributed Systems                      |
| Conformance: WCAG 2.1 AA & EPUB Accessibility 1.1                             |
|                                                                               |
| [✓] Metadata: 6/6 Schema.org a11y tags detected                              |
| [✓] Headings: Valid hierarchical tree (h1 -> h2 -> h3)                       |
| [✓] Images: 14/14 images have valid alt text or aria-details                  |
| [✓] Tables: All <th> elements have explicit scope attributes                  |
| [✓] Contrast: 100% compliant (Minimum 4.5:1 ratio verified)                  |
|                                                                               |
| Summary: 0 Critical Violations | 0 Serious Violations | 0 Minor Violations    |
+-------------------------------------------------------------------------------+
SYS: ACTIVE
HULL: 98%
CORE: STABLE
NET: ONLINE
HTML STARSHIP CODE TERMINAL example.html
root@STARSHIP-ALPHA:~/web-core# READY FOR COMPILATION █
LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C
INSPECTING DOM: VALID
TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code: Accessible Content Document (text/ch07_a11y.xhtml)

Line-by-Line Code Breakdown

  • Line 11 (<section ... aria-labelledby="ch7-heading">): Explicitly binds the chapter section landmark to its accessible heading element.
  • Line 19 & 39 (<h2>7.1 ...</h2>, <h2>7.2 ...</h2>): Enforces strict sequential heading hierarchy (under <h1>), avoiding accessibility tree gaps.
  • Line 23 (<caption>...</caption>): Gives screen readers a clear summary before traversing table cells.
  • Line 26–28 (<th scope="col">...</th>): Tells assistive technology that these headers apply to entire vertical columns.
  • Line 33 (<th scope="row">...</th>): Identifies row header cells for contextual cell-by-cell navigation.
  • Line 44 (aria-details="topo-description"): W3C standard linking an image to an extended long description container.
  • Line 48 (<aside id="topo-description" ...>): Houses the in-depth structural explanation of the visual diagram.
SYS: ACTIVE
HULL: 98%
CORE: STABLE
NET: ONLINE
HTML STARSHIP CODE TERMINAL playground.html
root@STARSHIP-ALPHA:~/web-core# READY FOR COMPILATION █
LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C
INSPECTING DOM: VALID
TAGS: SCANNING...

🏋️ Hands-On Exercise

🎯 The Challenge: Remediate an Inaccessible Chapter

Instructions:

  1. The starter code below contains 3 accessibility violations:
    • A skipped heading level (<h1> directly followed by <h3>).
    • A table with untagged, generic <td> headers lacking <caption> and scope.
    • An image with an empty / generic alt="image" attribute.
  2. Fix all 3 violations to ensure full WCAG 2.1 AA and Ace by DAISY compliance.

🏁 Starter Code Sandbox

SYS: ACTIVE
HULL: 98%
CORE: STABLE
NET: ONLINE
STARTER CODE SANDBOX exercise.html
root@STARSHIP-ALPHA:~/web-core# READY FOR COMPILATION █
LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C
INSPECTING DOM: VALID
TAGS: SCANNING...

⚠️ Common Pitfalls

  1. Declaring accessibilityHazard: none Blindly: If your e-book contains an animated SVG or GIF that flashes more than 3 times per second, claiming none can trigger photo-epileptic seizures and violates legal standards. Ensure all media is verified.
  2. Writing Generic Image Alt Text: Writing alt="diagram", alt="screenshot", or alt="image" provides zero context to a blind reader. Explain the actual data points or narrative meaning depicted in the visual.
  3. Skipping Heading Levels for Cosmetic Font Sizing: Using <h4> instead of <h2> just because you want smaller text. Always use CSS to style heading dimensions while maintaining strict semantic DOM order.

💡 Pro Tips

  1. Integrate Ace into CI/CD Pipelines: Add @daisy/ace to your GitHub Actions or GitLab CI test matrix. Any pull request that drops accessibility scores below 100% can automatically block deployment.
  2. Test with Real Screen Readers: Use Apple VoiceOver (Cmd + F5 on macOS / iOS Settings) or NVDA on Windows to listen to your publication. Reading systems render nuances that automated tools cannot evaluate.

📌 Key Takeaways

  • Digital publishing accessibility is governed by the DAISY Consortium, W3C EPUB Accessibility 1.1, and the European Accessibility Act (EAA).
  • The <metadata> block in package.opf must declare Schema.org accessibility metadata (accessMode, accessibilityFeature, accessibilityHazard, accessModeSufficient).
  • Headings must follow strict non-skipping hierarchies (h1 -> h2 -> h3).
  • All data tables require <caption>, <thead>, and explicit <th scope="col/row"> declarations.
  • Complex diagrams should be linked to extended explanations via aria-details.
  • Ace by DAISY (@daisy/ace) is the standard automated CLI engine for validating e-book accessibility.
  • --
⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE
3x
STREAK!
BONUS ACTIVE
COMBO
? Question 1 / 3

Under the European Accessibility Act (EAA) and EPUB 3 standards, which metadata property in package.opf describes sensory risks such as flashing lights or loud sounds?

Question 1 / 3 Topic: HTML Fundamentals
00:45 REMAINING
XP REWARD
+250 XP
3x
STREAK!
BONUS ACTIVE
COMBO
? Question 2 / 3

Why does Ace by DAISY flag an error when an <h1> tag is followed directly by an <h3> tag in a content document?

Question 2 / 3 Topic: HTML Fundamentals
00:45 REMAINING
XP REWARD
+250 XP
3x
STREAK!
BONUS ACTIVE
COMBO
? Question 3 / 3

What is the function of the aria-details attribute on an <img> tag in EPUB 3?

Question 3 / 3 Topic: HTML Fundamentals
00:45 REMAINING
XP REWARD
+250 XP