Case Study zum reflowable EPUB 3.3*

Executive Summary: ROI und Compliance im digitalen Publizieren

Dieser Showcase demonstriert einen alternativen Workflow, und den damit verbundenen wirtschaftlichen und rechtlichen Fakten einer nativen Code-Architektur für EPUB 3.3. Für Fachverlage und Publikationsagenturen ergeben sich daraus drei messbare Parameter:

• Risikominimierung beim Upload. Ein hybrider Workflow, der Inhalt von Design trennt und manuelle Überprüfung einschließt, sichert eine zukunftsfähige Backlist, senkt die Quote abgewiesener Distributionen und reduziert ungeplante Zeitverluste.
• Technische Basis für Compliance (EAA/BFSG). Die Implementierung der WCAG 2.1 AA-Kriterien im Quelltext liefert das belegbare technische Fundament zur Erfüllung der gesetzlichen Anforderungen, die seit 2025 für digitale Produkte verpflichtend sind.
• Vereinfachung zukünftiger Wartung. Ein reduziertes, objektorientiertes CSS minimiert den zukünftigen Pflegeaufwand für die Backlist und sorgt für bessere Lesbarkeit der E-Book-Architektur.

Das Problem: Semantische Architektur vs. Print‑Layout

Klassische Layout-Programme sind hochspezialisierte und exzellente Werkzeuge für den Buchdruck. Die technologische Grenze dieser Software liegt bei der Generierung digitaler Web-Applikationen, zu denen das EPUB-Format zählt.

Automatisierte Exporte aus diesen Print-Workflows generieren oftmals fehlende HTML5-Semantik und überladene Stylesheets. Verschachtelte <div>– und <span>-Container führen auf älteren E-Readern zu Darstellungsfehlern und verfehlen die geforderte Barrierefreiheit für assistive Technologien.

Die Konsequenz ist manuelle Nacharbeit, Validierungsfehler bei Distributoren und Verstöße gegen gesetzliche Vorgaben des European Accessibility Act. Ein normgerechtes EPUB erfordert einen Herstellungsprozess auf Code-Ebene.

Der Befund: Die Grenzen automatisierter Validierung

Die Praxis zeigt ein wiederkehrendes Paradoxon. E-Books bestehen die offiziellen Markt-Validatoren fehlerfrei, weisen jedoch Defizite bei der Barrierefreiheit und Plattformstabilität auf. Automatisierte Prüftools erkennen strukturelle Fehler nicht, solange der Code syntaktisch korrekt formuliert ist.

Die Analyse der Standard-Exporte zeigt nach einem Blick in den Code folgende Schwachstellen:

• Maskierte Absätze statt echter Hierarchie. Layout-Programme und Konvertierungen aus Word-Dokumenten oder Calibre neigen dazu, Überschriften als Standard-Absatz <p> zu exportieren. Die Hierarchie wird dann ausschließlich über CSS-Eigenschaften wie Schriftgröße oder Fettung simuliert. Der EPUBCheck meldet 0 Fehler, da der Code valide ist. Für Screenreader existiert das Dokument jedoch ohne Überschriftenstruktur.
• Exorbitant langes Stylesheet. Manche Exporte erzeugen für komplexe Elemente wie Tabellen für jede einzelne Zelle eine eigene CSS-Klasse. Das Ergebnis ist ein unlesbares, oft über 1500 Zeilen langes Stylesheet, das globale Designanpassungen zeitaufwändig machen.
• Semantische Blindheit. Ein Validator wie EpubCheck oder Ace des DAISY Konsortiums prüft die formale Anwesenheit der Tags. Er kontrolliert nicht, ob ein <p>-Tag eine Überschrift oder ob ein <div> eine Zelle einer Tabelle sein soll. Dadurch fehlen Inhaltsbeziehungen, die assistive Technologien verständlich ausgeben könnten.

Die Methodik: Vier Instanzen zur technischen Rechtssicherheit

Diese Case Study demonstriert einen hybriden technologisierten Workflow. Die Umsetzung verbindet automatisierte Basisarbeit mit präziser manueller Qualitätssicherung über vier Instanzen:

1. Code-Architektur durch automatisierten Strukturaufbau aus Manuskriptdaten in Markdown.
2. Semantische Tiefe durch manuelle Quelltext-Optimierung in Sigil.
3. Engine-Stresstest durch manuellen Rendering- und Screenreader-Test auf heterogenen Zielsystemen.
4. Protokollierte Validierung auch Abschlussprüfung durch EPUBCheck, W3C, Ace by DAISY und einer manuellen Dokumentation in Form eines Prüfprotokolls.

Die Ergebnisse sind Publish-Ready

Diese hybride Vorgehensweise löst die Diskrepanzen automatisierter Exporte und erzeugt resistente digitale Publishingformate.

1. Code-Optimierung und echte Semantik

Markdown ist bereits die Grundlage für semantisches HTML5. Der Compiler-Prozess via Pandoc übersetzt alle Komponenten fehlerfrei in eine stabile EPUB-Architektur. Manuelle Anreicherung vervollständigt die semantische Tiefe sinngemäß und nutzerorientiert. Die Datei bleibt schlank und plattformübergreifend wartbar.

• Hybride Attributierung durch Kombination aus EPUB-spezifischen Attributen zur Abwärtskompatibilität und W3C ARIA-Rollen. Dies stellt die technische Konformität mit den WCAG 2.1 AA sicher.
• Maschinenlesbare Tabellenstrukturen und Beschreibungslisten werden korrekt durch native HTML5-Tags ausgezeichnet. Tabellen werden in <figure>-Containern mit <figcaption> gekapselt und durch scope-Attribute für achsenbasiertes Lesen angereichert.
• Bidirektionale Verlinkung bei Querverweisen, Fuß- und Endnoten werden als interaktive Sprungmarken verankert. Dies ermöglicht die standardkonforme Popup-Darstellung und schließt Sackgassen interner Verlinkungen aus.
• Navigation, Deklarationen und Metadaten werden fehlerfrei in die Architektur eingebunden. Das Inhaltsverzeichnis wird als toc.xhtml zusammen mit der nav.ncx aus der Markdownstruktur hierarchisch korrekt erzeugt, im Manifest deklariert und in die Lesereihenfolge im spine integriert. Alles zusammen wird mit den im Manuskript vordefinierten Metadaten in der content.opf fehlerfrei eingebunden.

2. Cross‑Platform Rendering & Layout-Stabilität

Die Fragmentierung der Rendering-Engines führt oft zu unterschiedlichen Layouts auf Zielgeräten. Die überarbeitete Code-Architektur liefert hier stabile Fallbacks im Sinne des reflowable EPUB 3.3:

• Native Dark-Mode-Compliance durch relative Farbwerte wie currentColor erzwingt eine fehlerfreie Invertierung der Typografie im Nachtmodus. Andere Akzentfarben bleiben für Stilisierungen erhalten, werden aber nur für Linien und Rahmen verwendet. Der Verzicht auf Einfärbung von Text und Überschriften sorgt für maximale Lesbarkeit im Fall individueller Nutzereinstellungen in den Lesegeräten.
• Typografie & Systemstabilität durch eine ausbalancierte CSS-Kaskade gesichert die typografische Basis. Die Deklaration von Fallbacks im CSS wie sans-serif in der Schriftdeklaration entspricht dem Prinzip der Graceful Degradation. Graceful Degradation bedeutet die Fähigkeit, bei Systemausfällen oder Überlastungen auf essentielle Funktionen zurückgreifen zu können. Das Fallback im CSS sorgt genau dafür. Sollten eingebettete Schriften auf bestimmten Readern blockiert oder durch Benutzereinstellungen überschrieben werden, bleibt das Schriftbild durch die Rückkehr auf systemeigene Standards wie serif oder sans-serif in sich konsistent.
• Responsives Verhalten und Medienintegration wird erreicht, indem Bilder und Figure-Elemente Prozentwerte für die Eigenschaft width erhalten. So füllen diese den verfügbaren Raum geräteübergreifend dynamisch aus. Auf feste Größenangaben bei Layout-Elementen wird konsequent verzichtet. Die Proportionen der Typografie werden über relative Werte gesteuert, um sich dynamisch an Benutzereinstellungen anzupassen.

3. Praxistests und Qualitätssicherung

Valider Quelltext bildet das Fundament. Barrierefreiheit erfordert zwingend visuelle und auditive Überprüfung.

• In diesem Showcase diente die Kombination aus Thorium Reader und Apple VoiceOver als Referenzumgebung für die manuelle auditive Kontrolle der Code-Architektur. So wird getestet, wie assistive Technologien die integrierten Attribute und die Struktur für Endnutzer unter realen Bedingungen verständlich wiedergeben.
• Für die visuelle Stabilität von Layout und Bedienbarkeit wurden Apple Books, Kindle, Adobe Digital Edition und Tolino als Testumgebung verwendet.

Fundierte Praxistests dieser Art minimieren für Verlage das wirtschaftliche Risiko rechtlicher Abmahnungen nach dem EAA. Die maschinelle Validierung erfolgt parallel durch Ace by DAISY, EPUBCheck und W3C CSS3. Für die manuelle Validierung der Praxistests diente die 88 Regeln umfassende Qualitäts-Checkliste von Qualebook als Referenz-Regelwerk.

Dieses Framework von Qualebook schlägt eine Brücke zwischen den technischen Definitionen der digitalen Buchproduktion und praktischer Umsetzung im E-Book und dient als Grundlage für ein manuell erstelltes Prüfprotokoll, welches die E-Book-Architektur schriftlich festhält.

4. Dreifache technische Validierung & Compliance

Sobald HTML5-Tags, semantische Eigenschaften und Metadaten im Code implementiert sind, lässt sich deren korrekte Verwendung und Vollständigkeit anhand vorgeschriebener Standards maschinell überprüfen. Die E-Book-Architektur durchläuft jetzt nach den ersten drei Instanzen die folgenden automatischen Prüfprozesse der Industrie fehlerfrei:

1. Barrierefreiheit validiert durch DAISY Ace. Der interne Scan meldet 0 Verstößen gegen die aktuellen WCAG Level A bis AA Anforderungen.
2. Die Integrität der Architektur ist valide durch EPUBCheck nach den Vorgaben des W3C für EPUB 3.3 mit 0 Fehlern und 0 Warnungen.
3. Darstellungsstabilität über den W3C CSS Validator gibt aus, dass das CSS auf Level 3 valide und frei von Syntaxfehlern ist.

Fazit

Ein digitales Buchformat ist eine Web-Applikation und unterliegt den Regeln seiner technischen Umgebung in Form von Engines, Apps oder Lesgeräten. Den Workflow der E-Book-Herstellung an diese Bedingungen anzupassen, liefert ein stabiles Fundament und sorgt für eine gelungene Teilhabe an digitalen Produkten.

Eine hybride Qualitätssicherung im Wechsel aus manuellen Eingriffen und maschineller Prüfung sorgt für eine hohe Qualität bei gleichzeitiger Erfüllung gesetzlicher Anforderungen. Ein stabiles Leseerlebnis und Barrierefreiheit im Code erfordern fortlaufende Handwerksarbeit am Stand der Technik, die eine menschliche Überprüfung einschließt.

Dies sorgt für:

1. Upload-Sicherheit durch Architektur. Ein fehlerfreies E-Book basiert auf einer vollständigen semantischen Code‑Architektur. Dies eliminiert ungeplante Zeitfresser in der Produktion.
2. Praxistaugliche Barrierefreiheit: Die Kombination aus Semantik und manuellem Stresstest schließt die Lücke zwischen formaler Validierung, Nutzbarkeit und tatsächlicher Zugänglichkeit.
3. Nachhaltige Wartbarkeit. Objektorientiertes CSS, Klassen sparsam eingesetzt und HTML5-Tags nach dem Prinzip der Robustheit macht den digitalen Buchbestand resistent gegenüber technologischen Entwicklungen und bietet lesbare Strukturen für zukünftige Updates der Backlist.

Update 10. Juni 2026: Regulatorischer Druck und die Realität der Code-Ebene

Die Europäische Kommission hat im März 2026 eine erneute, mit Gründen versehene Stellungnahme an Deutschland gerichtet. Hintergrund sind fortlaufende administrative Umsetzungslücken bei der Übernahme der Europäischen Barrierefreiheitsrichtlinie (Richtlinie (EU) 2019/882; European Accessibility Act, EAA) in nationales Recht. Unabhängig von diesen Verzögerungen ist die Frist des Barrierefreiheitsstärkungsgesetzes (BFSG) für Wirtschaftsakteure seit Juni 2025 bindend. Für Verlage bedeutet dies: Gefordert ist die kompromisslose Einhaltung der europäischen Norm EN 301 549, welche die WCAG 2.1 AA-Kriterien als Mindeststandard vorschreibt.

Wie sich die Anforderungen des EAA in der EPUB-Architektur widerspiegeln, verdeutlichen die folgenden Beispiele, strukturiert nach den vier WCAG-Prinzipien (POUR):

1. Wahrnehmbarkeit

Informationen und Komponenten der Benutzeroberfläche müssen für Benutzer so dargestellt werden, dass sie diese wahrnehmen können. Dies erfordert Code-Strukturen, die eine flexible Darstellung im und akustischen Ausgabe ermöglichen.

Im Workflow wurde dieses Prinzip der Wahrnehmbarkeit wie folgt umgesetzt:

• Layouts und Typografie werden automatisiert ohne feste Breiten- oder Höhenangaben definiert, um die systemseitige Textskalierung und den dynamischen Zeilenumbruch (Reflow) auf E-Ink-Displays und mobilen Endgeräten nicht zu blockieren.
• Manuelle Anreicherung wird wie folgt umgesetzt:
  • Kontrastanpassungen werden durch den Verzicht auf statische Farbwerte im Stylesheet und die Nutzung von color: currentColor integriert. Auf diese Weise passen sich Schriften, Linien und Tabellenränder automatisch an die systemseitigen Nacht-, Sepia- oder Kontrastmodi der Lese-Apps an.
  • Inhaltsbeziehung und Beschriftungen grafischer Elemente werden mittels <figure> gekapselt. Die Verknüpfung mit einer sichtbaren Bildunterschrift erfolgt über <figcaption>, während rein informative Grafiken ein valides, leeres alt-Attribut erhalten. Tabellen werden über das <caption>-Element beschriftet. Dies stellt sicher, dass assistive Technologien den Titel der Datenmatrix beim Eintritt in die Zelle ansagen und diese im Popup-Modus mit der Tabelle zusammen bleibt.
  • Tabellen erhalten für die Dateninthalte in der Spalte den Tabellenkopf und für die horizontale Verknüpfung eine Zeilenüberschrift. In beide wird jeweils eine axiale Zuordnung der Datenzellen mittels scope="col" und scope="row" integriert. Dies ermöglicht Screenreadern die zweidimensionale Ansage von Inhaltsstoffen und Mengenverhältnissen.

Die Umsetzung im Quelltext

<figure class="tabelle">
  <table>
    <!-- Die Tabellen-Beschriftung für Screenreader -->
    <caption>
      Tabelle 4: Nährwertvergleich Löwenzahn / Kultursalat
    </caption>
    <thead>
      <tr>
        <!-- scope="col" definiert die Spalten-Achse -->
        <th scope="col">Inhaltsstoff</th>
        <th scope="col">Menge</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- scope="row" definiert die Zeilen-Achse -->
        <th scope="row">Energie</th>
        <td>ca. 45 kcal / 188 kJ</td>
      </tr>
    </tbody>
  </table>
</figure>

2. Bedienbarkeit

Navigation und Interaktion müssen für alle Nutzer, unabhängig vom Eingabegerät, wie Tastatur- oder Sprachsteuerung, logisch bedienbar sein.

Im Workflow wurde dieses Prinzip der Bedienbarkeit wie folgt umgesetzt:

• Die Automatisierte Basis erzeugt die elementaren, korrekt verschachtelten Navigationsdateien nav.xhtml und toc.ncx als Fallback sowie die Definition der Lesereihenfolge im spine der content.opf.
• Manuelle Anreicherung wird wie folgt umgesetzt:
  • Eine Landmark-Navigation wird durch eine unsichtbaren Navigation integriert durch die Attribute epub:type für bodymatter welches den Hauptteil markiert, backmatter, welches den Ahang markiert. Weitere untergeordnete Auszeichnungen wie glossary für das Glossar, endnotes für die Endnoten und viele mehr markieren bestimmte Sektion innerhalb der Buchteile. So können assistive Technologien aus allen Positionen des Buches gezielt diese Bereiche anspringen oder überspringen und lesen vor, um welchen Buchteil oder welche Sektion es sich handelt.
  • Optimierung, Vervollständigung und Ablauflogik von Link-Zielen. Da das Attribut aria-describedby nicht dokumentenübergreifend von XHTML-Seite zu einer anderen XHTML-Seite funktioniert, erhalten diese seitenübergreifende Verweise, wie Endnoten, ein präzises aria-label. Dieses wird im Startlink gezielt eingesetzt, um den visuellen Linktext „[a]“ auditiv zu ersetzen. Dadurch entsteht für Screenreader-Nutzer_innen ein grammatikalisch vollständiger Satz. Die akustische Wiedergabe sagt nun „Siehe dazu die Anmerkung unter Hinweis a: Unterscheidungsmerkmale“ ohne den Lesefluss zu unterbrechen. Am Buchende werden die Endnoten in der dafür gekennzeichneten Sektion in einem Listen-Element gebündelt, damit assistive Systeme beim Betreten die Gesamtzahl der Anmerkungen ansagen. Der Rücklink verzichtet auf ein Aria-Label, da die Rolle doc-backlink die semantische Richtungsumkehr bereits als Information über das Element wiedergibt. Der Linktext selbst wird so auditiv und visuell verstanden, ohne die Navigationslogik zu beschneiden. Diese Vorgehensweise überbrückt zugleich Funktionalität und Bedienbarkeit wenn Apps und eReader keine Popup-Unterstützung für Fuß- und Endnoten bereitstellen.

Die Umsetzung im Quelltext

<!-- 1. Endnote-Start im Text (konform nach WCAG 2.5.3) -->
<p>Siehe dazu die Anmerkung unter <a id="noteref-a" href="anhang.xhtml#endnote-a" epub:type="noteref" role="doc-noteref" aria-label="Hinweis a: Unterscheidungsmerkmale">[a]</a>.</p>

<!-- 2. Endnote im Anhang -->
<section epub:type="endnotes" role="doc-endnotes" aria-labelledby="endnoten">
  <h2 id="endnoten" class="level2">Endnoten</h2>
    <ol class="endnoten-liste">
      <li id="endnote-a" epub:type="endnote">
        <p>[a] Der giftige Ackergauchheil... 
           <a href="ch005.xhtml#noteref-a" epub:type="backlink" role="doc-backlink">Zurück zum Text</a>.
        </p>
      </li>
    </ol>
</section>

3. Verständlichkeit

Texte und die Bedienung der Benutzeroberfläche müssen verständlich und vorhersehbar aufgebaut sein. Dies erfordert eine maschinenlesbare Sprachsteuerung und eindeutige Inhaltsbeziehungen.

Im Workflow wurde dieses Prinzip der Verständlichkeit wie folgt umgesetzt:

• Anhand der automatisierten Basis wurde die Hauptsprache des Buches global deklariert (<html xml:lang="de" lang="de">), um Screenreadern das automatische Laden der korrekten Aussprachedatenbank zu ermöglichen.
• Fehlende Attribute wurden über folgende manuelle Anreicherung via Sigil implementiert:
  • Sprachwechsel bei fremdsprachigen Fachbegriffen, wie lateinische Pflanzennamen, wurden durch das Language-Attribut im Fließtext isoliert deklariert, damit die Sprachausgabe nicht die deutsche Phonetik anwendet.
  • Den Beschreibungslisten wurden die Rollen-Attribute term und definition hinzugefügt, damit Begriff und Erklärung für Screenreader zusammenhängend verknüpft ist.
  • Die Auszeichnung von Abschnitten oder Buchteilen durch role und epub:type gewährleistet die eindeutige Inhaltsbeziehung von Seiten oder <section>-Containern zum Inhalt. So wird zusätzlich die Art des Inhaltes der Seite oder des Containers markiert. Die enthaltene Überschrift wird durch `aria-labelledby` untrennbar mit der <section> verschweißt. Abschließend wurden alle Auszeichnung der Buchteile und Abschnitte in der Lesereihenfolge in den Landmarks integriert. Dadurch können Screenreader diese Informationen dezentral abrufen und zusammenhängend ausgeben. Das bietet eine globale und übergeordnete Orientierung, und die Art des Inhaltes wird verständlich zugeordnet.

Die Umsetzung im Quelltext

<!-- Sprachwechsel erfüllt WCAG-Kriterium: 3.1.2 AA -->
<h1>Bärlauch (<span xml:lang="la" lang="la">Allium ursinum</span>)</h1>

<!-- Beschreibungsliste erfüllt WCAG-Kriterium: 1.3.1 A -->
<section epub:type="glossary" role="doc-glossary" aria-labelledby="glossar">
  <h2 id="glossar" class="level2">Glossar</h2>

  <dl>
    <dt id="term-anthocyane" epub:type="glossterm" role="term">Anthocyane</dt>
    <dd epub:type="glossdef" role="definition">Pflanzenfarbstoffe (rot/violett), die als Antioxidantien die Zellen vor freien Radikalen schützen.</dd>
  </dl>
</section>

/* term glossar */
dt[role="term"] {
  font-weight: bold;
}

4. Robustheit

Der Code muss so standardisiert sein, dass aktuelle und zukünftige assistive Technologien sowie unterschiedliche E-Reading-Engines die Inhalte verlässlich interpretieren. Im Fokus steht die Fehlertoleranz, was man auch Graceful Degradation nennt. Ignorieren ältere Systeme fortgeschrittene semantische Attribute, muss die zugrundeliegende HTML-Basis den Inhalt fehlerfrei und strukturiert wiedergeben.

• Die automatische Umsetzung im Workflow erzeugt ausschließlich standardkonforme XHTML-Dateien, die den Spezifikationen von W3C und EPUB 3 entsprechen. Um eine fehlerfreie Interpretation auf älteren Lesegeräten wie frühen Tolino- oder Kindle-Generationen zu gewährleisten, werden EPUB-2-Fallbacks in Form einer toc.ncx-Datei parallel im Paket hinterlegt. Das eReader-System wählt selbstständig den für seine Engine interpretierbaren Zweig. Beide Dateien sind inhaltlich deckungsgleich, damit eReader und Apps in jedem Fall vollständige Daten für das Navigationsmenü abrufen können. Die parallele Bereitstellung sorgt für maximale Robustheit der Systemkompatibilität.
• Die primäre Navigation wird mit dem Attribut epub:type="toc" versehen, damit Lesegeräte und eReader das Inhaltsverzeichnis zuverlässig erkennen und in ihrer eigenen Benutzeroberfläche als separates Menü anzeigen können.
• Die Validierung der gesamten Architektur im EPUB erfolgt vor der Auslieferung mittels EPUBCheck und manueller Praxistests auf mehreren eReader-Engines. Die maschinelle Prüfung der Barrierefreiheits-Metadaten erfolgt über den Branchenstandard Ace by DAISY.

Die Umsetzung im Quelltext

<nav epub:type="toc" id="toc" role="doc-toc">
  <h2>Inhaltsverzeichnis</h2>
  <ol>
    <li><a href="ch005.xhtml">Das Vogelmiere-Kapitel</a></li>
  </ol>
</nav>

<navMap>
  <navPoint id="nav-1" playOrder="1">
    <navLabel><text>Das Vogelmiere-Kapitel</text></navLabel>
    <content src="ch005.xhtml"/>
  </navPoint>
</navMap>