Leitfaden EPUB3-E-Books Seite 3

In der OPF-Datei (content.opf) sind die zentralen bibliographischen Metadaten (Titel, Autor, Sprache, ISBN) sowie alle notwendigen Barrierefreiheits-Metadaten korrekt gesetzt und befüllt.

Das Table of Contents in NCX-Datei (toc.ncx) bzw. EPUB Navigation Document (toc.xhtml) bildet die Reihenfolge, die hierarchische Gliederung der Dokumente und ihre Kapitelstruktur durch Integration von Navigationsknoten für die Gliederungsüberschriften komplett ab. Wenn Sie aus Gründen der Übersichtlichkeit/Usability nicht alle Überschriften des Produktes in den Table of Contents aufnehmen, achten Sie als Mindestanforderung darauf, dass für jedes Content-Dokument in der EPUB-Datei mindestens ein TOC-Eintrag gesetzt ist.

Sekundäre Inhalte im Sinne von Dokumenten außerhalb der sequenziellen Lesereihenfolge (z. B. Content-Dokumente, die nur Fußnoten oder Lang-Beschreibungen von Abbildungen enthalten) sind im <spine> der OPF-Datei mit dem Attribut linear="no" vom Lesefluss ausgenommen.

In content.opf enthält der <guide> die wesentlichen Landmarks der EPUB-Datei. Im EPUB Navigation Document ist ein <navepub:type="landmarks"> mit den wesentlichen Navigationspunkten für das E-Book enthalten. Hier sollten mindestens Einträge für die Cover-Datei, das Inhaltsverzeichnis und den Beginn des Haupttextes gesetzt sein; optional können Sie hier auch Einträge für Dokumente wie Impressum, Bibliografien, Glossare, Register und Verzeichnisse setzen.

Jedes Content-Dokument enthält genau einen klammernden <section>-Container, an dem geeignete und semantisch korrekte ARIA-Rollen gesetzt sind. Innerhalb dieses klammernden <section>-Containers sind die Inhalte mit weiteren Auszeichnungen platziert. Weitere <section>-Container zur Gliederung von Unterkapiteln sind möglich.

Wenn das Werk Verzeichnisse wie Abbildungsverzeichnis, Tabellenverzeichnis, Literaturverzeichnis, Glossare oder Register beinhaltet, strukturieren und verlinken Sie diesen Content mit semantischen HTML-Strukturen. Verwenden Sie geeignete ARIA-Rollen, und nehmen Sie die Verzeichnisse auch in die Landmarks auf.

Wenn das E-Book von einem Print-Titel abgeleitet ist, nehmen Sie die Print-Paginierung mit in die EPUB-Datei auf. Verwenden Sie dazu in den Content-Dokumenten Inline-Anker für die Seitenumbruch-Marken und verknüpfen Sie diese Seitenmarken mit einer EPUB-PageList.

Layoutanpassung und Schriftvergrößerung sind die meistgenutzten Funktionen von EPUB-Reader-Anwendungen. Um diese Funktionen zu unterstützen, verwenden Sie in Ihrem CSS nur relative Einheiten wie em oder Prozent für Schriftgrößen bzw. margin/padding-Angaben für Block-Elemente.

Jede*r E-Book-Nutzer*in ist es gewohnt, Schriftgrößen für optimale Lesbarkeit anzupassen, und erwartet ein einheitliches Leseerlebnis über alle verwendeten E-Books hinweg. Um diese Nutzungsgewohnheiten zu unterstützen, verwenden Sie immer 1em/100% als Basis-Schriftgröße für den Grundtext. Vermeiden Sie Schriftgrößen kleiner als 1em/100%.

Wenn Sie Farbe im CSS-Design verwenden, d. h. für Textfarbe, Rahmenfarbe oder Hintergrundfarbe, verwenden Sie dabei immer Farben, die eine gute Lesbarkeit bieten. Prüfen Sie den resultierenden Farbkontrast mit einem Kontrast-Prüfungs-Tool wie dem WebAIM Color Contrast Checker (https://webaim.org/resources/contrastchecker), insbesondere wenn Sie Textfarbe in Kombination mit Hintergrundfarbe verwenden. Denken Sie immer daran, dass jede Farbe/Farbkombination auch bei der Umwandlung in Graustufen gut lesbar sein muss (insbesondere für Farbenblinde bzw. für Nutzer*innen von Geräten mit eInk-Displays).

Wenn Sie Farbe mit einer inhaltlichen Bedeutung verwenden (z. B. grün/rot als Indikator für gut/schlecht; Ampelsysteme etc.), denken Sie dabei immer auch an farbenblinde bzw. farbfehlsichtige Menschen, die Farben nicht auf die gleiche Weise wahrnehmen wie Sie. Wenn Sie Farbe auf semantische Weise verwenden, bieten Sie immer zusätzlich eine textliche Alternative an, um die transportierte Information zu kommunizieren.

Im modernen Webdesign ist eine gängige Technik die Generierung von Text-Inhalten durch Verwendung der CSS-Eigenschaft content in Deklarationen für :before/:after-Pseudoelemente. Vermeiden Sie diese Technik im barrierefreien CSS-Design, da der generierte Inhalt nicht für Screenreader-Anwendungen bereitgestellt wird. Außerdem wird diese Technik von vielen gängigen EPUB-Readern nicht unterstützt.

Im modernen Webdesign ist eine gängige Technik die Neu-Anordnung von Inhalten durch die Verwendung von Funktionen wie Grid und Flexbox. Da an Screenreader-Anwendungen der HTML-Code jedoch in der ursprünglichen Reihenfolge der Elemente übergeben wird, ist es möglich, dass bei Einsatz von Flexbox und Grid die visuelle Darstellung und die Screenreader-Ausgabe nicht übereinstimmen. Vermeiden Sie diese Technik deshalb bei barrierefreiem CSS-Design. Außerdem unterstützt aktuell kein EPUB-Reader diese Technik.

Je Medientyp, der in der Publikation verwendet wird, wird ein Eintrag mit diesem Metadatum gesetzt. Es werden folgende Werte verwendet:

• textual: Für Text-Content
• visual: Für Bilder und Video-Inhalte
• auditory: Für Audio- und Video-Inhalte

Verwendung in der Praxis: Wenn Sie in Ihrer EPUB-Datei Bilder mit inhaltlicher Relevanz integriert haben, verwenden Siezwei Metadaten für accessMode mit den Werten "textual" und "visual". Wenn Ihre EPUB-Datei rein textuelle Inhalte enthält, reicht der Eintrag accessMode mit dem Werten "textual" aus. Die Cover-Datei spielt für diese Bewertung keine Rolle. Der accessMode"auditory" spielt nur dann eine Rolle, wenn Sie ein Multimedia-E-Book produzieren.

In diesem Metadatum wird angegeben, welche medialen Zugänge (textual, visual, auditory) hinreichend sind, um alle Inhalte der Publikation komplett barrierefrei nutzen zu können. Es werden folgende Werte verwendet:

• textual: Alle Inhalte sind rein textuell erschließbar.
• textual, visual: Für komplette Nutzung ist ein textueller und visueller Zugang notwendig.
• textual, auditory: Für komplette Nutzung ist ein textueller Zugang und Hörfähigkeit notwendig.
• textual, visual, auditory: Für komplette Nutzung ist textueller, visueller Zugang und Hörfähigkeit notwendig.

Achtung: Treffen mehrere Möglichkeiten parallel zu, wird das Metadatum für accessModeSufficient auch mehrfach mit verschiedenen Werten gesetzt.

Verwendung in der Praxis:

• Wenn Sie in Ihrer EPUB-Datei neben dem Cover-Bild auch noch weitere Bilder mit inhaltlicher Relevanz integriert haben, setzen Sie einen Eintrag für accessModeSufficient mit dem Wert "textual, visual".
• Wenn darüber hinaus alle Bilder in der Publikation barrierefrei aufbereitet sind, d. h. entweder einen Alternativtext besitzen oder als Ziergrafiken mit role="presentation" ausgezeichnet sind, setzen Sie zusätzlich einen weiteren Eintrag für accessModeSufficient mit dem Wert "textual".
• Wenn außer dem Cover-Bild keine Bilder mit inhaltlicher Relevanz in der EPUB-Datei enthalten sind, ist der Eintrag für accessModeSufficient mit dem Wert "textual" ausreichend.

Wenn Sie Multimedia-E-Books mit Audio- oder Video-Inhalten erstellen, beachten Sie zusätzlich noch die accessModeSufficient-Kombinationen "textual, auditory" bzw. "textual, visual, auditory". Wir gehen jedoch aufgrund der aktuellen Markteinschätzung davon aus, dass dies nur in seltenen Fällen notwendig ist.

Mit diesem Metadatum werden einzelne Merkmale angegeben, die besonders wichtig für die barrierefreie Erschließung bzw. für Features von assistiven Systemen sind. Je erfülltem Merkmal wird ein Eintrag mit dem entsprechenden Wert gesetzt. Die für EPUB-Dateien relevanten Werte für accessibilityFeature sind:

• highContrastDisplay: Das CSS-Layout mit den darin verwendeten Farbwerten erfüllt die Kontrast-Anforderungen von WCAG AAA.
• displayTransformability: Das CSS-Layout verwendet nur relative Werte für Schriftgrößen und Abstände und ermöglicht so weitgehende Layout-Anpassungen durch die Nutzer*innen.
• index: Es ist ein mit geeigneten ARIA-Rollen ausgezeichnetes Stichwort-Verzeichnis enthalten.
• printPageNumbers: Es sind Seitenumbruch-Informationen im HTML-Content enthalten, und das EPUB Navigation Document enthält eine PageList.
• alternativeText: Alle Bilder haben redaktionell erstellte Alternativtexte oder sind per role="presentation" als reine Ziergrafiken ausgezeichnet.
• MathML: Formeln im EPUB sind als MathML enthalten.
• longDescription: Komplexe Bilder im Content haben Langbeschreibungen, falls dies inhaltlich notwendig ist.
• readingOrder: Logische Lesereihenfolge im Content wird eingehalten; alle Sekundär-Inhalte (Fußnoten, Marginalien etc.) sind per Markup ausgezeichnet.
• structuralNavigation: Die Überschriften im Content repräsentieren die Dokumenthierarchie; die Content-Struktur wird 1:1 im TOC abgebildet.
• tableOfContents: Im EPUB ist ein vollständiger und korrekt ausgezeichneter TOC eingebunden.

Anmerkung: In der Spezifikation von schema.org für die Metadaten im Namensraum "schema:accessibility" ist für accessibilityFeature noch eine deutlich längere Feature-Liste definiert. Diese weiteren Features betreffen jedoch nicht nur EPUB-Publikationen, sondern auch andere Digitalmedien wie Web-Publikationen, PDFs, Audiobooks etc.; wir beschränken uns bei der hier aufgeführten Liste bewusst auf diejenigen Accessibility-Features, die in der Medienform EPUB technisch sinnvoll anwendbar sind.

Das Metadatum enthält Warnungen vor Multimedia-Content mit Gefahrenpotenzial für Menschen mit Epilepsie. Für die Angabe werden folgende Werte verwendet:

• flashing / noFlashingHazard: Content enthält / enthält keine Video-Inhalte mit Flackern/Biltzlicht.
• motionSimulation / noMotionSimulationHazard: Content enthält / enthält keine Video-Inhalte mit schnellen Bewegungen oder der Simulation von Bewegung.
• sound / noSoundHazard: Content enthält / enthält keine Audio-Inhalte mit abrupten Lautstärke-Wechseln.
• none: Es ist kein potenziell gefährlicher Content enthalten.

Verwendung in der Praxis:

Wenn Ihre Publikation keine Multimedia-Inhalte verwendet, setzen Sie genau einen Eintrag für accessibilityHazard mit dem Wert "none". Wir gehen davon aus, dass dies aktuell in den meisten EPUB-Publikationen der Fall sein wird.

Wenn Sie eine Multimedia-Publikation erstellen, wird eine redaktionelle Durchsicht des Audio- und Video-Materials auf potenzielle Gefahren für Menschen mit Epilepsie notwendig sein. Setzen Sie in diesem Fall je nach Prüfungsergebnis drei Einträge für das Metadatum mit den entsprechend passenden Werten.

Dieses Metadatum ist inzwischen nicht mehr zwingend erforderlich. Es handelt sich hierbei um einen Freitext, in dem ergänzende Angaben zur Barrierefreiheit des Produktes gemacht werden können. Wiederholungen von bereits in anderen Metadaten wie den Accessibility Features enthaltenen Informationen sollten vermieden werden. Stattdessen kann dieses Feld genutzt werden, um auf Einschränkungen hinzuweisen, für die es im redaktionellen Prozess keine Alternative gab. Auch kann hier auf besondere Qualitätsmerkmale hingewiesen werden, die sich in accessibilityFeature-Einträgen nicht ausdrücken lassen.

Beispiele:

• Das Produkt enthält mathematische Formeln, die als Bilder mit Alternativtexten versehen wurden, aber nicht als MathML enthalten sind.
• Das Produkt enthält historische Abbildungen, die zum Teil ein schlechtes Kontrastverhältnis aufweisen.
• Das Produkt enthält Abbildungen, deren Alternativtexte automatisiert durch KI-Anwendungen erstellt wurden.

Die Metadaten für einen vollständig barrierefreien EPUB-Titel würden in der OPF-Datei beispielsweise so aussehen:

<metadata>
<dc:creator>Autor, Vorname</dc:creator>
<dc:title>Titel der Publikation</dc:title>
<dc:language>de</dc:language>
<dc:publisher>Verlag</dc:publisher>
<dc:identifierid="bookid">urn:isbn:ISBN-NUMMER</dc:identifier>
<metaproperty="dcterms:modified">Timestamp der letzten Änderung</meta>
<metaproperty="schema:accessMode">textual</meta>
<metaproperty="schema:accessMode">visual</meta>
<metaproperty="schema:accessModeSufficient">textual</meta>
<metaproperty="schema:accessModeSufficient">textual, visual</meta>
<metaproperty="schema:accessibilityFeature">alternativeText</meta>
<metaproperty="schema:accessibilityFeature">displayTransformability</meta>
<metaproperty="schema:accessibilityFeature">highContrastDisplay</meta>
<metaproperty="schema:accessibilityFeature">readingOrder</meta>
<metaproperty="schema:accessibilityFeature">structuralNavigation</meta>
<metaproperty="schema:accessibilityFeature">tableOfContents</meta>
<metaproperty="schema:accessibilityHazard">none</meta>
<metaproperty="schema:accessibilitySummary">Zusammenfassung zur Barrierefreiheit der EPUB-Datei</meta>
</metadata>

Für die Integration der schema.org-Metadaten im <metadata>-Block ist keine spezifische Reihenfolge vorgesehen.

Für das Mapping von Metadaten in EPUB und ONIX wurde innerhalb der Taskforce Barrierefreiheit der Leitfaden „Barrierefreiheit von Buch-Produkten in ihren Metadaten darstellen“ erarbeitet. Dort kann eingesehen werden, welche Besonderheiten beim Abgleich bzw. Transfer von Metadaten zwischen EPUB und ONIX beachtet werden sollten.

Bitte beachten Sie dabei, dass die hier beschriebenen Barrierefreiheits-Metadaten insbesondere beim Kaufprozess von E-Books eine Rolle spielen, damit Menschen aus den Zielgruppen bewerten können, ob Titel für ihre Bedürfnisse geeignet sind. Da in E-Book-Shops stets die ONIX-Metadaten genutzt werden, spielen diese Metadaten für die Zugänglichkeit der E-Books gegenüber den Metadaten im EPUB die deutlich wichtigere Rolle. Dennoch sollten die Metadaten natürlich in beiden Ausspielungen korrekt und vollständig sein.

Insbesondere in Belletristik-Titeln tritt immer wieder der Fall auf, dass innerhalb des Fließtextes eines Kapitels Abschnitts-Wechsel stattfinden (z. B. von einem Handlungsstrang oder einer Sprecher-Perspektive zu einer anderen), die im Print-Layout entweder durch Leerzeilen oder durch Zier-Elemente visualisiert werden. Bei der Verwendung von Leerzeilen oder Bildern mit role="presentation" (wie dies ansonsten bei Zier-Elementen angebracht wäre) geht jedoch der semantische Charakter des Abschnitts-Wechsels komplett verloren.

Für das Tagging von inhaltlichen Abschnittswechseln bietet sich aufgrund des ARIA-Standards die ARIA-Rolle role="separator" an. Die Rolle wird typischerweise verwendet entweder an einem <p>-Element oder an einem <hr>-Element (horizontale Linie).

Wird ein Abschnittswechsel also mit einer Leerzeile visualisiert, kann ein Tagging dafür etwa so aussehen:

<pclass="leerzeile"role="separator"></p>

Wird dagegen eine Zier-Abbildung verwendet, wird man am sinnvollsten ein Inline-Bild verwenden, das von einem Absatz mit role=”separator” geklammert wird. In diesem Fall können Sie das Zierelement direkt referenzieren:

<pclass="leerzeile"role="separator">

<imgsrc="zierelement.jpg"role="presentation"/>

</p>

Größe und Ausrichtung des Bildes müssen in diesem Fall per CSS gesteuert werden.

Alternativ besteht die Möglichkeit, das <hr>-Element als Abschnittstrenner zu verwenden. Dazu verwenden Sie zunächst folgenden HTML-Code:

<hrclass="zierelement"role="separator"/>

Die Gestaltung als Zierelement, d. h. das Ausblenden der Default-Linie des <hr>-Elementes und das Einblenden eines Zierelementes über die CSS-Eigenschaft background-image, muss dann komplett per CSS erfolgen.

Für die barrierefreie Erschließung werden an zusammenhängende HTML-Dokumente in einer EPUB-Datei in Bezug auf Überschriften zwei eng verbundene Anforderungen gestellt:

• Jedes HTML-Dokument besitzt eine sinntragende Überschrift im Content.
• Jedes HTML-Dokument wird von mindestens einem TOC-Eintrag erschlossen.

Beide Anforderungen dienen der Navigation und der Orientierung, insbesondere wenn im EPUB lange und komplexe Inhalte dargestellt werden.

Diese Anforderung wird jedoch zur Herausforderung, wenn in einem vorliegenden Buch-Titel Dokumente integriert sind, die für ihre Print-Ausgabe keine abgedruckte Überschrift beinhalten. Für dieses Thema empfehlen wir folgendes Vorgehen, je nachdem welcher der folgenden Fälle in der Praxis auftritt:

Für das Dokument lässt sich einfach und sinnvoll redaktionell eine Überschrift formulieren

Dieser Fall ist typischerweise dann gegeben, wenn ein Dokument zwar keine abgedruckte Überschrift beinhaltet, aber ein „Dokument-Name“ natürlicherweise naheliegt, z. B. im Fall von Buch-Bestandteilen wie Widmung, Danksagung, Impressum, für die es feststehende Begriffe gibt.

Auch im Fall von Dokumenten, die ganze Kapitel eines Buchs repräsentieren, sollte es oft möglich sein, sinntragende „Ersatz-Überschriften“ zu erstellen, die ein Kapitel auf sinnvolle Weise bezeichnen.

In diesem Fall gehen Sie folgendermaßen vor:

• Formulieren Sie zunächst eine redaktionelle Ersatz-Überschrift für das Dokument
• Belassen Sie den Content des Dokumentes wie bisher ohne Überschriften-Element
• Setzen Sie am klammernden <section>-Elementes für das Dokument ein aria-label-Attribut und integrieren Sie dort die Ersatz-Überschrift:

<sectionid="chapter02"epub:type="chapter"role="doc-chapter"aria-label="Widmung">

<p>Für meinen Mann Leonard, ohne den dieses Buch eine ganze Zeit früher fertig geworden wäre.</p>

</section>

• Verwenden Sie die Ersatz-Überschrift in identischer Form auch für den TOC-Eintrag, der aus dem Inhaltsverzeichnis auf das HTML-Dokument zeigt
• Verwenden Sie die Ersatz-Überschrift in identischer Form auch für das <title>-Element im <head> des HTML-Dokumentes.

Für das Dokument lässt sich nicht auf triviale Weise eine Überschrift formulieren

Dieser Fall ist typischerweise dann gegeben, wenn Kapitel aus Buch-Titeln beispielsweise „künstlich” gesplittet werden müssen, um Längen-Vorgaben von EPUB-Reader-Applikationen zu genügen. In diesem Fall wird der Text mitten in einem Kapitel unterbrochen und eine artifizielle neue HTML-Datei begonnen, die nichts mit der inhaltlichen Struktur des Titels zu tun hat. Deswegen wird es hier aus inhaltlicher Sicht schwer bis unmöglich sein, eine sinnvolle Überschrift für dieses künstliche Kapitel zu definieren.

In diesem Fall gehen Sie folgendermaßen vor:

• Verwenden Sie den ersten Absatz im Dokument und wählen Sie dort den ersten sinntragenden Satz oder Halbsatz als Ersatz-Überschrift für das Dokument.
• Belassen Sie den Content des Dokumentes wie bisher ohne Überschriften-Element.
• Setzen Sie im ersten Absatz-Element des Dokumentes ein aria-label-Attribut und integrieren Sie dort die Ersatz-Überschrift.

<sectionid="chapter07"epub:type="chapter"role="doc-chapter">

<paria-label="Gebt mir meinen Romeo …">

„Gebt mir meinen Romeo, und wenn ich sterben werde,

Nimm ihn und zerschneide ihn in kleine Sterne,

Und er wird das Antlitz des Himmels so schön machen

Dass alle Welt sich in die Nacht verliebt,

Und der grellen Sonne keine Verehrung erweist.”

</p>

</section>

• Verwenden Sie die Ersatz-Überschrift in identischer Form auch für den TOC-Eintrag, der aus dem Inhaltsverzeichnis auf das HTML-Dokument zeigt
• Verwenden Sie die Ersatz-Überschrift in identischer Form auch für das <title>-Element im <head> des HTML-Dokumentes.

In modernerer Genre-Literatur stellt sich immer wieder die Herausforderung, dass Emoji-Zeichen mit in den EPUB-Content integriert werden müssen; dies ist insbesondere der Fall, wenn Chat-Verläufe aus Messenger-Anwendungen im Text nachgebildet werden.

Für eine barrierefreie Auszeichnung von Emojis ist es zunächst ausreichend, wenn das Emoji-Zeichen in korrekter Kodierung als Unicode-Zeichen in die HTML-Daten im EPUB eingebracht, z. B. in folgender Form:

Wird diese Kodierung von einem Screenreader erfasst, wird anstelle des Emoji-Zeichens die Definition des Zeichens in der Unicode-Spezifikation vorgelesen (in diesem Beispiel: „leicht lächelndes Gesicht“).

Bitte beachten Sie dazu aber, dass abhängig von den darin verwendeten Schriften nicht alle Editor-Applikationen für den HTML-Code Emojis auch korrekt darstellen können.

Wenn im EPUB Emojis mit einer bestimmten, vom Verlag ausgewählten Optik dargestellt werden sollen, ist es oft sinnvoll, einen eigenen Emoji-Font einzubringen. Ergänzen Sie in diesem Fall das Emoji mit einem <span>-Element und einer geeigneten Format-Klasse und nutzen Sie diese Format-Klasse zur Zuweisung des Emoji-Fonts in Ihrem CSS:

Wenn anstelle der Unicode-Definition des Emojis aus inhaltlichen Gründen stattdessen ein anderer Text vorgelesen werden soll, verwenden Sie ebenfalls das Tagging mit einem <span>-Element und ergänzen Sie es mit einem title-Attribut, in dem der gewünschte Text übergeben wird:

Vermeiden Sie es aus Gründen der Verständlichkeit möglichst, mehr als einzelne eingestreute Emojis hintereinander zu verwenden. Längere Ketten von Emojis, die einen Sinngehalt übermitteln sollen, vermitteln sich in der Regel nicht ausschließlich durch die Unicode-Definitionen der genutzten Zeichen und sollten sinnvollerweise mit einem „Alternativtext“ im title-Attribut ergänzt werden.

Aufgrund der Notwendigkeiten von stark layoutlastigen, grafisch gestalteten Publikationen wie z. B. Kinderbüchern, Bildbänden, Coffee Table Books oder Kochbüchern wurden solche Titel in der Vergangenheit immer wieder in der Format-Variante Fixed-Layout-EPUB erstellt. Bei eBooks in Fixed-Layout-EPUB stellt sich das Problem, dass der Aufbau und die Logik des Dateiformates besondere große Herausforderungen für eine Aufbereitung als barrierefreier Content stellen. Zum aktuellen Stand der Technik ist es deswegen nicht möglich, Fixed-Layout-EPUB in einer barrierefreien Form zur Verfügung zu stellen.

Im W3C wird jedoch an Konzepten und Spezifikationen gearbeitet, um diese Herausforderung zu adressieren. Der aktuelle Diskussions-Stand dazu ist im Working Draft EPUB Fixed Layout Accessibility zu ersehen, auf den wir hier gerne verweisen. Wir weisen jedoch darauf hin, dass sich diese Konzeption noch in einer sehr frühen Phase befindet, die Ergebnisse alles andere als final sind und aktuell weder auf für die Content-Erstellung noch auf der Seite der EPUB-Reader Tools existieren, die mit diesen Vorgaben umgehen können.

Zur Frage, wie mit Gender-Formulierungen in barrierefreiem EPUB umgegangen werden soll, zitieren wir an dieser Stelle die Position des Deutschen Blinden- und Sehbehinderten-Verbandes aus der Leitlinie „Gendern“:

Damit klar wird, wie ein Text von einem Screenreader vorgelesen werden soll, sollten Personenbezeichnungen ausformuliert werden. Dabei sollten bevorzugt Textlösungen gefunden werden, die kein Geschlecht ausschließen („Team“ statt „Mitarbeiterinnen und Mitarbeiter“). Falls dies nicht möglich oder sinnvoll ist, kann alternativ die Beidnennung („Ärztinnen und Ärzte“) genutzt werden.

Kurzformen wie das Gendern mit Sternchen, Unterstrich und Doppelpunkt sind für viele blinde und sehbehinderte Menschen problematisch und deshalb nicht zu empfehlen. Falls jedoch mit Kurzformen gegendert werden soll, empfiehlt der DBSV, das Sternchen als barriereärmste der drei gängigen Möglichkeiten für Gender-Kurzformen zu verwenden.

In Sonderfällen kann es vorkommen, dass in Buch-Titeln einzelne Abschnitte mit geschwärztem Text integriert werden, z. B. als Stilmittel in Spionage-Romanen. Während sich die Text-Schwärzung im EPUB-Layout über Inline-Elemente per CSS leicht realisieren lässt, geht der Sinngehalt dieser Visualisierung bei der Übergabe an Screenreader natürlich komplett verloren.

Als Umsetzung empfehlen wir an dieser Stelle, die Inline-Elemente, die für die Schwärzung verwendet werden, noch um das title-Attribut zu ergänzen und darin die Information über den inhaltlichen Hintergrund dieser Strukturierung unterzubringen (im Grunde wird damit eine Art Alternativ-Text für ein Text-Element formuliert). Verwenden Sie dazu etwa folgendes Tagging:

<p>Lorem ipsum dolor sit amet, <spanclass="textschwaerzung"title="Geschwärzter Text, der anzeigt, dass hier vor Veröffentlichung Inhalte vom BND zensiert wurden">consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</span>Lorem ipsum dolor sit amet.</p>

Neben diesem Code muss parallel die Textschwärzung im CSS realisiert werden, etwa durch Verwendung von background-color:black; für das <spanclass="textschwaerzung">-Element.

In einigen Bereichen von Wissenschafts-Publikationen, v. a. in den Altertumswissenschaften, Archäologie etc., kann der Fall eintreten, dass in HTML-Dokumenten einer EPUB-Datei Textbereiche oder Zitate integriert werden müssen, die in toten Sprachen verfasst sind. Im Prinzip gelten für solche Zitate dieselben Richtlinien wie für Sprach-Auszeichnungen von lebenden Sprachen, nur mit einigen zusätzlichen Herausforderungen:

• lang-Attribut am klammernden Element: Wie bei lebenden Sprachen auch, wird die Sprachangabe für ein fremdsprachiges Zitat am jeweiligen klammernden HTML-Element (z. B. <p>, <div> oder auch <blockquote>) über das lang-Attribut vorgenommen. Im zugrundeliegenden Standard gibt es auch für sehr exotische tote Sprachen geeignete Sprachkürzel, im Zweifel empfiehlt sich eine Suche über die Online-Referenz unter https://r12a.github.io/app-subtags/
• Verhalten von Screenreadern bei lang-Attributen für tote Sprachen: Obwohl wir dies nicht per Test verifizieren konnten, ist unsere Annahme, dass Screenreader für tote Sprachen, die über Latein/Griechisch hinausgehen, wahrscheinlich kaum noch eine sinnvolle Sprachausgabe produzieren können.
• title-Attribut: Empfehlung wäre deswegen, für fremdsprachige Zitate in toten Sprachen zumindest eine kurze Inhaltsangabe im title-Attribut des klammernden HTML-Elementes mitzugeben (z. B. title="Textzitat in Hethitisch mit einem Dekret des König Hamurabi über die Steuergesetzgebung des Reichs").
• Unicode-Codierung für die Inhalte in toten Sprachen: Achten Sie bei der Content-Strukturierung besonders darauf, dass sie eine korrekte Unicode-Codierung für Ihre Inhalte wählen. Ansonsten ist es auch für die visuelle Ausgabe im EPUB in der Praxis nahezu unmöglich, eine korrekte Textwiedergabe sicherzustellen. Für viele tote Sprachen gibt es im Unicode-Standard tatsächlich eigene Code-Bereiche, die als Referenz verwendet werden können (auch wenn es in der Praxis wahrscheinlich für viele davon schwierig sein wird, geeignete Fonts zu finden). Verwenden Sie im Zweifel als Einstiegspunkt in dieses Thema die Überblicks-Artikel Unicode for ancient languages bzw. Unicode: Glossing Ancient Languages.

Abbildungen mit Alternativ-Text und Legende

<figure class="bild-container"id="bild-0001">
     <img src="../Images/Abbildung_01.jpg" alt="Alternativtext für die Abbildung" class="bild"/>
     <figcaption>
          <p class="bild-legende"><a id="crossref-bild-0001"></a>Bild 1: Legendentext für die Abbildung</p>
     </figcaption>
</figure>

Schmuckgrafiken

<figure class="bild-container schmuckgrafik" id="bild_0002">
     <img class="schmuckgrafik" src="web-resources/Images/schmuckgrafik.jpg" role="presentation" alt=""/>
</figure>

<body class="cover" epub:type="cover">
     <figure class="cover-image-container">
          <img class="cover-image" role="doc-cover" alt="Cover-Bild von [Produkttitel]" src="images/cover-image.jpg"/>
     </figure>
</body>

Links zu Fußnoten/Endnoten

<aclass="endnote"epub:type="noteref"role="doc-noteref"
href="endnotes.xhtml#endnote_2"id="endnote_2_return">[2]</a>

Fußnoten (Fußnoten, die am Ende des jeweiligen HTML-Kapitels gesammelt ausgegeben werden)

<asiderole="doc-footnote"epub:type="footnote">

<p><aclass="endnote-label"href="content.xhtml#endnote_1"
role="doc-backlink">[1]</a>Fussnotentext</p>

</aside>

Endnoten (Fußnoten, die am Ende des Produktes in einem Kapitel gesammelt werden)

<sectionclass="endnoten"role="doc-endnotes">

<h1>Endnoten</h1>

<ol>

<liclass="endnote"epub:type="endnote"role="doc-endnote"
aria-label="Endnote 1">

<pclass="endnote"><aclass="endnote-label"href="content.xhtml#endnote_1"role="doc-backlink">[1]</a>Endnotentext</p>

</li>

</ol>

</section>

<sectionrole="doc-chapter">

<header>

<h1class="U1">Codebeispiele für barrierefreie EPUBs</h1>

<pclass="U1-untertitel"role="doc-subtitle">Eine Einführung für Anfänger und Fortgeschrittene</p>

</header>

<pclass="standard">Fließtext im Kapitel.</p>

</section>

Für Dokumente auf oberster Ebene gilt dabei:

• Jedes Dokument wird unterhalb des <body> immer mit einer <section> geklammert.
• Nur die oberste <section> in einem Dokument erhält eine @role.
• Es wird als „Default-Role“ immer @role="doc-chapter" für jedes Kapitel verwendet, außer ein Dokument erhält aufgrund seines Inhaltes eine andere Rolle (z. B. Impressum, Literaturverzeichnis, Index, Endnoten etc.).

<sectionepub:type="backmatter chapter"role="doc-chapter">

<h2>Index</h2>

<divclass="index"epub:type="index"role="doc-index">

<divclass="index-standard"epub:type="index-entry">

<pclass="index-ebene-1"><spanclass="index-eintrag">Index-Begriff</span>
<aclass="index-verweis"href="content.xhtml#idx00967">Fundstelle 1</a>

<aclass="index-verweis"href="content.xhtml#idx00978">Fundstelle 2</a></p>

</div>

(…)

</div>

</section>

Innerhalb von toc.xhtml:

<navid="toc"epub:type="toc"role="doc-toc">

<h2>Inhaltsübersicht</h2>

<ol>

<li><ahref="cover.xhtml">Cover</a></li>

(…)

</ol>

</nav>

<asideclass="marginalie">

<p>Marginalientext</p>

</aside>

<pclass="standard">Text neben der Marginalie. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

Innerhalb von toc.xhtml:

<navepub:type="landmarks">

<h2>Buchnavigation</h2>

<ol>

<li><aepub:type="toc"href="toc.xhtml">Inhaltsübersicht</a></li>

<li><aepub:type="cover"href="cover.xhtml">Cover</a></li>

<li><aepub:type="bodymatter"href="chapter.xhtml">Textanfang</a></li>

<li><aepub:type="copyright-page"href="impressum.xhtml">Impressum</a></li>

<li><aepub:type="bibliography"href="bibliographie.xhtml">Bibliographie</a></li>

<li><aepub:type="index"href="register.xhtml">Register</a></li>

</ol>

</nav>

<sectionrole="doc-bibliography">

<h1class="U1">Literaturverzeichnis</h1>

<pclass="zwischentitel">Frühwerke</p>

<divclass="verzeichnis"role="list">

<divclass="verzeichnis-eintrag"role="listitem">

<pclass="bibliographie"role="doc-biblioentry">Karl Jaspers, Antwort: Zur Kritik meiner Schrift ›Wohin treibt die Bundespublik?, München: Piper, 1967, S. 120, S. 119.</p>

</div>

<divclass="verzeichnis-eintrag"role="listitem">

<pclass="bibliographie"role="doc-biblioentry">Karl Jaspers, Wohin treibt die Bundesrepublik? Tatsachen, Gefahren, Chancen, München: Piper, 1966, S. 155.</p>

</div>

<divclass="verzeichnis-eintrag"role="listitem">

<pclass="bibliographie"role="doc-biblioentry">Karl Dietrich Bracher, »Wird Bonn doch Weimar?«, in: Der Spiegel, Nr. 12/1967. S. 60–68.</p>

</div>

</div>

</section>

Seitenumbrüche im Content

<aid="p27"title="Seite 27"epub:type="pagebreak"role="doc-pagebreak"/>

Generierte Page-List (in toc.xhtml)

<navepub:type="page-list"role="doc-pagelist">

<h2>PageList</h2>

<ol>

<li><ahref="content-datei.xhtml#p27">27</a></li>

(…)

</ol>

</nav>

Einfach strukturierte Tabellen

Der Normalfall in der Tabellen-Strukturierung sollte eine Tabelle mit Titel sein, die ggf. noch eine Aufteilung in Tabellen-Kopf, Tabellen-Körper und (optional) einen Tabellen-Fuß mitbringt.

Für diesen Fall genügt es im HTML-Tagging, die Tabellen-Aufteilung in korrektem HTML-Code in den Daten vorzuhalten. Die Tabelle wird sinnvollerweise mit einem <figure>-Element geklammert bzw. im Fall einer Überschrift mit einer <figcaption> versehen. Besonders wichtig ist die korrekte Aufteilung in Tabellen-Kopf (<thead>) und Tabellen-Körper (<tbody>). Bereits auf dieser Basis ist es Screenreader-Applikationen möglich, die Tabellen-Struktur eindeutig zu erkennen und z. B. eine Zuordnung von Kopf-Zellen und Zellen im Körper vorzunehmen.

Visuelles Beispiel:

Tabelle 1: Ausgewählte Länder und ihre Hauptstädte

Code-Beispiel:

<figureclass="tabelle">

<figcaption>

<pclass="caption"><spanclass="label">Tabelle 1:</span>Ausgewählte Länder und ihre Hauptstädte</p>

</figcaption>

<table>

<thead>

<tr>

<th>Land</th>

<th>Hauptstadt</th>

</tr>

</thead>

<tbody>

<tr>

<td>Deutschland</td>

<td>Berlin</td>

</tr>

<tr>

<td>Frankreich</td>

<td>Paris</td>

</tr>

<tr>

<td>Italien</td>

<td>Rom</td>

</tr>

</tbody>

</table>

</figure>

Tabelle mit Überspannungen

Komplexere Datenstrukturen müssen dann gewählt werden, wenn Tabellen nicht nur eine Aufteilung in Kopf, Körper und Fuß enthalten, sondern auch überspannte Zellen. Auch können sich Kopfzellen nicht nur im Tabellen-Kopf befinden, sondern auch im Tabellen-Körper - etwa, wenn Tabellen-Zellen eigene Kopf-Spalten haben.

Tabellen-Strukturen dieser Art sollten für barrierefreie Publikationen möglichst vermieden werden, weil die resultierende Sprachausgabe selbst bei korrekter Strukturierung schwer zu verstehen bzw. zu erfassen ist. Wenn Sie jedoch aus inhaltlichen Gründen Tabellen dieser Komplexität verwenden müssen (etwa aufgrund der Notwendigkeit für Gesetzes-Zitate), dann gehen Sie nach folgenden Leitlinien vor:

1. Verwenden Sie eine präzise Aufteilung in Kopf, Körper und Fuss der Tabelle
2. Nutzen Sie colspan- bzw. rowspan-Attribute an den Tabellen-Zellen für eine exakte Abbildung der Zellen-Überspannungen
3. Setzen Sie an allen Kopfzellen ID-Attribute; verweisen Sie bei jeder Zelle im Körper über das headers-Attribut auf diese IDs.
4. Verwenden Sie für Spaltenköpfe im Tabellen-Körper ebenfalls das <th>-Element
5. Setzen Sie bei jeder <th>-Zelle das scope-Attribut, um anzuzeigen, ob das Element eine Kopfzelle für eine Zeile ("row") oder eine Spalte ("col") darstellt.

Auf diese Weise sind Screenreader zumindest in der Lage, die Struktur auch von komplexen Tabellen zu erfassen (auch wenn die Sprachausgabe bereits in diesem einfachen Beispiel wahrscheinlich alles andere als ideal ist).

Visuelles Beispiel:

Code-Beispiel:

<table>

<thead>

<tr>

<th></th>

<thcolspan="2"scope="col"id="h1">Fixkosten</th>

<thcolspan="2"scope="col"id="h2">Variable Kosten</th>

</tr>

<tr>

<th></th>

<thscope="col"id="h3" headers="h1">Miete</th>

<thscope="col"id="h4"headers="h1">Angestellte</th>

<thscope="col"id="h5"headers="h2">Büromittel</th>

<thscope="col"id="h6"headers="h2">Reisekosten</th>

</tr>

</thead>

<tbody>

<tr>

<thscope="row"id="h7">Januar</th>

<tdheaders="h1 h3 h7">600,00</td>

<tdheaders="h1 h4 h7">8000,00</td>

<tdheaders="h2 h5 h7">50,00</td>

<tdheaders="h2 h6 h7">350,00</td>

</tr>

<tr>

<thscope="row"id="h8">Februar</th>

<tdheaders="h1 h3 h8">600,00</td>

<tdheaders="h1 h4 h8">8000,00</td>

<tdheaders="h2 h5 h8">200,00</td>

<tdheaders="h2 h6 h8">0,00</td>

</tr>

<tr>

<thscope="row"id="h9">März</th>

<tdheaders="h1 h3 h9">600,00</td>

<tdheaders="h1 h4 h9">8000,00</td>

‎<tdheaders="h2 h5 h9">70,00</td>

<tdheaders="h2 h6 h9">75,00</td>

</tr>

</tbody>

<tfoot>

<thscope="row"id="h10">Summe Quartal</th>

<tdheaders="h1 h3 h10">1800,00</td>

<tdheaders="h1 h4 h10">24000,00</td>

<tdheaders="h2 h5 h10">320,00</td>

<tdheaders="h2 h6 h10">425,00</td>

</tfoot>

</table>

Blockzitate

<blockquoteclass="block-zitat">

<pclass="zitat">„Duis autem vel eum iriuredolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.”</p>

<pclass="zitat-quelle"><cite>(Zitat-Quelle)</cite></p>

</blockquote>

Inline-Zitate

<pclass="standard"><q>„Auch du, mein Sohn Brutus?“</q>, sagte Caesar</p>

Zitat als „Motto“

<blockquoteclass="motto"role="doc-epigraph">

<pclass="zitat">„Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.“</p>

</blockquote>