Wir öffnen Türen…

Tipps und Tricks zur barrierefreien E-Book-Gestaltung

In diesem Jahr versüßen wir Verlagen, Publizisten und allen Interessierten die Weihnachtszeit mit einem besonderen Adventskalender. Türchen für Türchen beantwortet die DZB spannende Fragen zur Erstellung barrierefreier EPUB-Publikationen.

Diese Tipps und Tricks machen E-Books nicht nur nutzerfreundlicher, sondern auch für blinde und sehbehinderte LeserInnen zugänglich.

Viel Spaß beim Lesen, Lernen und Nachmachen!
Bei Fragen oder Feedback schreiben Sie uns auf Twitter unter dem Hashtag #WirÖffnenTüren oder per Nachricht an @dzb_tech.

Fröhliche Weihnachten!

Foto eines in zwei Händen gehaltenen Weihnachtsgeschenkes


Türchen 12: Das Zusammenspiel von Farben – ist der Kontrast zwischen Text und Hintergrund ausreichend?

Farben stellen ein wirkungsvolles und beliebtes Mittel zur Gestaltung von Textinhalten dar.
Um nicht nur ästhetisch ansprechend zu sein, sondern auch eine gute Lesbarkeit zu unterstützen, sollte bei der farblichen Gestaltung von Texten darauf geachtet werden, dass sich Schriftfarbe und Hintergrund in ihrer Helligkeit ausreichend unterscheiden.

Unzureichende Kontraste können dazu führen, dass die Wahrnehmbarkeit von Textinhalten beispielsweise für Menschen mit einer Sehbehinderung oder auch für die NutzerInnnen monochromer Ausgabegeräte beeinträchtigt wird.

Ob der Kontrast zwischen Vorder- und Hintergrundfarbe ausreichend ist oder nicht, hängt nicht nur von den individuellen Bedürfnissen des Lesers, sondern auch von der übrigen Gestaltung des Textes ab, wie etwa der Schriftgröße.
Die WCAG empfiehlt für normale Texte  ein Kontrastverhältnis von mindestens 4,5:1. Für große Texte (ab einer Schriftgröße von 18pt regular oder 14pt bold) ist die Anforderung etwas geringer. Hier ist ein Verhältnis von mindestens 3:1 ausreichend.

Weiße Überschrift auf hellgrünem Hintergrund; die Kontrastanforderungen der WCAG 2.1 sind laut Colour Contrast Analyzer nicht erfüllt Weiße Überschrift auf dunkelgrünem Hintergrund; die Kontrastanforderungen der WCAG 2.1 sind laut Colour Contrast Analyzer erfüllt

Ein Hilfsmittel, mit dem sich das Kontrastverhältnis von Farben einfach ermitteln lässt, ist der Colour Contrast Analyser der Paciello Group: https://developer.paciellogroup.com/resources/contrastanalyser/

Weitere Hinweise zum Thema Kontrast und Farben finden Sie unter: http://leserlich.info/kapitel/farben.php


Türchen 11: Wie lässt sich die Auffindbarkeit von Seitenzahlen optimieren?

Bereits in Türchen 10 wurde die Seitennavigation (Pagelist) als effizientes Mittel erwähnt, um die in einem EPUB hinterlegten statischen Seitenzahlen (beispielsweise aus einer zugehörigen Printfassung) auffindbar und ansteuerbar zu machen.

Ähnlich der TOC-Navigation handelt es sich bei der Seitennavigation um ein „übergeordnetes“ Navigationsmenü. Es kann (bei entsprechender Reader-Unterstützung) jederzeit vom Leser aufgerufen werden und ermöglicht die zielgerichtete Navigation zu einer beliebigen Seite der Publikation.

Screenshot eines E-Books; über dem Textinhalt schwebt ein Navigationsmenü mit Seitenzahlen

Angelegt wird die Seiten-Navigation als geordnete Link-Liste im Navigationsdokument des EPUB’s. Sie erhält das epub:type-Attribut „page-list“:

<nav epub:type="page-list" role="doc-pagelist">
<ol>
<li><a href="Kapitel_1.xhtml#seite_1">1</a></li>
<li><a href="Kapitel_1.xhtml#seite_2">2</a></li>
<li><a href="Kapitel_1.xhtml#seite_3">3</a></li>
<li><a href="Kapitel_1.xhtml#seite_4">4</a></li>
<li><a href="Kapitel_2.xhtml#seite_5">5</a></li>
<li><a href="Kapitel_2.xhtml#seite_6">6</a></li>

</ol>
</nav>

Weitere Infos zum Umgang mit Seitenzahlen sowie zur Umsetzung einer Seiten-Navigation finden sich unter: http://kb.daisy.org/publishing/docs/navigation/pagelist.html


Türchen 10: Sichtbar vs. Unsichtbar – Sollten Seitenzahlen im EPUB visuell dargestellt werden?

Wie unter der Frage „Braucht ein E-Book Seitenzahlen?“ bereits erwähnt, bietet EPUB mithilfe des Attributes epub:type="pagebreak" die Möglichkeit, statische Seitenzahlen (beispielsweise aus einer zugehörigen Printausgabe) im E-Book zu hinterlegen. Dabei gibt es zwei verschiedene Möglichkeiten der Darstellung – visuell sichtbar oder unsichtbar.

Screenshot eines E-Books: eine Seitenzahl steht in geschwungenen Klammern im Fließtext; sie unterbricht das Wort "endlich" wie folgt: "end{7}lich"

Da sichtbare Seitenzahlen im Text sowohl den Lesefluss als auch die Suchfunktion beeinträchtigen können, empfehlen wir von einer visuellen Ausgabe abzusehen und die Seitenzahlen lediglich wie folgt im Quelltext des EPUB‘s zu hinterlegen:

<span id="seite_1" title="1" epub:type="pagebreak" role="doc-pagebreak"/>

Aktuell besteht der Nachteil dieser Darstellungsweise darin, dass statische Seitenzahlen noch nicht von allen EPUB-Readern hinreichend unterstützt werden. Zwar ist es häufig möglich einzelne Seiten über eine Seitennavigation (Pagelist) anzusteuern, allerdings ist es für die LeserInnen schwer aus dem Text heraus festzustellen, auf welcher Seite sie sich gerade befinden.

Einen guten Lösungsansatz hierfür zeigt Appel’s iBooks-Reader. Über das Menü „Inhalt“ haben LeserInnen die Wahl selbst zu entscheiden, ob sie die originalen Printseitenzahlen oder die von iBooks dynamisch generierten Seitenangaben verwenden möchten.

Screenshot des Inhalts-Menüs von iBooks: unterhalb des Inhaltsverzeichnisses befindet sich die Option "Gedruckte Seitenzahlen anzeigen"   Screenshot eines E-Books in iBooks: am linken Textrand sowie unterhalb des Textfeldes werden die Print-Seitenzahlen angezeigt


Türchen 9: Braucht ein E-Book Seitenzahlen?

Einer der größten Vorteile von EPUB-Publikationen liegt in ihrem „reflowable Layout“.
Anders als bei seitenbasierten Formaten wie PDF gilt bei der Darstellung von EPUB-Publikationen: Seite ist nicht gleich Seite! Je nach Größe des Ausgabebildschirms und in Abhängigkeit der individuellen Einstellungen des Lesers, variiert die Menge an Inhalten, die auf einer virtuellen Seite im EPUB-Reader abbildet werden kann.

Dieser Umstand macht es für die NutzerInnen digitaler Publikationen schwer, sich mit anderen LeserInnen medien- und geräteübergreifend über determinierte Textstellen zu verständigen. Und auch das wissenschaftliche Arbeiten mit digitalen Quellen gestaltet sich schwierig.

Abhilfe kann hier die Verwendung einheitlicher Seitenzahlen, sowohl in der Print- als auch in der zugehörigen elektronischen Fassung, schaffen.
(Seitenzahlen können im EPUB mithilfe des Attributes epub:type="pagebreak" hinterlegt werden. Wie das genau funktioniert und worauf bei der Einbindung statischer Seitenzahlen zu achten ist, soll an anderer Stelle geklärt werden… )

Doch da es auch bei verschiedenen Printfassungen eines Titels Unterschiede in der Paginierung geben kann, ist es wichtig, bei der Verwendung statischer Seitenzahlen im EPUB die zugehörige Printquelle in den Metadaten der Publikation anzugeben. Als eindeutige Referenz bietet sich hierfür die ISBN des gedruckten Buches an, wie in folgendem Beispiel:

<metadata>

<dc:source>urn:isbn:9783XXXXXXXXX</dc:source>

</metadata>

Sollte die ISBN-Nummer nicht zur Verfügung stehen, gilt es möglichst viele sonstige Informationen zur Originalquelle, wie beispielsweise den Verlag, die Auflage, das Erscheinungsdatum, die Art der Bindung (Hard- oder Softcover) etc., anzugeben. Nur so ist für die LeserInnen von elektronischer und gedruckter Fassung erkennbar, ob sie von einheitlichen Seitenangaben ausgehen können.


Türchen 8: Was gilt es bei der Auszeichnung von Glossaren zu beachten?

Unter der Frage „Web vs. Print – Wie können Buch-spezifische Strukturen im EPUB ausgezeichnet werden?“ wurde bereits die Einsatzmöglichkeit des epub:type-Attributes zur semantischen Auszeichnung Buch-spezifischer Strukturen erläutert. Eine Struktur, an der sich das Zusammenspiel von HTML-Elementen und epub:type-Attributen besonders gut zeigen lässt, sind Glossare.

Das Glossar, auch Wörterverzeichnis genannt, ist eine Struktur, die sich in vielen Büchern wiederfindet. Sie besteht in der Regel aus mehreren Einträgen, die sich aus einem Wort und einer zugehörigen Beschreibung oder Erklärung zusammensetzen.

Screenshot eines Glossars in einem E-Book; es enthält die drei Begriffe „Pfefferkuchen“, „Christstollen“ und „Vanillekipferl“; unter den Begriffen jeweils eingerückt eine kurze Erläuterung

Verzeichnisse sollten in HTML üblicherweise als Listen (<ul>, <ol> oder <dl>) ausgezeichnet werden, denn Listen eignen sich gut für die Ausgabe mit assistiven Technologien. Im Falle eines Glossars bietet sich die Verwendung der Description List <dl> an.
Doch um semantisch zu kennzeichnen, dass es sich bei der Liste nicht um irgendeine Description List handelt, sondern explizit um ein Glossar, sollte die semantische Bedeutung mithilfe des Attributes epub:type="glossary" (bzw. „glossterm“ und „glossdef“) näher spezifiziert werden:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="de" xml:lang="de">

<dl epub:type="glossary" role="doc-glossary">
<dt epub:type="glossterm">Pfefferkuchen</dt>
<dd epub:type="glossdef">auch Lebkuchen genannt; zuckerreiches, eher trockenes Weihnachtsgebäck, das typischerweise mit Ingwer, Kardamom, Koriander, Muskat, Nelken und Zimt gewürzt ist</dd>
<dt epub:type="glossterm">Christstollen</dt>
<dd epub:type="glossdef">in Puderzucker gehülltes Weihnachtsgebäck aus Hefeteig, üblicherweise bestückt mit Trockenfrüchten, wie Rosinen </dd>
<dt epub:type="glossterm">Vanillekipferl</dt>
<dd epub:type="glossdef">sichelförmige, mit Puderzucker bestreute Weihnachtsplätzchen aus einem Mürbeteig mit Nüssen oder Mandeln</dd>
</dl>

</html>

Durch das Zusammenspiel von HTML-Elementen und epub:type-Attributen kann die semantische Struktur des Glossars eindeutig abgebildet werden.


Türchen 7: Web vs. Print – Wie können Buch-spezifische Strukturen im EPUB ausgezeichnet werden?

Es besitzt Tags und Links und ist doch keine Website…
Es hat weder Buchrücken noch Kapitalband und ist doch ein Buch…

Eine EPUB-Publikation vereint charakteristische Merkmale aus Print und Web. Technisch basiert das Format EPUB auf bestehenden Webtechnologien, wie der Auszeichnungssprache HTML 5. Die inhaltliche Struktur von EPUB-Dokumenten orientiert sich jedoch häufig noch stark am gedruckten Buch.

Um diese Lücke zu schließen, bietet EPUB 3 mit dem Structural Semantics Vocabulary eine Möglichkeit, um die strukturierten Inhalte eines XHTML-Dokumentes mit zusätzlicher Buch-spezifischer Semantik anzureichern. Dabei werden die HTML-Elemente der betreffenden Inhaltsstrukturen mit einem epub:type-Attribut versehen, dessen Wert die semantische Bedeutung genauer spezifiziert.

Die folgenden Beispiele zeigen klassische Buch-spezifische Strukturen, die mithilfe von epub:type-Attributen ausgezeichnet werden können:

  • epub:type="cover" zur Kennzeichnung eines Kapitels als Cover
  • epub:type="foreword" zur Kennzeichnung eines Kapitels als Vorwort
  • epub:type="appendix" zur Kennzeichnung eines Kapitels als Anhang
  • epub:type="biblioentry" zur Kennzeichnung eines Listeneintrages <li> als Eintrag eines Literaturverzeichnisses
  • epub:type="footnote" zur Kennzeichnung sekundärer Inhalte als Fußnote

Weitere semantische Begriffe sowie Informationen zu deren Nutzungskontext finden sich unter: https://idpf.github.io/epub-vocabs/structure/


Türchen 6: Warum ist die Definition der Dokumentsprache so wichtig?

Um eine korrekte Sprachausgabe von Text-Inhalten per Screenreader zu gewährleisten, ist es wichtig, die Hauptsprache eines jeden Inhaltsdokumentes zu definieren. Dies sollte wie in dem folgenden Beispiel mithilfe der Attribute lang und xml:lang erfolgen:
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">

Zwar gibt es bereits clevere Reader, die die Sprache eines Textes auch eigenständig erkennen können. Doch was passiert, wenn ein Text in der falschen Sprache vorgelesen wird, zeigt das folgende Hörbeispiel:

Alternativtext: Im Hörbeispiel wird ein deutscher Text mit der Überschrift „Die DZB“ von einem Screenreader mit einer englischen Aussprache vorgelesen. Im Englischen bedeutet das Wort „die“ so viel wie „stirb“…

Wir stellen fest: Sprachauszeichnungen retten Leben!


Türchen 5: Müssen Schmuckgrafiken mit einem Alternativtext versehen werden?

In den vorangegangenen Fragen konnte bereits geklärt werden, wie informative Abbildungen mit einer alternativen Beschreibung versehen werden können. Doch nicht jede Abbildung hat per se einen informativen Charakter, wie das folgende Beispiel zeigt:

Screenshot eines E-Books; unterhalb der Überschrift befindet sich als Schmuckgrafik eine Schneeflocke

Abbildungen, wie diese Schmuckgrafik, dienen einem rein dekorativen Zweck. Sie transportieren keine Inhalte und müssen daher auch nicht zwingend mit einem Alternativtext versehen werden. Umso wichtiger ist es jedoch, dekorative Abbildungen auch semantisch als solche zu kennzeichnen. Dafür sieht die HTML-Spezifikation die Verwendung eines leeren alt-Attributes alt="" vor.

In der Praxis erweist sich diese Auszeichnungsweise jedoch als wenig aussagekräftig. Nicht selten kommt es vor, dass auch informative Grafiken fälschlicherweise ein leeres alt-Attribut enthalten. Dies führt nicht nur zu einem Informationsverlust für blinde LeserInnen, sondern hat außerdem zur Folge, dass der fehlende Alternativtext bei einer automatisierten Barrierefreiheitsprüfung nicht als Fehler erkannt werden kann. Denn grundsätzlich ist ein leeres alt-Attribut ja erlaubt – nur eben nicht bei informativen Abbildungen!

Aus diesem Grund empfehlen wir die zusätzliche Auszeichnung dekorativer Abbildungen mithilfe des ARIA-Attributes role="presentation". Dieses macht die entsprechenden Bilder für Assistive Technologien eindeutig identifizierbar.

<img src="snowflake.png" alt="" role="presentation"></img>


Türchen 4: Was tun, wenn ein kurzer Alternativtext nicht ausreicht, um ein Bild zu beschreiben?

In Türchen 3 wurde bereits die Frage behandelt, wie Alternativtexte für Abbildungen erstellt werden. Dabei wurde unter anderem darauf hingewiesen, dass ein Alternativtext die maximale Länge von 80 Zeichen nicht überschreiten sollte.

Bei komplexeren Grafiken, wie beispielsweise Diagrammen oder schematischen Darstellungen, sind diese 80 Zeichen jedoch oft nicht ausreichend, um alle relevanten Informationen der Abbildung zu vermitteln. In diesem Fall kann es sinnvoll sein, zusätzlich zum alt-Attribut eine weitere, ausführlichere Bildbeschreibung bereitzustellen.

Im einfachsten Fall ist diese Beschreibung bereits im primären Textinhalt (vor oder hinter der betreffenden Abbildung) enthalten. Dann sollte im Alternativtext der Abbildung (zusätzlich zum dargestellten Gegenstand) ein kurzer Hinweis zur Position der ausführlichen Beschreibung ergänzt werden, z.B. „Details im folgenden Text“.

Kommt eine Beschreibung der Abbildung im Mengentext nicht in Frage, so kann die ausführliche Beschreibung auch als sekundärer Inhalt in das EPUB eingebunden werden. Dies kann entweder mithilfe des <aside>-Elementes im selben Inhaltsdokument erfolgen oder ausgelagert in einem separaten Inhaltsdokument.
Letzteres soll anhand des folgenden Beispiel-Diagramms veranschaulicht werden:

Kreisdiagramm mit den Ergebnissen zur Umfrage „Freuen Sie sich auf Weihnachten?“ (Deutschland, 2016)
Abbildung 3.1: Umfrage zur Vorfreude der Deutschen auf Weihnachten (Quelle: das Diagramm beruht auf den Daten einer Umfrage von Statista https://de.statista.com/statistik/daten/studie/642782/umfrage/vorfreude-auf-weihnachten-in-deutschland/)

Das Diagramm wird wie üblich samt Alternativtext und Bildunterschrift im EPUB eingebunden (hier im Inhaltsdokument Kapitel_3.xhtml). Ein Link in der Bildunterschrift referenziert die ausführliche Beschreibung, die sich in einem anderen Inhaltsdokument (hier Description.xhtml) befindet:

<figure id="fig_3_1">
<img src="images/Diagramm.png" alt="Ergebnisse der Umfrage „Freuen Sie sich auf Weihnachten?“ in Deutschland 2016"></img>
<figcaption>Abbildung 3.1: Umfrage zur Vorfreude auf Weihnachten <a href="Description.xhtml#desc_3_1">(Bildbeschreibung)</a></figcaption>
</figure>

Die ausführliche Beschreibung wird im Inhaltsdokument Description.xhtml angelegt. Dass es sich dabei um sekundäre Inhalte außerhalb des primären Leseflusses handelt, kann mithilfe des Attributes linear="no" im Spine des Package-Dokumentes (.opf) festgelegt werden.
Wichtig ist es darauf zu achten, dass die Beschreibung einen Back-Link zurück zur Abbildung enthält:

<div id="desc_3_1">
<p><a epub:type="backlink" role="doc-backlink" href="Kapitel_3.xhtml#fig_3_1">Abbildung 3.1</a></p>
<p>Das Kreisdiagramm trägt die Überschrift „Freuen Sie sich auf Weihnachten?“, ergänzt durch den Zusatz „(Deutschland, 2016)“.</p>
<p>Das Kreisdiagramm ist in 5 Kreissektoren eingeteilt. Diese zeigen im Uhrzeigersinn die folgenden Werte:</p>
<ul>
<li>34% „freuen sich sehr auf Weihnachten “</li>
<li>38% „freuen sich eher auf Weihnachten“</li>
<li>15% „freuen sich eher nicht auf Weihnachten“</li>
<li>8% „freuen sich überhaupt nicht auf Weihnachten“</li>
<li>5% „keine Angabe“</li>
</ul>
</div>


Türchen 3: Wie werden Alternativtexte verfasst?

Alternativtexte sind ein wichtiges und effizientes Mittel, um Abbildungen – seien es Fotos, Grafiken, Landkarten, Illustrationen oder Ähnliches – für blinde Menschen zugänglich zu gestalten.

Technisch betrachtet, ist die Einbindung von Alternativtexten in einer EPUB-Publikation einfach zu realisieren. Mithilfe des alt-Attributes lassen sich <img>-Elemente mit einer alternativen Textbeschreibung versehen. Bei der Nutzung nicht-visueller Ausgabesysteme, wie Screenreader oder Braillezeile, wird dieser Text dann anstelle der Abbildung wiedergegeben.

Doch so einfach die technische Umsetzung auch ist – redaktionell stellt das Verfassen von Alternativtexten häufig eine Herausforderung dar. Daher haben wir im Folgenden die wichtigsten Grundsätze zum Verfassen von Alternativtexten aus dem DIAGRAM Center und dem BITV-Test zusammengefasst:

  • Zweckgebundenheit: Alternativtexte fungieren als Ersatz für die visuelle Abbildung und sollten daher denselben Zweck erfüllen.
  • Prägnanz: Alternativtexte sollten kurz und prägnant gehalten werden, d.h. so wenig Text wie möglich, aber so viel wie nötig.
  • Zeichenmenge: Als grober Richtwert für die Länge von Alternativtexten gilt ein Maximum von 80 Zeichen.
  • Kontextgebundenheit: Inhalt und Detailgrad sind abhängig vom Kontext, in dem eine Abbildung auftritt.
  • Zielgruppenanpassung: Sprache und Vokabular sollten an die Zielgruppe angepasst werden.
  • Objektivität: Alternativtexte sollten möglichst objektiv formuliert werden, d.h. ohne Analyse oder eigene Interpretation.
  • Gliederung: Die Inhalte sollten logisch aufgebaut und gegliedert sein, vom Allgemeinen zum Speziellen.
  • Art: Die Art der Abbildung sollte – sofern relevant – möglichst spezifisch benannt werden, z.B. Foto, Landkarte, Illustration, Mind-Map, etc..
  • Einleitung: Auf einleitende Prosa, wie „Die Abbildung zeigt …“ oder „zu sehen ist …“, sollte verzichtet werden.
  • Wiederholungen: Alternativtexte sollten keine Wiederholung anderer Texte, wie z.B. Bildunterschriften, darstellen.

Im Folgenden soll die Bedeutung dieser Grundsätze anhand zweier Beispiel-Bilder verdeutlicht werden. Beide Abbildungen haben ein ähnliches Motiv. Sie zeigen Rentiere, die vor einen Schlitten gespannt sind. Formal gesehen wäre der Alternativtext alt="Rentiere mit Schlitten" also für beide Abbildungen zutreffend, jedoch wenig aussagekräftig.
Passendere Alternativtexte – unter Berücksichtigung des Zwecks, der Zielgruppe, des Kontextes und der Art der jeweiligen Abbildung – könnten wie folgt formuliert werden:

Abbildung 1

Illustration vom Rentier Rudolph mit der roten Nase, das einen fliegenden Weihnachtsschlitten anführt

Die erste Abbildung taucht in einem Buch mit Weihnachtsliedern für Kinder auf, in dem es den Song „Rudolph, the Red-Nosed Reindeer“ illustriert.

Der Zweck der Abbildung liegt hier vornehmlich in der Illustration des Weihnachtsgedichtes. Der Informationsgehalt der Abbildung ist eher gering. Daher reicht ein kurzer Alternativtext, der das Wesentliche des Bildes beschreibt, zum Beispiel:

alt="Rudolph, das Rentier mit der roten Nase, führt den Weihnachtsschlitten an"

Abbildung 2

Foto: vier in Fell gekleidete indigene Jäger mit ihren vor Holzschlitten gespannten Rentieren

Die zweite Abbildung erscheint in einem Schulbuch der 9. Klasse im Fach Erdkunde, in dem die Lebensweise indigener Völker im hohen Norden thematisiert wird. Das Bild ist mit einer Abbildungsunterschrift versehen, die da lautet: „Indigenes Volk aus Arkhangelsk (Russland) bricht auf zur Jagd“.

Über die Bildunterschrift erhält der Leser bereits einige Informationen zum Kontext der Abbildung. Diese dient vor allem dazu, dem Betrachter ein möglichst reales Vorstellungsbild des Volkes zu vermitteln. Aus diesem Grund sollte auch die Bildbeschreibung etwas detaillierter ausfallen, zum Beispiel:

alt="Foto: vier in Fell gekleidete Jäger mit ihren vor Holzschlitten gespannten Rentieren"


Türchen 2: Was sollte bei der Auszeichnung von Zitaten beachtet werden?

Wenn uns bewußt wird, daß die Zeit, die wir uns für einen anderen Menschen nehmen, das Kostbarste ist, was wir schenken können, haben wir den Sinn der Weihnacht verstanden.
Roswitha Bloch

Ob lang, ob kurz, ob inline oder als eigener Absatz – Zitate kommen in (elektronischen) Publikationen in den verschiedensten Variationen vor.

Längere Zitate, wie das oben stehende Weihnachtszitat von Roswitha Bloch, erhalten dabei häufig eine besondere Gestaltung. Rahmen, Einrückungen oder ein kursiver Schriftschnitt sorgen dafür, dass  sich ein Zitat optisch vom übrigen Text abhebt.
Doch damit das Zitat auch für Screenreader-NutzerInnen als solches erkennbar ist, muss die entsprechende Textpassage im EPUB semantisch ausgezeichnet werden.
Für längere Zitate sollte dabei das HTML-Element <blockquote> verwendet werden, wie in folgendem Beispiel:

<blockquote cite=“https://www.aphorismen.de/zitat/174459“>
<p>Wenn uns bewußt wird, daß die Zeit, die wir uns für einen anderen Menschen nehmen, das Kostbarste ist, was wir schenken können, haben wir den Sinn der Weihnacht verstanden.</p>
<footer><cite>Roswitha Bloch</cite></footer>
</blockquote>

Für Inline-Zitate, die lediglich Teil eines Satzes sind, schlägt die HTML-Spezifikation das Element <q> vor. Doch Achtung: Die meisten Lesesystemen setzen den Inhalt des <q>-Elementes bei der visuellen Ausgabe in Anführungszeichen „…“. Dies kann zu unerwünschten Dopplungen führen, wenn das Zitat im Text bereits in Anführungszeichen gesetzt ist. In diesem Fall kann auf die Verwendung des <q>-Elementes getrost verzichtet werden!

So weit, so gut. Die Auszeichnung von Zitate wäre fürs Erste geklärt. Doch was ist mit der Quellenangabe? Um die Quelle eines Zitates auszuzeichnen, bietet HTML zwei Möglichkeiten: das <cite>-Element und das cite-Attribut.

Mithilfe des cite-Attributes lässt sich ein Zitate mit einer URL versehen, die das Quelldokument referenziert, von der die zitierten Inhalte ursprünglich stammen (im Beispiel die Seite aphorismen.de). Bei der Darstellung des EPUB’s mit visuellen Ausgabegeräten ist diese URL in der Regel nicht sichtbar.

Zur Auszeichnung sichtbarer Quellenangaben im Text eignet sich das <cite>-Element. Im Beispiel wurde damit die Autorin Roswitha Bloch ausgezeichnet. Ebenso könnte als Quellenangabe jedoch auch der Titel eines kreativen Werkes, eine URL zum Werk oder eine abgekürzte Literaturangabe (wie häufig  in wissenschaftlichen Publikationen zu finden) dienen.

Rückblick: Das <cite>-Element zur Auszeichnung von Autoren? Das war nicht immer so! In der Vergangenheit war die Verwendung des Elementes umstritten. So durfte das <cite>-Element lediglich zur Auszeichnung des Titels eines kreativen Werkes verwendet werden, nicht aber zur Auszeichnung von Personen (Künstlern, Autoren, Urhebern kreativer Werke).
Mehr Informationen zur Entwicklungsgeschichte von Zitaten und Literaturangaben in HTML finden sich in den folgenden Artikeln http://html5doctor.com/blockquote-q-cite/ und http://html5doctor.com/cite-and-blockquote-reloaded/.


Türchen 1: Warum ist die Erstellung einer TOC-Navigation so wichtig?

Laut einer Umfrage von Booknet Canada gehört das Inhaltsverzeichnis, im Englischen Table of Content (TOC), zu den wichtigsten Navigationsfunktionen digitaler Bücher. 67% der LeserInnen digitaler Publikationen gaben an, die TOC-Navigation bei der Suche von Informationen zu nutzen. (vgl. https://www.booknetcanada.ca/blog/2018/8/1/how-do-readers-use-ebooks?rq=Table%20of%20Content)

Auch für Screenreader-NutzerInnen stellt die TOC-Navigation ein wichtiges Navigationsmittel dar. Doch warum ist das so?

Üblicherweise verwenden Screenreader-NutzerInnen die Tastatur, um auf Webseiten oder in digitalen Dokumenten selektiv navigieren zu können. Mithilfe entsprechender Tastaturbefehle können sie beispielsweise zum nächsten Link oder von Überschrift zu Überschrift zu springen.

Da sich eine EPUB-Publikation in der Regel jedoch aus mehreren XHTML-Dokumenten zusammensetzt, kann es bei der Tastaturbedienung zu Problemen kommen, wenn per Tastaturbefehl eine Überschrift außerhalb des aktuellen Inhaltsdokumentes angesteuert werden soll.

Abhilfe schafft hier die TOC-Navigation. Diese steht in den meisten EPUB-Readern als „übergeordnetes“ Navigationsmenü zur Verfügung und ermöglicht so eine Inhaltsdokumente-übergreifende Navigation im EPUB.

Screenshot eines E-Books; über dem Textinhalt schwebt ein Navigationsmenü (TOC)

Angelegt wird die TOC-Navigation als (verschachtelte) geordnete Link-Liste im Navigationsdokument des EPUB’s. Wichtig dabei: Um zu gewährleisten, dass sich alle Inhalte des E-Books gezielt ansteuern lassen, sollte die TOC-Navigation die gesamte Buchstruktur abbilden. Dabei sollte jedes Inhaltsdokument über mindestens einen Link erreichbar sein.

 

One Reply to “Wir öffnen Türen…”

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.