BF #004 Barrrierefreiheit in der technischen Dokumentation – Illustrationen in digitalen Dokumenten

Müssen wir uns bei einer Illustration für die Papierausgabe eines Informationsproduktes  genau überlegen, welche Größe für eine optimale Darstellung erforderlich ist, haben wir dieses Problem bei digitalen Ausgaben in dieser Form nicht. Hier lassen sich Illustrationen – wie auch die sonstigen Inhalte – nahezu beliebig skalieren und damit an das Sehvermögen der Leser anpassen.

„Nahezu beliebig“ ist natürlich mit Vorsicht zu genießen, denn die Grenzen setzt schlussendlich das Endgerät. Ein Schaltplan lässt sich bei 200-facher Vergrößerung auf einem 24“ oder 27“ Computermonitor ausgezeichnet betrachten – auf einem 7“ Display eines Smartphones hingegen ist diese Vergrößerung nicht sinnvoll.

Ein wenig Theorie vorweg: Grundsätzlich unterscheidet man Grafiken unabhängig von ihrem Inhalt in Pixelgrafiken (auch Rastergrafiken genannt) und in Vektorgrafiken.

Pixel- oder Rastergrafiken sind aus einzelnen Bildpunkten – den Pixeln – zusammengesetzt. In starker Vergrößerung hat eine Pixelgrafik das Aussehen eines Mosaikes, wobei die Pixel die Mosaiksteinchen sind. Pixelgrafiken sind bis zu einem gewissen Grad skalierbar. Die Skalierbarkeit ist dabei davon abhängig, wie hoch die Pixeldichte (ppi – pixel per Inch) ist. Hierbei ist definiert wie viele Pixel auf einen Zoll (also 2,54 cm) passen. Je höher der ppi-Wert, desto mehr Pixel befinden sich auf einer Strecke von 2,54 cm. Ein Wert von 300 ppi bedeutet also, dass sich 300 Pixel auf eine Strecke von 2,54 cm drängeln, während es bei dem für Websites gebräuchlichen Wert nur 72 sind. So hat eine Grafik bei einer Kantenlänge von 100 mm x 100 mm bei 300 ppi eine Abmessung von 1181 x 1181 Pixeln, während es bei 72 ppi nur 283 x 283 Pixel sind. Dies führt dazu, dass beim Hineinzoomen in eine 72 ppi-Ausgabe sehr schnell Unschärfen auftreten und die Darstellung „klötzchenhaft“ wird – Bilddetails lassen sich so nicht mehr gut erkennen.

Was bedeutet das nun für uns? Grundsätzlich lässt sich sagen, dass wir für Printprodukte mit einer Auflösung von 300 ppi arbeiten sollten. Dies ist dadurch begründet, dass im Druck meist nur vier Farben zur Verfügung stehen: Cyan, Magenta, Gelb und Schwarz. Alle anderen Farben werden im Vierfarbdruck durch Mischung dieser Farben erzeugt. Da Grafiken in diesem Druckverfahren verlustbehaftet in Rasterpunkte zerlegt werden, müssen die Bildpunkte den Rasterpunkten zahlenmäßig deutlich überlegen sein, will man ein gutes Druckergebnis erzielen.

Eine völlig andere Welt betreten wir, wenn es um Vektorgrafiken geht. Während bei einer Pixelgrafik alle Bildinformationen wie Farbe, Hell- und Dunkelwerte, etc. starr in den Pixeln abgelegt sind, sind die Bildelemente in Vektorgrafiken anhand mathematischer Funktionen beschrieben und gespeichert. Musiker unter Ihnen werden als Analogie möglicherweise die MIDI-Datei kennen. Der folgende Vergleich ist technisch nicht korrekt, verdeutlicht aber den wesentlichen Unterschied, wie ich meine, ganz gut. Könnten wir in die Datei einer Pixelgrafik direkt hineinsehen, würden wir das fertige Bild erkennen können. Schauten wir – wie im Pixelgrafikbeispiel – in die Vektorgrafikdatei, würden wir kein Bild zu sehen bekommen, hier ist die zugrundeliegende Technik eine völlig andere. In einer Vektorgrafik, beispielsweise in einer Datei im SVG-Format (SVG steht für Scaleable Vector Graphics – also skalierbare Vektorgrafik), finden wir sauber strukturiertes XML und CSS, mit deren Hilfe alle Objekte einer Illustration präzise definiert sind.

Das Besondere an Vektorgrafiken ist nun, dass sie quasi erst dann wirklich erstellt und sichtbar werden, wenn die Datei auf dem Endgerät geöffnet wird. Erst jetzt werden die Informationen verwendet, um ein Bild zu generieren. Und dies erfolgt jeweils abhängig von der Auflösung des Endgerätes.

Hinsichtlich der Barrierefreiheit bieten Vektorgrafiken den Vorteil, dass sie sich beliebig verlustlos nach oben oder unten skalieren lassen. Aber auch abseits der Barrierefreiheit bieten Vektorgrafiken eine Vielzahl von Vorteilen: So zum Beispiel, wenn wir Illustrationen erstellen müssen, die aus vielen kleinen dicht beieinanderliegenden Objekten bestehen und in denen dann ggfs. noch beispielsweise Zahlenangaben vorhanden sind. Ein Beispiel sind Konstruktionszeichnungen oder Schaltpläne. Durch die verlustlose Skalierung können Benutzer alle gewünschten Details problemlos erkennen.

Ein weiterer Vorteil ist, dass durch die Koordinatendarstellung der Objekte ihre Lage zueinander vom Anzeigeprogramm berechnet werden kann. Dies ist beispielsweise bei der Erstellung von Seekarten von großer Bedeutung. Darüber hinaus bieten Vektorgrafiken noch viele weitere Vorteile. Hinsichtlich der technischen Dokumentation sei hier jedoch nur die Möglichkeit erwähnt sie mit Interaktion und Animationen zu versehen.

Um Vektorgrafiken in ein Dokument einzubinden braucht es übrigens keine Konvertierungstools oder Ähnliches: Programme wie Word oder Adobe InDesign erlauben den direkten Import von Dateien im SVG-Format, in InDesign können sogar Illustrator-Dateien direkt eingebunden werden. Auch in einer Website sind Vektordateien problemlos integrierbar. Ein PDF-Dokument oder eine Website die wir also mit Vektorgrafiken versehen ist hinsichtlich der Leserlichkeit und Erkennbarkeit eigentlich kaum noch zu überbieten, da nicht nur die Illustration, sondern auch die Schriften beliebig verlustlos skalierbar sind. Und auch wenn es in der technischen Redaktion aus übersetzungstechnischen Gründen meist vermieden wird: Sehen wir in einer Vektorgrafik einen Text als Bestandteil vor, kann dieser von Screenreadern ausgelesen werden. Ein weiteres Plus hinsichtlich der Barrierefreiheit.

Egal ob wir ein PDF-Dokument in Word, InDesign oder einem anderen DTP-Programm erstellen, möchten wir eine gute Darstellung von Grafiken erreichen, sollten wir nach meiner Meinung auch hier möglichst mit 300 ppi arbeiten. Dies insbesondere dann, wenn wir unsere Illustrationen im Rahmen der Barrierefreiheit optimieren wollen.

Auflösungen von 72 ppi wie wir sie bei Grafiken für Websites noch verwenden, sind hier keinesfalls zielführend. Allerdings müssen wir uns darüber im Klaren sein, dass eine Vielzahl hochaufgelöster Grafiken dazu führt, dass die Größe der erzeugten PDF-Datei recht umfangreich werden kann. Dies wiederum kann Auswirkungen auf die Bereitstellung also den Weg der Verbreitung des Dokumentes und auf die Performance der Anzeige im Endgerät haben.

Machen sie ruhig einmal selbst den Versuch und fügen Sie die gleiche Grafik in drei verschiedenen Auflösungen in Ihr Dokument ein und betrachten Sie dann das resultierende PDF in verschiedenen Zoom-Stufen im PDF-Reader. Im Prinzip lässt sich das eben gesagte, auch auf weitere digitale Formate wie z. B. für E-Book-Reader anwenden.

Wie lässt sich nun Barrierefreiheit von Illustrationen in einem PDF-Dokument sicherstellen?

PDF-Dokumente kommen in verschiedenen Standards daher. Hinsichtlich der Barrierefreiheit haben wir es mit dem Standard PDF/UA zu tun. Dieser wurde im August 2012 als ISO-Norm 14289-1 veröffentlicht und liegt aktuell als DIN ISO 14289-1:2016-12 vor. Das Kürzel UA steht dabei für Universal Access und definiert das Ziel welche Anforderungen an ein barrierefreies PDF-Dokument zu erfüllen sind. Dabei stützt sich der Standard auf die Anforderungen der Web Content Accessibility Guidelines (WCAG) 2021. Diese sind wiederum ein Webstandard des World Wide Web Consortiums (W3C) welcher die barrierefreie Verwendung von Websites, Software oder anderen Dokumenten sicherstellen soll. Auf ihnen basiert u.a. die EN 301 549 – die europäische Norm für digitale Barrierefreiheit, welche die Anforderungen an die Barrierefreiheit der Informations- und Kommunikationstechnik des öffentlichen Sektors definiert. Im Zusammenhang mit der ISO 14289 muss der Vollständigkeit halber die ISO 32000-1 und -2 genannt werden, die das Dateiformat PDF spezifiziert und daher von Bedeutung für die DIN ISO 14298-1 ist.

Zunächsteinmal ist wohl festzuhalten, dass zur Erstellung barrierefreier PDF-Dokumente eine gewisse Softwareausstattung und ein stringentes Arbeiten Voraussetzung ist, will man den Anforderungen genügen. Dazu gehören z. B. eine konsequente Anwendung von Absatzformaten und eine durchgehende hierarchische Struktur unter der Verwendung mehrerer Ebenen. Als weiteres unverzichtbares Element ist das sogenannte „taggen“ zu nennen. Hierbei werden alle maßgeblichen Inhalte des Dokumentes mit PDF-Tags  – also z. B. h1 für Überschriften der ersten Ordnung, p für einen Absatz – ausgezeichnet.

Hinsichtlich der Illustrationen ist es von Bedeutung, dass sie sich so dicht wie möglich bei dem dazugehörenden Textinhalt befinden. In Bezug auf die Barrierefreiheit ist das deswegen von Bedeutung, da Screenreader den Inhalt eines Dokumentes linear abarbeiten. Außerdem müssen alle Illustrationen eines Dokumentes mit einem Alternativtext versehen sein. Diejenigen Hörer, die im Webdesign bewandert sind, werden die Alt-Attribute in Zusammenhang mit Grafiken bereits kennen.

Obwohl sich barrierefreie PDF-Dokumente auch mit MS-Word wohl recht gut erstellen lassen, ist es aus meiner Sicht dennoch zielführender, hierzu auf ein DTP-Programm wie beispielsweise Adobe InDesign zu setzen.

Die andere große Sparte der Mediennutzung stellen HTML-Dokumente dar. Sie begegnen uns täglich als Websites im Internet aber durchaus auch als lokale Dokumente auf unserem PC, einem Smart-TV oder im Intrantet des Unternehmens, um nur einige Bereiche zu nennen. Auch hier sind nahezu überall Illustrationen anzutreffen. Deren Auflösung ist traditionell auf 72 ppi festgelegt, ein Wert, mit dem sich auch heute noch sehr gut arbeiten lässt – auch wenn tief in die Website hereingezoomt wird. Je nach Bedarf und Anwendungsfall kann es aber auch sinnvoll sein mit höheren Auflösungen zu arbeiten.

Nun ist es aber hinsichtlich der Barrierefreiheit von Illustrationen in PDF-Dokumenten und Websites damit noch nicht getan. Denn auch die beste Pixel- oder Vektorgrafik kann von einem blinden Menschen nicht erkannt werden.

Hier steht uns jedoch ein aus dem Webdesign altbekanntes Hilfsmittel zur Verfügung: das Alt-Attribut. Hiermit sollte grundsätzlich jeder in einem Dokument befindlichen Illustration, ein sogenannter Alternativtext beigefügt werden – dieser wird von Screenreadern erkannt und gelesen. Historisch hat das Alt-Attribut die Aufgabe, den Betrachtern einer Website zu signalisieren, dass an dieser Stelle eine Illustration stehen sollte. Der Inhalt des Alt-Attributes kommt nämlich immer dann zum Tragen, wenn aus irgendeinem Grund die vorgesehene Illustration nicht angezeigt werden kann. Hier sollte nun in diesem Attribut eine kurze Beschreibung hinterlegt sein, die erklärt, worum es in dieser Illustration geht. Hierfür haben sich 80 Zeichen eingebürgert. Sollen in Websites längere Informationen untergebracht werden, kann die Illustration mittels des figure-Elementes eingebunden und die Beschreibung im figcaption-Tag untergebracht werden. Dabei ist zu beachten, dass das Alt-Attribut trotzdem zu verwenden ist.

Es scheint hinsichtlich der alternativen Texte keine Generallösung zu geben, wann welcher Inhalt vorzusehen ist. Generell kann man wohl davon ausgehen, dass bestimmte Illustrationen – in diesem Fall bezeichne ich sie mal als grafische Elemente – mit rein schmückendem Charakter, keinen Alternativtext benötigen, denn dieser würde sich auf das Erfassen des eigentlichen Inhalts wohl eher störend auswirken. Geht es jedoch um eine Illustration, die zum Verstehen des Textinhalts unerlässlich ist oder zusätzliche Informationen bietet, sollte nach meiner Auffassung ein Alternativtext verfasst werden, der in einem sinnvollen Kontext zum Artikeltext steht.

Sofern es jedoch bei unserer Arbeit ganz konkret um die Erstellung von Informationsprodukten für sehbehinderte oder blinde Menschen geht, und die Einbindung von Illustrationen hierbei keinen echten Mehrwert bietet, ist es möglicherweise sinnvoller, zu prüfen, ob auf die Einbindung von Illustrationen grundsätzlich verzichtet werden kann.

Hinsichtlich der Barrierefreiheit von Illustrationen in Websites und der Barrierefreiheit von Websites im Allgemeinen verweise ich auf das Studium weiterer Literatur und insbesondere auf die Web Content Accessibility Guidelines (WCAG) 2021.

Nun ist man sich bei aller gegebenen Mühe möglicherweise nicht sicher, ob das erzeugte PDF-Dokument oder die Website auch wirklich barrierefrei ist. Neben verschiedenen Möglichkeiten, entsprechende Prüfungen online durchführen zu lassen, gibt es auch Programme zur Nutzung auf dem PC. Die Bundesfachstelle Barrierefreiheit der Knappschaft Bahn See nennt hierzu den Screenreader NVDA (NonVisual Desktop Access). Dieser lässt sich nicht nur im Zusammenhang mit PDF-Dokumenten, sondern auch mit Websites einsetzen.
Für PDF-Dokumente wird zudem der PDF Accessibility Checker (PAC) genannt. Er überprüft das Dokument nicht nur hinsichtlich der PDF/UA-Konformität, sondern auch der der WCAG.

Anwender von Microsoft-Office-Produkten können darüber hinaus auch die integrierte Barrierefreiheitsprüfung verwenden, die sich über den Menüpunkt „Überprüfen“ aufrufen lässt.

Als weitere wichtige Unterstützung auf dem Weg zu einem barrierefreien PDF-Dokument sei auch das sogenannte Matterhornprotokoll erwähnt. Hierbei handelt es sich um eine Checkliste mit 31 Prüfabschnitten zur manuellen Prüfung eines PDF/UA-Dokumentes.

Halten wir also fest:

• Digitale Dokumente wie PDFs oder Websites bieten hinsichtlich barrierefreier Illustrationen mehr Möglichkeiten als gedruckte Werke.
• Vektorgrafiken lassen sich heute problemlos in nahezu alle Dokumente und in Websites integrieren und bieten aufgrund ihrer verlustlosen Skalierbarkeit deutliche Vorteile gegenüber Pixelgrafiken.
• In elektronischen Dokumenten müssen Illustrationen mit einem Alternativtext versehen werden um Screenreadern zu erlauben die entsprechenden Informationen sehbehinderten Menschen zugänglich zu machen.