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.
Eine Zusammenfassung der 24 Tipps steht als elektronische Publikation in den Formaten EPUB und PDF zum Download zur Verfügung.
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!
- Türchen 1: Warum ist die Erstellung einer TOC-Navigation so wichtig?
- Türchen 2: Was sollte bei der Auszeichnung von Zitaten beachtet werden?
- Türchen 3: Wie werden Alternativtexte verfasst?
- Türchen 4: Was tun, wenn ein kurzer Alternativtext nicht ausreicht, um ein Bild zu beschreiben?
- Türchen 5: Müssen Schmuckgrafiken mit einem Alternativtext versehen werden?
- Türchen 6: Warum ist die Definition der Dokumentsprache so wichtig?
- Türchen 7: Web vs. Print – Wie können Buch-spezifische Strukturen im EPUB ausgezeichnet werden?
- Türchen 8: Was gilt es bei der Auszeichnung von Glossaren zu beachten?
- Türchen 9: Braucht ein E-Book Seitenzahlen?
- Türchen 10: Sichtbar vs. Unsichtbar – Sollten Seitenzahlen im EPUB visuell dargestellt werden?
- Türchen 11: Wie lässt sich die Auffindbarkeit von Seitenzahlen optimieren?
- Türchen 12: Das Zusammenspiel von Farben – Wann ist der Kontrast zwischen Text und Hintergrund ausreichend?
- Türchen 13: Was gilt es beim Einsatz von Fußnoten im EPUB zu beachten?
- Türchen 14: Epub:type-Attribut vs. ARIA’s role-Attribut – Was ist der Unterschied?
- Türchen 15: Überschriften mit Untertitel? – Ja! Aber wie?
- Türchen 16: Warum ist der Einsatz des <section>-Elementes zur Gliederung eines EPUB’s sinnvoll?
- Türchen 17: Wie lässt sich die Auffindbarkeit zugänglicher EPUB-Publikationen verbessern?
- Türchen 18: Was gilt es bei der Auszeichnung von Datentabellen zu beachten?
- Türchen 19: Datentabelle vs. Layouttabelle – was ist der Unterschied?
- Türchen 20: Wie können komplexe Datentabellen barrierefrei aufbereitet werden?
- Türchen 21: Abbildungs- und Tabellenverzeichnisse – Wie lässt sich die Navigation im EPUB verbessern?
- Türchen 22: Wie lässt sich die Zugänglichkeit von Abkürzungen optimieren?
- Türchen 23: Wie können Initialen im EPUB barrierefrei umgesetzt werden?
- Türchen 24: Wie lässt sich feststellen, ob eine EPUB-Publikation barrierefrei ist?
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.
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.
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 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
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
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 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:
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 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:
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 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 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 Coverepub:type="foreword"zur Kennzeichnung eines Kapitels als Vorwortepub:type="appendix"zur Kennzeichnung eines Kapitels als Anhangepub:type="biblioentry"zur Kennzeichnung eines Listeneintrages<li>als Eintrag eines Literaturverzeichnissesepub: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 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.
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 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 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.
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.
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.
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 12: Das Zusammenspiel von Farben – Wann 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.
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 13: Was gilt es beim Einsatz von Fußnoten im EPUB zu beachten?
Fuß- und Endnoten sind ein beliebtes Mittel, um primäre Textinhalte – seien es einzelne Wörter oder längere Textpassagen – mit zusätzlichen Anmerkungen, Erklärungen, Beschreibungen oder auch Quellenangaben zu versehen.
In der Regel sind diese Zusatzinformationen zwar nicht essentiell, um dem Hauptinhalt einer Publikation folgen zu können, aber dennoch wichtig genug, um im Werk Erwähnung zu finden. Entsprechend sollte bei der Umsetzung im EPUB darauf geachtet werden, dass die Fuß- bzw. Endnoten-Inhalte sowohl für sehende LeserInnen als auch für Screenreader-NutzerInnen einfach zu erreichen sind – ohne dabei den primären Lesefluss zu stören. Das heißt die Zusatzinformationen sollten – sofern nicht benötigt – überspringbar sein.
Wie genau dies umgesetzt werden kann, soll im Folgenden anhand einiger Code-Ausschnitte erläutert werden.
Verweiszeichen
Zunächst gilt es das Verweiszeichen im Text (auch Fußnoten- bzw. Endnotenzeiger genannt) zu kennzeichnen. Dieses fungiert später als Link, über den die Fuß- oder Endnote aufgerufen werden kann. Es wird mit dem <a>-Element ausgezeichnet und erhält den epub:type-Attributwert „noteref“:
<p>Wenn ihr nicht wißt, was ein Greif ist, seht euch das Bild an. <a id="ref_1" href="#note_1" epub:type="noteref" role="doc-noteref">1</a></p>
Fußnote
Zur Auszeichnung der Fußnote bietet sich das <aside>-Element an, denn es kennzeichnet die Zusatzinformationen als sekundären Inhalt, der nicht zum primären Mengentext gehört. Ergänzt durch das Attribut epub:type="footnote" wird die Semantik des sekundären Inhalts genauer spezifiziert:
<aside id="note_1" epub:type="footnote" role="doc-footnote">
<p><a href="#ref_1" role="doc-backlink">1</a></p>
<p>Ein Greif ist ein Fabelwesen, halb Adler, halb Löwe. Er besitzt einen Löwenschwanz, zwei Hinterbeine mit Pfoten und Krallen, die Vorderbeine eines Vogels, zwei Flügel und einen Schnabel.</p>
</aside>
Achtung: Um den primären Lesefluss nicht zu stören, sollte das <aside>-Element nicht direkt im Text, sondern nach Möglichkeit an einer logischen Stelle, beispielsweise am Ende eines inhaltlich Absatzes, platziert werden.
Endnote
Alternativ können die Zusatzinformationen auch ans Ende des Kapitels oder in ein separates Inhaltsdokument ausgelagert werden. In diesem Fall sprechen wir nicht mehr von Fußnoten, sondern von (einer Sammlung von) Endnoten.
Im Sinne einer guten Screenreader-Navigation sollten Sammlungen mehrerer Endnoten als Liste ausgezeichnet werden. Und wieder dient das epub:type-Attribut – diesmal mit den Werten „endnote“ bzw. „endnotes“ – der genaueren semantischen Auszeichnung der Endnoten:
<ol epub:type="endnotes" role="doc-endnotes">
<li id="note_1" epub:type="endnote" role="doc-endnote">
<p>Ein Greif ist ein Fabelwesen, halb Adler, halb Löwe. Er besitzt einen Löwenschwanz, zwei Hinterbeine mit Pfoten und Krallen, die Vorderbeine eines Vogels, zwei Flügel und einen Schnabel.</p>
<p><a href="Kapitel_1.xhtml#ref_1" role="doc-backlink">Zurück zum Verweiszeichen</a></p>
</li>
<li id="note_2">
<p>…</p>
<p><a href="Kapitel_1.xhtml#ref_2" role="doc-backlink">Zurück zum Verweiszeichen</a></p>
</li>
<li id="note_3">
<p>…</p>
<p><a href="Kapitel_2.xhtml#ref_3" role="doc-backlink">Zurück zum Verweiszeichen</a></p>
</li>
</ol>
Um deutlich zu machen, dass es sich bei den Inhalten des Endnoten-Dokumentes um sekundäre Inhalte handelt, kann das Inhaltsdokument mithilfe des Attributes linear="no" (im Spine des Package-Dokumentes) aus dem primären Lesefluss ausgenommen werden.
In modernen Lesesystemen führt der Einsatz der epub:type-Attribute „footnote“ und „endnote“ dazu, dass Fuß- bzw. Endnoten in Form von Pop-up-Fenstern ausgegeben werden.
Da jedoch nicht alle Lesesysteme diese Pop-up-Funktion unterstützen, sollte beim Anlegen von Fuß- und Endnoten im EPUB auf die Bereitstellung eines Back-Links geachtet werden, der die LeserInnen aus dem sekundären Inhalt zurück in den Haupttext führt.
Weitere Informationen zur Einbindung von Fuß- und Endnoten im EPUB finden Sie in der Accessible Publishing Knowledge Base unter: http://kb.daisy.org/publishing/docs/html/notes.html
Türchen 14: Epub:type-Attribut vs. ARIA’s role-Attribut – Was ist der Unterschied?
Vielleicht ist es Ihnen bereits aufgefallen: in vielen unserer Code-Beispiele findet sich neben dem epub:type-Attribut zusätzlich ein role-Attribut. Doch was hat es mit diesem Attribut eigentlich auf sich? Es wird Zeit, das Geheimnis zu lüften…
Das role-Attribut stammt aus der Spezifiktion Accessible Rich Internet Applications (WAI-ARIA). Diese wurde von der Web Accessibility Initiative entwickelt, um die Zugänglichkeit von Webanwendungen und Webseiten mit assitiven Technologien zu verbessern.
Vor allem bei dynamischen Inhalten oder interaktiven Bedienelementen ist die Anwendung der WAI-ARIA Techniken häufig essentiell, um sicherzustellen, dass sämtliche Inhalte und Funktionalitäten einer Webseite auch per Screenreader und/oder Tastatur zugänglich und bedienbar sind.
Zum Beispiel bietet WAI-ARIA mit dem role-Attribut eine Möglichkeit, um Elemente, die in HTML nicht vorgesehen sind (wie beispielsweise Slider, Tabpanels oder Tree Views), mit einer Semantik zu versehen, die für Screenreader erkennbar ist.
Auch in elektronischen Publikationen eignet sich der Einsatz des role-Attributes als semantische Erweiterung von HTML. Denn wie in Türchen 7 unter der Frage „Wie können Buch-spezifische Strukturen im EPUB ausgezeichnet werden?“ bereits erläutert, ist HTML allein nicht immer ausreichend, um die Semantik Buch-spezifischer Inhalte hinreichend auszuzeichnen.
Doch worin besteht denn nun der Unterschied zwischen dem epub:type-Attribut und dem ARIA role-Attribut? – Wenngleich sich die beiden Attribute in ihrer Verwendung ähneln, so dienen sie doch einem unterschiedlichen Zweck.
Die semantischen Informationen, die durch den Einsatz des epub:type-Attributes im EPUB angereichert werden, dienen in erster Linie dazu, das Verhalten (d.h. die Ausgabe und Funktionalität) der Lesesysteme zu verbessern. Dies zeigt sich am deutlichsten am Beispiel der Fuß- und Endnoten, die durch die Auszeichnung mit dem Attribut epub:type="footnote" bzw. epub:type="endnote" als Pop-up-Fußnoten ausgegeben werden können – siehe Türchen 13.
Assistive Technologien greifen auf die Semantik der epub:type-Attribute jedoch nicht zurück. Sie interpretieren stattdessen die semantischen Informationen, die mithilfe des ARIA role-Attributes im EPUB angereichert werden. Besonders relevant sind für elektronische Publikationen die role-Attributwerte, die im Digital Publishing WAI-ARIA Module 1.0 definiert sind. Dazu gehören unter anderem die Rollen role="doc-footnote" zur semantischen Auszeichnung von Fußnoten oder role="doc-endnote" für Endnoten.
Wie anhand der Beispiele deutlich wird, vermitteln das epub:type- und das role-Attribut häufig dieselbe Semantik. Da beide Attribute jedoch einen unterschiedlichen Zweck erfüllen, sollten nach Möglichkeit auch beide im EPUB verwendet werden. Denn nur so lässt sich eine nutzerfreundliche Bedienbarkeit sowohl für sehende als auch für blinde LeserInnen erreichen.
Eine Übersicht aller epub:type-Attribute und ihrer entsprechenden role-Attribute findet sich unter: https://idpf.github.io/epub-guides/aria-mapping/
Doch Achtung: Abschließend sei angemerkt, dass ein falscher Einsatz des role-Attributes die Semantik (und damit auch die Zugänglichkeit) einer Publikation auch beeinträchtigen kann. Daher sollten bei der Verwendung einige Aspekte beachtet werden:
- HTML-Elemente haben Vorrang: Wenn es ein HTML-Element gibt, das die Semantik einer Struktur bereits hinreichend beschreibt, so ist dieses dem ARIA role-Attribut vorzuziehen. Beispiel: Wenn möglich besser
<h1>zur Auszeichnung einer Überschrift verwenden, als<span role="heading">. - Nur eine Rolle pro Element: Anders als beim epub:type-Attribut sollte das role-Attribut immer nur einen Attributwert enthalten. Eine zweite Rolle ist höchstens als Fallback erlaubt.
- Keine semantische Erweiterung des
<body>-Elementes: Die Semantik des <body>-Elementes darf nicht überschrieben werden, daher sollte dieses Element niemals ein role- oder auch epub:type-Attribut erhalten. - Keine unnötige Wiederholung von Semantik: Semantik sollte nicht wiederholt werden, nur weil sich ein Inhalt über mehrere Inhaltsdokumente erstreckt. Beispiel: Eine Publikation ist in „Teile“ untergliedert, zu jedem Teil gehören mehrere Kapitel, die alle in einem separaten Inhaltsdokument enthalten sind. Die Attribute
epub:type="part"undrole="doc-part"sollten nur in dem einen Inhaltsdokument ergänzt werden, in dem der Teil beginnt (d.h. da, wo auch die Überschrift des Teils zu finden ist).
Türchen 15: Überschriften mit Untertitel? – Ja! Aber wie?
Sowohl bei wissenschaftlicher Literatur, als auch in belletristischen Titeln kommt es vor, dass Überschriften aus zwei Teilen bestehen, einer Haupt-Überschrift und einem Untertitel, die unterschiedlich formatiert sind.
Hierzu ein Beispiel aus dem Titel Alice’s Abenteuer im Wunderland:
Nicht selten werden zur Auszeichnung entsprechender Strukturen mehrere Überschriften-Elemente verwendet, wie in folgendem Negativbeispiel:
<h1>Erstes Kapitel.</h1>
<h2>Marley's Geist.</h2>
Semantisch betrachtet ist diese Auszeichnung falsch, denn sie vermittelt den Eindruck, als handle es sich bei der zweiten Überschrift „Marley’s Geist.“ um ein Unterkapitel von „Erstes Kapitel“.
Um die Zusammengehörigkeit von Haupt-Überschrift und Untertitel deutlich zu machen, empfehlen wir folgende Form der Auszeichnung:
<h1>Erstes Kapitel. <span role="doc-subtitle" epub:type="subtitle">Marley's Geist.</span></h1>
Eine alternative Möglichkeit ist außerdem der Einsatz eines <header>-Elementes zur Gruppierung von Hauptüberschrift und Untertitel. Ein Beispiel dazu finden Sie in der Accessible Publishing Knowledge Base: http://kb.daisy.org/publishing/docs/html/headings.html
Türchen 16: Warum ist der Einsatz des <section>-Elementes zur Gliederung eines EPUB’s sinnvoll?
Ein klassisches Mittel zur Gliederung von HTML-Dokumenten ist der Einsatz hierarchischer Überschriftselemente:
- Eine Überschrift erster Ordnung <h1> signalisiert dem Leser, dass er sich innerhalb des Buches auf der obersten Gliederungsebene befindet.
- Eine Überschrift zweiter Ordnung <h2> kennzeichnet den Beginn einer zweiten, untergeordneten Gliederungsebene.
- Eine Überschrift dritter Ordnung <h3> leitet eine weitere untergeordnete Gliederungsebene ein, usw.
Eine solche Überschriftenstruktur ist (bei entsprechender optischer Gestaltung) sowohl für sehende LeserInnen, als auch für die NutzerInnen assistiver Technologien, wie Screenreader, interpretierbar und verständlich.
Jedoch kann es vor allem bei Titeln mit einer komplexeren Kapitelstruktur, wie beispielsweise Sach- oder Fachbüchern, vorkommen, dass die Überschriftenstruktur den Aufbau eines Buches nicht eindeutig beschreibt, wie das folgende Beispiel zeigt:
Hier der zugehörige Quelltext:
<h1>Definition von Fuß- und Endnoten</h1>
<p>Fuß- und Endnoten sind ein beliebtes Mittel, um primäre Textinhalte – seien es einzelne Wörter oder längere Textpassagen – mit zusätzlichen Anmerkungen, Erklärungen, Beschreibungen oder auch Quellenangaben zu versehen.</p>
<p>…</p>
<h2>Fußnote</h2>
<p>Zur Auszeichnung der Fußnote bietet sich das <aside>-Element an, denn es kennzeichnet die Zusatzinformationen als sekundären Inhalt, der nicht zum primären Mengentext gehört. Ergänzt durch das Attribut epub:type="footnote" wird die Semantik des sekundären Inhalts genauer spezifiziert:</p>
<p>…</p>
<h2>Endnote</h2>
<p>Alternativ können die Zusatzinformationen auch ans Ende des Kapitels oder in ein separates Inhaltsdokument ausgelagert werden. In diesem Fall sprechen wir nicht mehr von Fußnoten, sondern von (einer Sammlung von) Endnoten.</p>
<p>…</p>
<p>Um deutlich zu machen, dass es sich bei den Inhalten des Endnoten-Dokumentes um sekundäre Inhalte handelt, kann das Inhaltsdokument mithilfe des Attributes linear="no" (im Spine des Package-Dokumentes) aus dem primären Lesefluss ausgenommen werden.</p>
<p>In modernen Lesesystemen führt der Einsatz der epub:type-Attribute "footnote" und "endnote" dazu, dass Fuß- bzw. Endnoten in Form von Pop-up-Fenstern ausgegeben werden.</p>
Frage: Gehört der letzte Absatz „In modernen Lesesystemen führt der Einsatz der epub:type-Attribute …“ zur obersten Gliederungsebene (<h1> Definition von Fuß- und Endnoten) oder zur untergeordneten Gliederungsebene (<h2> Endnote)?
Die Schwierigkeit in diesem Beispiel besteht darin, dass mithilfe der Überschriftselemente lediglich der Beginn einer Gliederungsebene gekennzeichnet wird, nicht aber dessen Ende.
Um diesem Problem entgegen zu wirken, bietet HTML5 die Möglichkeit, Sinneinheiten, wie Kapitel, mithilfe des Elementes <section> zu gliedern. Durch die Verschachtelung von <section>-Elementen – in Kombination mit hierarchischen Überschriftselementen – lässt sich die Struktur eines Buches eindeutig und semantisch korrekt auszeichnen:
<section>
<h1>Definition von Fuß- und Endnoten</h1>
<p>Fuß- und Endnoten sind ein beliebtes Mittel, um primäre Textinhalte – seien es einzelne Wörter oder längere Textpassagen – mit zusätzlichen Anmerkungen, Erklärungen, Beschreibungen oder auch Quellenangaben zu versehen.</p>
<p>…</p>
<section>
<h2>Fußnote</h2>
<p>Zur Auszeichnung der Fußnote bietet sich das <aside>-Element an, denn es kennzeichnet die Zusatzinformationen als sekundären Inhalt, der nicht zum primären Mengentext gehört. Ergänzt durch das Attribut epub:type="footnote" wird die Semantik des sekundären Inhalts genauer spezifiziert:</p>
<p>…</p>
</section>
<section>
<h2>Endnote</h2>
<p>Alternativ können die Zusatzinformationen auch ans Ende des Kapitels oder in ein separates Inhaltsdokument ausgelagert werden. In diesem Fall sprechen wir nicht mehr von Fußnoten, sondern von (einer Sammlung von) Endnoten.</p>
<p>…</p>
<p>Um deutlich zu machen, dass es sich bei den Inhalten des Endnoten-Dokumentes um sekundäre Inhalte handelt, kann das Inhaltsdokument mithilfe des Attributes linear="no" (im Spine des Package-Dokumentes) aus dem primären Lesefluss ausgenommen werden.</p>
</section>
<p>In modernen Lesesystemen führt der Einsatz der epub:type-Attribute "footnote" und "endnote" dazu, dass Fuß- bzw. Endnoten in Form von Pop-up-Fenstern ausgegeben werden.</p>
</section>
Würde man die <section>-Elemente mithilfe von Rahmen visualisieren, sähe das Ergebnis wie folgt aus:
Anhand dieser Darstellung wird eindeutig klar, dass der letzte Absatz „In modernen Lesesystemen führt der Einsatz der epub:type-Attribute …“ zur oberen Gliederungsebene (<h1> Definition von Fuß- und Endnoten) gehört.
Neben dem <section>-Element existieren noch weitere Elemente zur Gliederung von Inhalten, wie <article>, <aside> oder <nav>. Weitere Informationen hierzu finden Sie unter: https://wiki.selfhtml.org/wiki/HTML/outline
Türchen 17: Wie lässt sich die Auffindbarkeit zugänglicher EPUB-Publikationen verbessern?
Autor, Titel, Verlag und ISBN gehören zu den klassischen Metadatenangaben, die dazu beitragen, dass ein E-Book im Online-Shop für die KundInnen auffindbar ist und gekauft werden kann.
LeserInnen, die beim Rezipieren digitaler Publikationen auf assistive Technologien angewiesen sind (wie beispielsweise Menschen mit einer Seheinschränkung oder einer motorischen Einschränkung), haben unter Umständen bereits die Erfahrung gemacht, dass ein gekauftes E-Book für sie gar nicht oder nur teilweise nutzbar war. Um eine positive Kaufentscheidung treffen zu können ist es für sie wichtig, bereits vor dem Erwerb eines E-Books einschätzen zu können, ob die Publikation (nach ihren individuellen Bedürfnissen) zugänglich ist oder nicht.
Eine Lösung hierfür stellen Metadaten dar, die Aufschluss über die Zugänglichkeit eines E-Books geben. Im Folgenden sollen zwei Standards zur Definition solcher Barrierefreiheits-Metadaten vorgestellt werden.
Schema.org Accessibility Metadaten
Mithilfe der Metadatenangaben von schema.org haben EPUB-Produzenten die Möglichkeit, Informationen über die Zugänglichkeit eines Werkes direkt im EPUB zu hinterlegen.
Zu den wichtigsten Informationen gehören dabei die folgenden Eigenschaften:
- accessMode (accessModeSufficient): Fähigkeiten bzw. Sinneswahrnehmungen, die erforderlich sind, um die Inhalte einer Publikation rezipieren zu können
- accessibilityFeature: vorgenommene Anpassungen oder Features, die zur Gesamtzugänglichkeit des Inhalts beitragen (z.B. alternativer Text, erweiterte Beschreibungen, Beschriftungen, etc.)
- accessibilityHazard: mögliche Gefahren, die bei der Präsentation des Inhalts auftreten können (z. B. Blinken, Bewegungssimulation, Ton)
- accessibilitySummary: eine freisprachliche Zusammenfassung der Zugänglichkeit, inklusive einer Beschreibung der bekannten Mängel enthält (z. B. fehlende erweiterte Beschreibungen, spezifische Gefahren)
Diese Metadatenangaben können wie folgt im Package-Dokument (.opf) der EPUB-Publikation hinterlegt werden:
<meta property="schema:accessMode">textual</meta>
Eine Übersicht mit weiteren schema.org-Metadateneigenschaften, inklusive ihrer vorgesehenen Werte, findet sich unter: https://www.w3.org/wiki/WebSchemas/Accessibility
ONIX Codeliste 196 – E-publication Accessibility Details
Eine zusätzliche Möglichkeit zur Definition von Barrierefreiheits-Metadaten bietet der ONIX-Standard. Anders als die Accessibility Metadaten von schema.org werden die ONIX-Metadaten nicht im EPUB hinterlegt, sondern als gesonderter Datensatz, außerhalb der Publikation aufbewahrt.
Ein Buchhändler kann diese Metadatenangaben nutzen, um sie – gemeinsam mit anderen Informationen, wie Titel, Autor, Preis etc. – auf seiner Vertriebsplattform auszugeben und die Auffindbarkeit barrierefreier Publikationen zu steigern.
Relevant für die Beschreibung der Zugänglichkeit sind vor allem die Metadatenangaben der ONIX Codeliste 196 (E-publication Accessibility Details).
Weitere Erläuterungen zur Definition der ONIX-Metadaten zur Barrierefreiheit finden sich in der Accessible Publishing Knowledge Base unter: http://kb.daisy.org/publishing/docs/metadata/onix.html
Türchen 18: Was gilt es bei der Auszeichnung von Datentabellen zu beachten?
Tabellen sind ein häufig verwendetes Mittel zur optischen Darstellung von Inhalten. Doch haben Sie sich je gefragt, was genau eine Tabelle (semantisch betrachtet) eigentlich ist? Diese Frage scheint trivial, ist aber wichtig, um zu verstehen, was beim Einsatz von Tabellen in digitalen Publikationen beachtet werden sollte.
Bei der Darstellung von Inhalten in Form einer Datentabelle, werden diese in einem zweidimensionalen Raster – bestehend aus Zeilen und Spalten – angeordnet und damit in Beziehung zueinander gesetzt. Neben den reinen Inhaltsdaten enthält eine Datentabelle zusätzliche Metadaten (üblicherweise in Form von Überschriftszellen), die die Bedeutung der zugehörigen Inhaltsdaten beschreiben und sie in einen sinnvollen Kontext bringen.
Ein Beispiel für eine einfache Datentabelle ist die folgende Übersicht der fünf höchsten deutschen Mittelgebirge mit ihrer jeweils höchsten Erhebung:
| Rang | Gebirge | Höchster Berg | Höhe (in m) | Bundesland |
|---|---|---|---|---|
| 1. | Schwarzwald | Feldberg | 1493 | Baden-Württemberg |
| 2. | Bayerischer Wald | Großer Arber | 1456 | Bayern |
| 3. | Erzgebirge | Keilberg (CZ) | 1244 | Sachsen |
| 4. | Harz | Brocken | 1141 | Niedersachsen, Sachsen-Anhalt, Thüringen |
| 5. | Fichtelgebirge | Schneeberg | 1051 | Bayern |
Quelle: https://de.wikipedia.org/wiki/Mittelgebirge
Bei der Nutzung nicht-visueller Ausgabesysteme geht die zweidimensionale, optische Anordnung von Tabelleninhalten zumeist verloren. Screenreader geben die Daten einer Tabelle linear wieder, das heißt Zeile für Zeile, Zelle für Zelle.
In diesem Beispiel also: Rang > Gebirge > Berg > Höhe (in m) > Bundesland > 1. > Schwarzwald > Feldberg > 1493 > Baden-Württemberg > 2. > Bayerischer Wald > …
Damit der Aufbau einer Tabelle für blinde LeserInnen trotzdem erkennbar bleibt, sollte bei der Aufbereitung von Datentabellen auf die Verwendung des vorgesehenen Tabellen-Markups geachtet werden. Wichtig ist dabei vor allem die semantische Unterscheidung von Inhalts- bzw. Datenzellen <td> und Überschrifszellen <th>.
Zu den weiteren Strukturelementen zur Auszeichnung von (Daten-)Tabellen in HTML gehören:
<table>als Container der gesamten Tabelle<caption>zur Auszeichnung einer Tabellenbeschriftung/Tabellenüberschrift<thead>für den Kopfbereich einer Tabelle<tbody>für den Körper einer Tabelle<tfood>für den Fußbereich einer Tabelle<colgroup>zum Gruppieren von Tabellenspalten<col>zur Auszeichnung einer einzelnen Tabellenspalte<tr>zur Auszeichnung einer Tabellenzeile<th>zur Auszeichnung einer Überschriftszelle (Spalten- und/oder Zeilenüberschrift)<td>zur Auszeichnung einer Inhalts- bzw. Datenzelle
Doch Achtung: nicht immer ist eine Tabelle das geeignete Mittel zur Aufbereitung und Darstellung von Daten. In einigen Fällen kann es durchaus sinnvoll sein, eine Datentabelle aufzulösen und ihre Inhalte in anderer Form, beispielsweise in einer oder mehreren Liste(n), darzustellen.
Türchen 19: Datentabelle vs. Layouttabelle – was ist der Unterschied?
In Türchen 18 wurde der Einsatz von Tabellen zur Aufbereitung und Darstellung von Daten erläutert.
Nicht selten werden Tabellen in digitalen Medien jedoch zu einem weiteren Zwecke verwendet – nämlich zur Layoutgestaltung. In diesem Fall fungiert die Tabelle als eine Art Gestaltungsraster, um die Inhalte einer Seite gezielt positionieren und damit ein gewünschtes Layout erzeugen zu können.
Hierbei sprechen wir von Layouttabellen, wenngleich es sich (im semantischen Sinne) streng genommen nicht um Tabellen handelt. Denn anders als bei Datentabellen stehen die Inhalte einer Layouttabelle nicht in Beziehung zueinander, d.h. die Positionen der Inhalte im Layoutraster geben keine Auskunft über deren Beziehungen.
Ein klassisches Beispiel ist der Einsatz von Layouttabellen zur Erzeugung eines mehrspaltigen Layouts, wie in dem folgenden Beispiel:
In diesem Beispiel wurde eine Layouttabelle verwendet, um die beiden Wunschzettel optisch nebeneinander zu platzieren.
Hier der zugehörige Quelltext:
<table>
<colgroup class="zettel"><col></col></colgroup>
<colgroup><col></col></colgroup>
<colgroup class="zettel"><col></col></colgroup>
<tr><td class="name">Anton's Wunschzettel</td><td></td><td class="name">Lilly's Wunschzettel</td></tr>
<tr><td>ein Roller</td><td></td><td>ein Bauerhof</td></tr>
<tr><td>ein Pullover</td><td></td><td>ein Bastelbuch</td></tr>
<tr><td>ein Ball</td><td></td><td>ein Schlitten</td></tr>
<tr><td>ein Kuscheltier</td><td></td><td>ein Jojo</td></tr>
</table>
Die Verwendung von Tabellen-Markup zur Auszeichnung der Inhalte ist jedoch nicht nur semantisch falsch, sondern führt auch dazu, dass die Inhalte bei der Ausgabe per Screenreader nicht in einer logischen Lesereihenfolge ausgegeben werden.
Die optische Gestaltung der Wunschzettel – genauer gesagt die blaue Hinterlegung – sorgt dafür, dass Sehende die Inhalte eines Blocks jeweils als zusammengehörig erkennen. Daraus ergibt sich folgende logische Lesereihenfolge:
Anton’s Wunschzettel > ein Roller > ein Pullover > ein Ball > ein Kuscheltier
Lilly’s Wunschzettel > ein Bauerhof > ein Bastelbuch > ein Schlitten > ein Jojo
Ein Screenreader gibt die Inhalte jedoch wie gewohnt zeilenweise aus, d.h.:
Anton’s Wunschzettel > Lilly’s Wunschzettel > ein Roller > ein Bauerhof > ein Pullover > ein Bastelbuch > ein Ball > ein Schlitten > ein Kuscheltier > ein Jojo
Im Sinne der Barrierefreiheit wäre es an dieser Stelle besser, auf den Einsatz einer Layouttabelle zu verzichten und die Wunschzettel stattdessen als Listen auszuzeichnen:
<div>
<p id="anton">Anton's Wunschzettel</p>
<ul>
<li>ein Roller</li>
<li>ein Pullover</li>
<li>ein Ball</li>
<li>ein Kuscheltier</li>
</ul>
</div>
<div>
<p id="lilly">Lilly's Wunschzettel</p>
<ul>
<li>ein Bauerhof</li>
<li>ein Bastelbuch</li>
<li>ein Schlitten</li>
<li>ein Jojo</li>
</ul>
</div>
Bei Bedarf können die Wunschzettel per CSS-Fromatierungsanweisung (z.B. float: left;) nebeneinander platziert werden:
Solange die logische Lesereihenfolge durch den Einsatz von Layouttabellen nicht beeinträchtigt wird, ist deren Verwendung grundsätzlich erlaubt (wenngleich die Gestaltung per CSS-Anweisung zu bevorzugen ist). Dabei sollte jedoch darauf geachtet werden, dass die Layouttabelle keine für Datentabellen typischen Attribute und Strukturelemente enthält, wie <thead>, <th> oder <caption>.
Mithilfe des ARIA-Attributes role="presentation" lässt sich außerdem die Semantik der übrigen tabellenspezifische-Strukturen (<table>, <tr>, <td>) vor assistiven Technologien verbergen. Das bedeutet, dass eine Tabelle bei der Ausgabe per Screenreader nicht mehr als Tabelle angekündigt wird und die Inhalte linearisiert, wie eine Folge von Absätzen, ausgegeben werden.
Türchen 20: Wie können komplexe Datentabellen barrierefrei aufbereitet werden?
Nach dem Exkurs zum Thema Layouttabellen in Türchen 19 wollen wir an dieser Stelle noch einmal auf die Gestaltung von Datentabellen zurückkommen.
In Türchen 18 wurde anhand einer einfachen Datentabelle verdeutlicht, wie diese von linearen Ausgabesystemen wiedergegeben wird. Bei korrekter Auszeichnung von Überschrifts- und Datenzellen lässt sich der Aufbau der Tabelle relativ einfach erfassen, da die Beziehungen der Tabelle eindeutig sind – jede Inhaltszelle besitzt genau eine Überschriftszelle.
Doch was, wenn die Beziehungen einer Tabelle komplexer sind? – Wenn eine Tabelle mehrere Zeilen oder Spalten mit Überschriften besitzt, Zwischenüberschriften enthält oder auch verbundene Zellen umfasst?
Im Folgenden soll anhand eines Beispiels erläutert werden, wie auch komplexe Datentabellen so aufbereitet werden können, dass ihre Beziehungen per Screenreader nachvollziehbar sind.
Die Tabelle zeigt fünf verschiedene Baumarten, die jeweils einer der beiden Baumgruppen „Laubbäume“ oder „Nadelbäume“ untergeordnet sind. Zu jeder Baumart finden sich weitere Informationen zur Wuchshöhe, zum Wurzelsystem sowie zu ihren Früchten.
Bei der linearen Ausgabe der Tabelleninhalte werden diese in folgender Reihenfolge wiedergegeben: Baumgruppe > Laubbäume > Nadelbäume > Baumart > Birke > Eiche > Kastanie > Fichte > Kiefer > Wuchshöhe > bis zu 25 Meter > bis zu 25 Meter > bis zu 36 Meter > bis zu 40 Meter > bis zu 45 Meter > Wurzelsystem …
Versucht man sich den Tabellenaufbau anhand dieser Informationen vorzustellen, so ergeben sich mehrere Fragen:
- Problemstellung 1: Bezieht sich die Überschrift „Baumgruppen“ in Zelle (1|1) auf die erste Zeile oder die erste Spalte? (Diese Frage dürfte sich nicht nur Screenreader-NutzerInnen, sondern auch sehenden LeserInnen stellen.)
- Problemstellung 2: Per Tastaturbefehl ist es Screenreader-NutzerInnen möglich, sich zeilenweise durch eine Datentabelle zu bewegen. Währen die erste Zeile lediglich drei Zellen („Baumgruppe“, „Laubbäume“ und Nadelbäume“) beinhaltet, besitzen alle übrigen Zeilen sechs Zellen. Es stellt sich die Frage, welcher der drei Überschriften die sechs Spalten untergeordnet sind.
- Problemstellung 3: Bei Datenzelle (5|4) mit dem Inhalt „Flachwurzler“ angekommen, ist bereits einige Zeit vergangen und viele Inhalte wurden vorgelesen… Zu welcher Baumart und Baumgruppe gehörte der Eintrag noch gleich?
Um die Zugehörigkeit von Daten- und Überschriftszellen eindeutig zu definieren, bietet HTML die beiden Attribute scope und headers.
Das scope-Attribut wird am <th>-Element eingesetzt, um festzulegen, auf welche Zellen sich eine Überschrift bezieht – auf die Zellen einer Reihe oder auf die Zellen der Spalte. Erlaubt sind dabei die folgenden Werte:
- Die Überschrift
<th scope="row">betitelt alle Zellen derselben Spalte (vertikal). - Die Überschrift
<th scope="row">betitelt alle Zellen derselben Reihe (horizontal). - Die Überschrift
<th scope="colgroup">betitelt alle Zellen der Spaltengruppe (vertikal). - Die Überschrift
<th scope="rowgroup">betitelt alle Zellen der Zeilengruppe (horizontal).
Das headers-Attribut stellt eine Art Gegenstück zum scope-Attribut dar. Denn es beschreibt die Beziehung von Daten- und Überschriftszellen nicht aus Perspektive der Überschriften, sondern definiert für jede Datenzelle die zugehörige(n) Überschrifte(n).
Voraussetzung hierfür ist, dass die Überschriftszellen mit einer id versehen sind, die über das headers-Attribut von der Datenzelle referenziert werden kann.
Der folgende Quelltext veranschaulicht den Einsatz von scope- und headers-Attributen anhand des oben aufgeführten Beispiels:
<table>
<colgroup span="1"/>
<colgroup span="3"/>
<colgroup span="2"/>
<thead>
<tr>
<th id="th_row1" scope="row">Baumgruppe</th>
<th id="laub" colspan="3" scope="colgroup">Laubbäume</th>
<th id="nadel" colspan="2" scope="colgroup">Nadelbäume</th>
</tr>
<tr>
<th id="th_row2" scope="row">Baumart</th>
<th id="birke" scope="col">Birke</th>
<th id="eiche" scope="col">Eiche</th>
<th id="kastanie" scope="col">Kastanie</th>
<th id="fichte" scope="col">Fichte</th>
<th id="kiefer" scope="col">Kiefer</th>
</tr>
</thead>
<tbody>
<tr>
<th id="th_row3" scope="row">Wuchshöhe</th>
<td headers="laub birke th_row3">bis zu 25 Meter</td>
<td headers="laub eiche th_row3">bis zu 25 Meter</td>
<td headers="laub kastanie th_row3">bis zu 36 Meter</td>
<td headers="nadel fichte th_row3">bis zu 40 Meter</td>
<td headers="nadel kiefer th_row3">bis zu 45 Meter</td>
</tr>
<tr>
<th id="th_row4" scope="row">Wurzelsystem</th>
<td headers="laub birke th_row4">Herzwurzler</td>
<td headers="laub eiche th_row4">Tiefwurzler</td>
<td headers="laub kastanie th_row4">Herzwurzler</td>
<td headers="nadel fichte th_row4">Flachwurzler</td>
<td headers="nadel kiefer th_row4">Tiefwurzler</td>
</tr>
<tr>
<th id="th_row5" scope="row">Früchte</th>
<td headers="laub birke th_row5">kleine, geflügelte Nussfrüchte</td>
<td headers="laub eiche th_row5">Eicheln</td>
<td headers="laub kastanie th_row5">Kastanien</td>
<td headers="nadel fichte th_row5">Zapfen</td>
<td headers="nadel kiefer th_row5">Zapfen</td>
</tr>
</tbody>
</table>
Durch den Einsatz der Attribute scope und headers bei der Aufbereitung von Datentabellen lassen sich auch komplexe Beziehungen eindeutig abbilden. Screenreader-NutzerInnen können sich beim Rezipieren einer solchen Tabelle per Tastenkombination die zu einer Datenzelle gehörenden Überschriften ausgeben lassen. Dies erleichtert das Verständnis und löst die oben genannten Problemstellungen.
Zusätzlich kann eine Beschreibung des Tabellenaufbaus in Textform dabei helfen, die Beziehungen der Tabelleninhalte nachvollziehbar zu machen. Ursprünglich war dafür das summary-Attribut vorgesehen, welches in HTML5 jedoch nicht mehr unterstützt wird. Daher empfehlen wir die Einbindung von Beschreibungen für komplexe Datentabellen analog zur ausführlichen Beschreibung komplexer Abbildungen, wie in Türchen 4 beschrieben.
Türchen 21: Abbildungs- und Tabellenverzeichnisse – Wie lässt sich die Navigation im EPUB verbessern?
E-Books zeichnen sich gegenüber dem gedruckten Buch durch einen entscheidenden Vorteil aus: Querverweise und Hyperlinks bieten sowohl sehenden als auch sehgeschädigten LeserInnen die Möglichkeit, schnell und zielgerichtet in der Publikation zu navigieren.
Vor allem bei der Arbeit mit Sach- oder Fachbüchern, die eine Vielzahl von Abbildungen und Tabellen beinhalten, können verlinkte Abbildungs- und Tabellenverzeichnisse die Auffindbarkeit der Inhalte enorm erleichtern.
Daher sollen im Folgenden zwei Varianten zur Umsetzung von Tabellen- und Abbildungsverzeichnissen im EPUB vorgestellt werden.
Verzeichnisse im Inhaltsdokument
Zunächst einmal besteht die Möglichkeit, Abbildungs- und Tabellenverzeichnisse (ähnlich wie im gedruckten Buch) als eigenes Inhaltskapitel, beispielsweise am Ende der Publikation, anzulegen. Hier empfiehlt sich im Sinne einer guten Screenreader-Bedienbarkeit die Auszeichnung als verlinkte, geordnete Liste.
(Im folgenden Beispiel wurde die standardmäßig dargestellte Nummerierung der <ol>-Einträge mit der CSS-Eigenschaft list-style: none; ausgeblendet.)
Durch eine entsprechende Verlinkung in der TOC-Navigation können die Inhaltsdokumente mit den Verzeichnissen zu jeder Zeit angesteuert werden. Von hier aus ist dann eine weitere Navigation zu einzelnen Abbildungen oder Tabellen möglich.
Gegebenenfalls besteht bei dieser Form der Umsetzung auch die Möglichkeit, ein Abbildungs- oder auch Tabellenverzeichnis mit weiteren Informationen anzureichern. So können beispielsweise die ausführlichen Abbildungs- oder Tabellenbeschreibungen (erwähnt in den Türchen 4 und Türchen 20) mit im Verzeichnis platziert werden:
Verzeichnisse im Navigationsdokument
Bei entsprechender Reader-Unterstützung können Abbildungs- und Tabellenverzeichnisse auch als extra Verzeichnis im Navigationsmenü eines EPUB’s – zusätzlich zur TOC-Navigation (siehe Türchen 1) und zur Seitennavigation (siehe Türchen 11) – bereitgestellt werden, wie in dem folgenden Beispiel:
Dafür müssen die Verzeichnisse ebenfalls als geordnete Link-Listen angelegt werden – jedoch nicht in einem der Inhaltsdokumente, sondern innerhalb eines neuen <nav>-Elementes im Navigationsdokument der EPUB-Publikation. Durch die Anreicherung der epub:type-Attributwerte „loi“ (engl. „list of illustrations“) bzw. „lot“ (engl. „list of tables“) wird das jeweilige Navigationselemente als Abbildungs- bzw. Tabellenverzeichnis gekennzeichnet:
<nav epub:type="loi">
<h1>Abbildungen</h1>
<ol>
<li><a href="Kapitel_1.xhtml#fig_1">Abbildung 1: TOC-Navigation</a></li>
<li><a href="Kapitel_3.xhtml#fig_2">Abbildung 2: Rentier Rudolph</a></li>
<li><a href="Kapitel_3.xhtml#fig_3">Abbildung 3: Indigenes Volk</a></li>
<li><a href="Kapitel_4.xhtml#fig_4">Abbildung 4: Umfrage zur Vorfreude auf Weihnachten</a></li>
<li><a href="Kapitel_5.xhtml#fig_5">Abbildung 5: Schmuckgrafik</a></li>
...
</ol>
</nav>
<nav epub:type="lot">
<h1>Tabellen</h1>
<ol>
<li><a href="Kapitel_18.xhtml#tab_1">Tabelle 1: Die 5 höchsten Mittelgebirge</a></li>
<li><a href="Kapitel_20.xhtml#tab_2">Tabelle 2: Charakteristika verschiedener Laub- und Nadelbaumarten</a></li>
</ol>
</nav>
Der Vorteil dieser Art der Umsetzung besteht darin, dass die Abbildungen bzw. Tabellen über das Navigationsmenü direkt angesteuert werden können, ohne Umweg über ein Abbildungs- oder Tabellenverzeichnis im Inhalt. Dies macht die Navigation effizienter und schneller.
Allerdings werden die zusätzlichen Verzeichnisse im Navigationsdokument aktuell noch nicht von allen Lesesystemen unterstützt. Hinzu kommt, dass die Navigationsmenüs bei einer großen Anzahl von Abbildungen und/oder Tabellen schnell unübersichtlich werden können, vor allem wenn diese längere Beschriftungen tragen.
Daher kann in einigen Fällen durchaus auch eine Kombination beider Techniken sinnvoll sein, um eine bestmögliche Auffindbarkeit sämtlicher Abbildungen und Tabellen sicherzustellen.
Türchen 22: Wie lässt sich die Zugänglichkeit von Abkürzungen optimieren?
Stellen Sie sich vor, Sie bekommen den folgenden Text von einem Screenreader vorgelesen:
Wenn wir die Ergebnisse der Auswertungen in Abb. 1 und Tab. 3 betrachten, stellen wir fest, dass bspw. die Testgruppe B nur drei der Fragen korrekt beantworten konnte. D.h. die Eingangshypothese konnte widerlegt werden. Evtl. ist das Ergebnis u.a. darauf zurückzuführen, dass die Testgruppe B aus einem gemischten Team aller Altersgruppen bestand.
Wie Sie vielleicht schon ahnen, sorgen die vielen Abkürzungen in diesem Beispieltext dafür, dass die Sprachausgabe nur schwer zu verstehen ist.
Für geübte sehende LeserInnen stellen die Abkürzungen kein Problem dar. Sie erkennen die Abkürzungen und sind in der Lage, diese gedanklich zu Worten zu vervollständigen. Der Screenreader hingegen liest die Abkürzungen so vor, wie sie im Inhalt auftauchen – also beispielsweise „Abb Punkt Eins“ für „Abb. 1“ oder „U Punkt A Punkt“ für „u.a.“.
Zwar besitzen einige Vorlesesysteme hinterlegte Wörterbücher, in denen die ausgeschriebenen Formen der gängigsten Abkürzungen definiert sind (diese werden dann anstelle der Abkürzung ausgegeben), jedoch beinhalten diese Wörterbücher üblicherweise nur eine sehr begrenzte Auswahl an Abkürzungen.
Daher sollten Abkürzungen im EPUB mithilfe des Elementes <abbr> ausgezeichnet und – zumindest beim ersten Vorkommen – per title-Attribut mit einer Beschreibung versehen werden, wie in folgenden Beispielen:
<abbr title="Abbildung">Abb.</abbr><abbr title="beispielsweise">bspw.</abbr><abbr title="das heißt">d.h.</abbr><abbr title="Deutsche Zentralbücherei für Blinde">DZB</abbr><abbr lang="en" xml:lang="en" title="electronic Publication">ePub</abbr>
Dies bietet den NutzerInnen einer Sprachausgabe die Möglichkeit, (in den Einstellungen des Screenreaders) festzulegen, dass anstelle der Abkürzungen der jeweilige Inhalt des title-Attributes vorgelesen werden soll. Auf diese Weise kann die Verständlichkeit des Inhalts verbessert werden.
Ein weiterer Vorteil ist, dass die Abkürzungsbeschreibung auch für sehende NutzerInnen zugänglich ist. Durch das Bewegen der Maus über die entsprechende Abkürzung im Text kann die Beschreibung in Form eines Tootips aufgerufen werden:
Doch leider folgt an dieser Stelle auch ein Aber: denn in der Praxis wird das title-Attribut als Abkürzungsersatz bei der Sprachausgabe nicht von allen E-Book-Reader-Screenreader-Kombinationen unterstützt.
Um zumindest die Bedeutung verwendeter Abkürzungen zu erläutern, kann es sinnvoll sein, ein Abkürzungsverzeichnis bzw. Glossar anzulegen, in dem die Abkürzungen der Publikation erklärt werden. Eine andere Möglichkeit ist die Erklärung einer Abkürzung (bei ihrem ersten Auftreten) im Text. Dies löst zwar nicht die Problematik der unverständlichen Sprachausgabe, trägt aber zumindest dazu bei, dass bei fehlender Unterstützung des title-Attributes kein Informationsverlust entsteht.
Rückblick: In den früheren Versionen von HTML gab es zusätzlich zu <abbr> das Element <acronym>. Es diente der Unterscheidung von Abkürzungen, wie „bspw.“ oder „u.a.“, und Akronymen. Als Akronym bezeichnet man ein Kurzwort, das sich aus den Anfangsbuchstaben mehrerer Wörter zusammensetzt, wie NASA (National Aeronautics and Space Administration) oder BACC (Born Accessible Content Checker). In HTML5 ist diese Unterscheidung nicht mehr vorgenommen, hier werden auch Akronyme mit dem <abbr>-Element ausgezeichnet.
Türchen 23: Wie können Initialen im EPUB barrierefrei umgesetzt werden?
Initialen gehören zu einem der ältesten Mittel zur Textgestaltung in Büchern. Reich verziert mit Ornamenten und bunten Farben schmückten sie einst Handschriften und fanden sich später auch im Buchdruck wieder.
Und auch heute noch werden Initialen verwendet, um den Anfang eines Kapitels oder eines Absatzes optisch hervorzuheben – selbst in der digitalen E-Book-Welt.
Allerdings kann sich der Einsatz von Initialen in digitalen Publikationen negativ auf die Zugänglichkeit und Lesbarkeit eines Textes auswirken. Daher sollten beim Einsatz dieses Gestaltungsmittels einige Aspekte beachtet werden.
Auf keinen Fall sollten Initialen in Form von Abbildungen im EPUB eingebunden werden. Dies hat mehrere Gründe. Zum einen verwehren Schriftgrafiken – so bezeichnet man Abbildungen zur Darstellung von Textinhalten – dem Leser die Möglichkeit, das Erscheinungsbild des Textes an seine individuellen Bedürfnisse anzupassen. So lässt sich beispielsweise auf die Schriftfarbe, den Hintergrund oder auch die Schriftgröße – je nach Auflösung der Schriftgrafik – nur sehr eingeschränkt Einfluss nehmen.
Davon abgesehen bleiben die Inhalte der Schriftgrafik blinden Menschen gänzlich verborgen. Und selbst wenn der Buchstabe des Initials im Alternativtext der Abbildung hinterlegt ist, ist die Ausgabe des Wortes per Screenreader beeinträchtigt. Dieser liest dann etwa: „Grafik N – och ein bis zwei Augenblicke…“ anstatt „Noch ein bis zwei Augenblicke…“.
Wenn also Initialen im E-Book verwendetet werden, sollten diese als Text im EPUB eingebunden und mithilfe von CSS-Formatierungsanweisungen gestaltet werden. Dafür gibt es mehrere Optionen.
Am naheliegendsten ist wahrscheinlich die Verwendung eines <span>-Elementes zur Markierung des Initials, welches über ein class-Attribut bestimmte CSS-Formatierungen, wie etwa eine andere Schriftart oder eine Schriftgröße, zugewiesen bekommt. Dies birgt jedoch die Gefahr, dass der Inhalt in einigen Vorlesesystemen wie folgt ausgegeben wird: „Großbuchstabe N – och ein bis zwei Augenblicke…“.
Daher empfehlen wir bei der Umsetzung von Initialen im EPUB von der Kennzeichnung im Quelltext abzusehen und stattdessen rein auf die Gestaltung per CSS zu setzen. Dies könnte beispielsweise mithilfe des Pseudoelementes ::first-letter erfolgen, wie in folgendem Beispiel:
<p class="initial">Noch ein bis zwei Augenblicke…</p>
p.initial::first-letter {
float: left;
font-size: 4em;
margin-right: 0.3em;
font-family: Vivaldi;
}
Die visuelle Ausgabe würde dabei wie folgt aussehen:
Doch Achtung: Bei der Ausgabe der Inhalte über kleine Bildschirme, wie dem Smartphone, oder auch für Menschen mit einer Lese- oder Sehschwäche kann die Lesbarkeit des Textes durch den Einsatz von Initialen beeinträchtigt werden. Daher sollten Initialen in digitalen Publikationen eher sparsam, beispielsweise nur zu Beginn eines Kapitels, nicht aber für jeden Absatz, verwendet werden.
Weitere Infos zur Gestaltung von Initialen und zum Umgang mit CSS-Pseudoelementen finden sich unter https://www.sitepoint.com/css-pseudo-elements/.
Türchen 24: Wie lässt sich feststellen, ob eine EPUB-Publikation barrierefrei ist?
Die Frage, ob eine Publikation barrierefrei nutzbar ist oder nicht, lässt sich so pauschal kaum beantworten. Ein E-Book, das für den einen problemlos lesbar ist, kann für den anderen unzugänglich sein – und umgekeht.
Barrierefreiheit ist also nicht als absolutes Maß zu verstehen, sondern steht immer in Zusammenhang mit den individuellen Bedürfnissen eines Nutzers oder einer Nutzergruppe.
Und dennoch gibt es Anforderungen, bei deren Erfüllung davon ausgegangen werden kann, dass ein EPUB-Dokument für eine breite Leserschaft barrierefrei zugänglich und nutzbar ist – einige davon wurden in den vorangegangenen Türchen bereits vorgestellt.
Offiziell sind die Anforderungen der barrierefreien EPUB-Gestaltung in der Spezifikation EPUB Accessibility 1.0 unter: http://www.idpf.org/epub/a11y/accessibility.html definiert.
Um die Erstellung barrierefreier EPUB3-Publikationen zu unterstützen, hat die DZB den Born Accessible Content Checker (kurz BACC) entwickelt.
BACC ist eine webbasierte Prüfanwendung, die es ermöglicht, einfach und automatisiert zu testen, ob ein EPUB3-Dokument den Anforderungen der barrierefreien Gestaltung entspricht. Das Tool ist kostenfrei und ohne Registrierung unter folgender Adresse nutzbar: http://bacc.dzb.de
Zur Funktionsweise des Prüfwerkzeuges:
- Über die Startseite der BACC-Prüfanwendung können ein oder mehrere EPUB-Dokumente ausgewählt und hochgeladen werden.
- Die Prüfung der EPUB-Dokumente hinsichtlich der Anforderungen einer barrierefreien Gestaltung startet automatisch.
- Nach Vollendung der Prüfung, liefert BACC für jedes geprüfte EPUB-Dokument eine Einschätzung der Zugänglichkeit in Form eines Ampelschemas sowie einen ausführlichen Prüfbericht mit Optimierungsempfehlungen.
Durch die Nutzung von BACC können EPUB-ProduzentInnen in doppelter Hinsicht profitieren: einerseits vermittelt BACC anwengungsbezogene Einblicke in die Anforderungen einer barrierefreien Gestaltung, andererseits unterstützt es die Qualitätssicherung barrierefreier E-Books.
Mehr Informationen zum BACC-Prüftool finden Sie in der PDF-Broschüre unter: www.dzb.de/bacc-flyer
Da sich mithilfe einer automatisierten Prüfung jedoch nicht alle Anforderungen der barrierefreien Gestaltung bewerten lassen, empfehlen wir zusätzlich zur Anwendung des Prüfwerkzeuges BACC ergänzende personengestützte Barrierefreiheitsprüfungen vorzunehmen.
Weitere Informationen, Tipps und Tricks rund um die Themen Barrierefreiheit und EPUB erhalten Sie in folgenden Quellen:
- Accessible EPUB3: http://shop.oreilly.com/product/0636920025283.do
- Accessible Publishing Knowledge Base: http://kb.daisy.org/publishing/
- Überarbeitete Neuauflage der Checkliste zur Barrierefreiheit von EPUB3-eBooks: https://www.igdigital.de/checkliste-barrierefreiheit-ebooks-v2/
2 Antworten auf „Wir öffnen Türen…“