Das blinde Web – semantische Webtypografie

20. 04. 2017

Webtypografie meint erweiterte Formatierung sowohl für den sehenden wie für den blinden User, dessen Screenreader alle Informationen ausliest. Und der blindeste User ist die Suchmaschine, die gezielt nach Informationen anhand semantischer Tags und Attribute forscht.

Semantische Tags und Attribute für Text

Semantik heißt Bedeutung. HTML bietet viele Tags, die für ihren jeweiligen Inhalt bestimmt sind. Ihre Zahl steigt auch weiterhin, weil die Informationsvermittlung dies erfordert. In der Vergangenheit wurden diese Tags jedoch häufig nach Belieben verwendet, was dazu führte, dass Suchmaschinen nicht vorrangig danach suchen.

Auch kürzlich wurden erneut Diskussionen über Sinn und Unsinn semantischer Tags geführt. Anlass waren die neuen semantischen Tags von HTML 5. Die dabei geäußerten Meinungen zu ignorieren, wäre sträflich. Wir müssen immer gewissenhaft entscheiden, wie weit wir die Semantik einhalten.

When it comes to semantics, if it’s confusing enough for you to ask a question about it, chances are the answer won’t make a realistic difference.

Paul Irish  |   Vollständiger Artikel

Grundsätzlich jedoch sind semantische Tags nützlich, da sie jeder versteht: die Suchmaschine, der Screenreader, der Bearbeiter des Quellcodes. Der folgende Artikel bespricht zunächst gebräuchliche Tags und anschließend weitere nützliche Formatierungen für Informationen.

Überschriften, Headings

Die Tags h1 bis h6 stellen sechs verschiedene Überschriftenarten dar. Sie sind in ihrer Bedeutung (Semantik) hierarchisch zu verstehen, angefangen von h1, der wichtigsten Überschrift, die nur einmal pro Seite verwendet werden sollte, und endend bei h6, der letztwichtigen Überschrift. Trotz allem ist eine Überschrift immer wichtiger und bedeutender als ein Absatz. Sie muss aussagen, was im Absatz folgt, denn der User entscheidet bereits an ihr, ob er den nächsten Abschnitt liest.

Die Tags für Headings bieten ausreichende Wertung und Ordnung bis zu wissenschaftlichen Artikeln. Folgendes Beispiel soll aufzeigen, wie sie gemeint sind, und wie sie äußerlich umgestaltet werden können, ohne ihre Wertigkeit zu beeinflussen.

Darstellung:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Säugetiere

Katzenartige

Großkatzen

Asiatische Großkatzen

Tiger
Kulturgeschichte

Es fällt auf, dass h5 und h6 kleiner als dieser Absatz sind.

Säugetiere

Zusammenfassung in Kategorie 1.

Katzenartige

Informationen in Kategorie 2.

Großkatzen

Informationen in Kategorie 3.

Asiatische Großkatzen

Informationen in Kategorie 4.

Tiger

Informationen in Kategorie 5.

Kulturgeschichte

Informationen in Kategorie 6 über die bekannten Tiger Shir Khan (Das Dschungelbuch) und Tigger (Winnie-the-Pooh).

Die Beispiele verdeutlichen dem sehenden User, wie wertvoll die unterschiedlichen Überschriften sind. Der blinde User weiß es ohnehin, da ihm der Screenreader alles mit dazugehörigen Tags vorliest. Es ist für den Gestalter also außerordentlich wichtig, die Hierarchie zu beherrschen und ausgiebig zu nutzen, um Wertigkeiten zu setzen. Darüberhinaus darf er bei der visuellen Gestaltung auch die sichtbare Hierarchie nicht außer acht lassen.

Abschließende Bemerkung: Es genügt nicht, nur wenige Headings zu benutzen und diese mit Klassen unterschiedlich zu formatieren, um andere sichtbare Wertigkeiten zu erzeugen. Klassen stellen in diesem Zusammenhang nur Ausnahmen dar, um z. B. eine geringfügig andere optische Wirkung zu erwirken.

Absatz

Der Absatz p (Paragraph) stellt einen Sinnabschnitt dar. Dieser sollte nicht zu lang ausfallen. Als Regel gilt: ein Gedanke pro Absatz. Das Tag p für Absatz darf also ausgiebig vielfach genutzt werden, um den Inhalt zu strukturieren. Mit anderen Worten: Der typografische Gestalter sollte den Text tunlichst gelesen und verstanden haben, bevor er sich an Ordnung und Gestaltung einer HTML-Seite macht.

Wichtig: Jeglicher Text sollte mit einem semantischen Tag formatiert sein. Obwohl das Tag p dabei das erste Mittel der Wahl ist (außer für Headings), benötigen z. B. Inhalte in li (List Item) und td (Table Data) weder Paragraph noch Headings. Dies ist laut Syntax auch nicht erlaubt.

Siehe auch: HTML Tag List von w3schools.com.

Hyperlink, Anker

Der Hyperlink, eigentlich Anker (a), stellt eine einfache und direkte Verknüpfung zu weiteren Informationen her. Globale Attribute geben weitere Auskünfte. Das zusätzliche title-Attribut zeigt hierbei schon Informationen an, bevor der User den Hyperlink benutzt.

Der Anker hat drei Zustände: Unbenutzt, aktiv und besucht. HTML gibt für jeden Zustand eine eigene Farbe vor. Zusätzlich die Unterstreichung. Diese sichtbaren Eigenschaften liefern dem User wertvolle Informationen. Jegliche Abweichung davon sollte einen triftigen Grund haben.

Hunting for links takes effort and people won’t do it for long.

Hoa Loranger  |   Vollständiger Artikel

In der gewohnten Typografie sind Unterstreichungen verpönt, weil sie Unterlängen zerschneiden. Im Web sind sie jedoch eine Notwendigkeit. Allein das Menü erlaubt eine Abkehr davon, sofern es als solches erkennbar und erfassbar ist.

Gleiches gilt für die Farben des jeweiligen Zustands. Es ist verständlich, diese Farben harmonisch an das Farbschema der Website anzupassen, dennoch muss die Deutlichkeit erhalten bleiben. Andernfalls entzieht man dem User ein wichtiges Hilfsmittel.

Liste

Eine Liste stellt Einträge in einen bestimmten Zusammenhang. Sie stehen zueinander in bezug. Damit bilden sie ein geschlossenes Ganzes. Jede Suchmaschine wird diesen Bezug feststellen. Und jeder User auch. Daher ist die Liste für die Anker des Menüs empfehlenswert.

Doch allein im Menü dürfen die Listenpunkte entfernt werden, da der User das Menü als solches anhand der Schaltflächen erkennt. Hoffentlich. Alle weiteren Vorkommnisse von Listen bedürfen jedoch der Aufzählungszeichen, damit der User diese als solche erkennt.

Zum besseren Verständnis: Listeneinträge können sehr kurz ausfallen. Sie können aber auch einen längeren Text beinhalten. Oder ein Bild. Sie können ebenso Text und Bild beinhalten. Damit wird der Bedarf an sichtbarer Gliederung deutlich. Der Umfang ist dabei aber nicht entscheidend, sondern die Erkennbarkeit als Eintrag.

Bulleted lists attract attention, support scanning, shorten text, and reveal the relationship of items.

Hoa Loranger  |   Vollständiger Artikel

Weitere semantische Textauszeichnung

Jeder muss Ihre Informationen auslesen können. Helfen Sie ihm dabei. Ihr User ist blind oder sehend. Geben Sie ihm Hilfen zur Hand, damit er versteht, was Sie meinen. Diese Mittel können sichtbar, jedenfalls aber sollten sie sinnvoll formatiert sein.

Jegliche Hervorhebung trennt vom Übrigen. Und jegliche Unterscheidung der Bedeutung hilft zum besseren Verständnis.

Hervorhebung

Sowohl der Sehende wie auch der Blinde verstehen die Bedeutung von Hervorhebungen (Fett, Kursiv), erzeugt durch strong und em. Diese Tags dienen der besonderen Betonung und sollten auch nur für diese Zwecke benutzt werden. So betont strong etwas Wichtiges stark, während em (= emphatisch) nicht ganz so laut hervorhebt.

Der Webdesigner ist gut beraten, eben auch diese Tags zu benutzen und nicht das an sich sinnfreie Tag span für Betonung zu formatieren, da mit dem letzteren keine Bedeutung verbunden ist. Die Tags b (bold, fett) und i (italic, kursiv) sind im Übrigen veraltet und haben auch keinen semantischen Wert.

Eine andere Hervorhebung ist die Markierung mit mark. Sie zeichnet einen wichtigen Bereich auch sichtbar aus. Dieser Bereich kann eben auch ein Abschnitt sein. Die Hintergrundfarbe ist mit yellow vorgegeben. Sie darf angepasst, aber nicht entfernt werden.

Globale Attribute

Globale Attribute wie lang und title reichern mit Informationen (im Hintergrund) an. Sie sollten direkt in semantischen Tags stehen wie bei q lang="" oder img title="".

Das globale Attribut lang kündigt einen Sprachwechsel an, worauf der Screenrader reagieren kann. (Das zusätzliche hreflang im Anker erteilt Auskunft über die Sprache, die in der Zieldatei verwendet wird.) Das globale Attribut title zeigt beim Hovern Informationen wie einen Tooltip an und ist ebenfalls auslesbar. Auch Suchmaschinen profitieren von diesen zusätzlichen Informationen.

Das inline-Tag span sollte nur dann für globale Attribute benutzt werden, wenn diese nicht anders untergebracht werden können. Auch ohne weitere Formatierung ist span dann ein wertvolles Hilfsmittel, auch für den blinden User.

Many users of the web have needs other than just looking at things and clicking on them.

Michael Bleigh  |   Vollständiger Artikel

Zitat, Nachweis

Zitate lassen sich mit q (quote, Kurzzitat, inline) und blockquote (Blockzitat) auszeichnen. Das Attribut cite zur direkten Quellenverknüpfung hat eine größere Bedeutung als ein alleiniger zusätzlicher Hyperlink zur Quelle.

Im Layout kann blockquote großzügig dargestellt werden, um dem sehenden Leser eine sichtbare Hervorhebung zu bieten. Der blinde User erfährt von dieser Darstellung nichts, er bezieht seine Information über das semantische Tag selbst.

Das cite-Tag dagegen kennzeichnet den Titel eines Werkes. Seine Verwendung ist eindeutig. So könnte ein Artikel über »das Boot« Verschiedenes beinhalten, aber mit cite ausgezeichnet, bezieht sich die Information nur auf das Buch oder auf die spätere Verfilmung. Beispiel: citeDas Boot/cite. Es versteht sich, dass der blinde User damit informiert und eine Suchmaschine schneller fündig wird.

Abkürzung, Definition

Verwendete Abkürzungen sollten erklärt werden, wenn zu erwarten ist, dass der User sie nicht kennt. HTML benutzt dafür die Tags abbr (abbreviation, Abkürzung) und acronym (Kurzwort, Kurzform), das jedoch mit HTML 5 nicht mehr unterstützt wird.

Das Tag abbr kennzeichnet eine Abkürzung und sollte als Erklärung das title-Attribut beinhalten, um dem User zu helfen. Eine Änderung des Cursors oder Unterstreichung weisen auf dieses Tag hin.

Beispiel:

Der Begriff Aküfi verrät viel über seinen Benutzer.

Manche Abkürzungen sind gleichzeitig Definitionen, die zuerst mit dfn formatiert werden. Auch hierbei bietet sich das title-Attribut als Hilfestellung an. Eine genaue Erläuterung sollte gleich anschließend erfolgen. Die doppelte Formatierung dfnabbr.../abbr/dfn benötigt dann nur einmal das title-Attribut. Beispiel:

HTML ist die Formatierungssprache für Webseiten.

Eine Definition braucht als solche nur bei ihrer ersten Nennung diese Formatierung. Spätere Vorkommnisse werden als abbr formatiert, die per Hyperlink zur Erstnennung verweisen.

Mehr Semantik mit HTML 5

Semantische Tags sind eng mit einer bestimmten Bedeutung verbunden. Dies führt mit HTML 5 so weit, dass neu eingeführte Tags ausschließlich bestimmten Inhalten vorbehalten sind. So darf article nur für Artikel wie Zeitungsartikel oder eben diesen Fachartikel benutzt werden.

Auch address unterliegt einer starken Einschränkung: Es darf nicht für Adressen benutzt werden, wie vl. zu vermuten ist; es dient ausschließlich Kontaktinformationen zum Urheber der Seite oder zum Urheber des Artikels: dann steht es innerhalb des article-Bereichs.

Gleiche Wertigkeit gilt für summary (Zusammenfassung) und details (weitere Inhalte des Artikels). Das Tag summary zeigt das Wesentliche des Artikels, während die details zunächst ausgeblendet werden. Erst bei Interesse des Users erfolgt die Anzeige. Auch der blinde User kann so rechtzeitig eine Entscheidung treffen.

Zusammenfassung

Zu oft benutzen Gestalter bei der webtypografischen Auszeichnung zu wenige semantische Tags; schließlich erlaubt HTML leider auch unformatierten Text. Die Offenheit dieser Auszeichnungssprache ist aber gleichzeitig ihr Fluch. Darum bedauert Tim Berners-Lee auch über zwanzig Jahre nach ihrer Einführung, dass das Web sich eher auf Text als auf Daten bezieht. Suchmaschinen sehen es übrigens nicht anders.

Most web content turns into undifferentiated text, its meaning lost as it spills into any container you give it.

Sara Wachter-Boettcher  |   Vollständiger Artikel

Gemeint war das Web als einfaches weltumspannendes Mittel zur Informationsverbreitung mit einfachem Zugang. Damit verbunden ist jedoch auch die Verknüpfung von Daten (daher: Web, Gewebe). Ansonsten hätte es nur zu einer Anhäufung von Informationen geführt. Ihr konsequenter Einsatz würde viele Mühen bei der Recherche ersparen; gegenwärtig ist dem leider nicht so.

Anders ausgedrückt: Die eigentlichen Blinden sind wir, die Gestalter, wenn wir nicht einsehen, dass (typografische) Textauszeichnung sehr viel mehr verlangt als das Setzen und die visuelle Formatierung. Denn die äußerliche Gestaltung eines Textes dient allein dem sehenden User, die innerliche kommt dagegen jedem User zugute. Und der blindeste unter allen ist die Suchmaschine.

Der typografische Webdesigner muss sich also noch viel intensiver mit dem Manuskript beschäftigen als es für den Druck nötig ist. Digitale Texte sind auch maschinenlesbar und verlangen daher nach sorgfältig durchdachter Auszeichnung und sinnvoller Verknüpfung. Der blinde User wird sich dafür dankbar zeigen. Wer es auch sein mag.

Siehe auch: Sichtbare Textgestaltung fürs Web

Frank Baranowski