Hypertext Markup Language (HTML)

Die Basis-Sprache für das Web ist die Hypertext Markup Language. Auch wenn viel über HTML5 gesprochen wird, ist HTML 4.01 bzw. der XML-konforme Ableger XHTML 1.0 der aktuelle Standard.

Die Trennung von Struktur und Gestaltung

Ein wichtiges Prinzip von Zugänglichkeit ist die Trennung von Struktur und Gestaltung. HTML enthält zwar einige Elemente, mit denen man Texte und Webseiten gestalten kann, sie gelten heute aber als unerwünscht. Soweit das möglich ist, soll die Struktur über HTML und die Gestaltung über CSS vorgenommen werden. Das erleichtert auch wesentlich die Wartung des Codes, macht die Seiten schlanker und kleine Änderungen am Design lassen sich schnell umsetzen.

Strukturierung und Gestaltung werden nicht nur in zwei verschiedenen Sprachen vorgenommen. Sie sollen auch inhaltlich getrennt werden. Theoretisch können die Gestaltungsanweisungen mit in die HTML-Datei gepackt werden. Das hat tatsächlich einen Vorteil: Wer die Webseite als einzelne HTML-Datei speichert, hat alle Gestaltungsanweisungen in der Datei. Die HTML-Datei auf der Festplatte sieht also ähnlich aus wie die Webseite aus dem Web, allerdings ohne Bilder. Allerdings wird sich derjenige, der die Seite danach pflegen darf herzlich bedanken, weil eingebetteter CSS-Code den Aufwand zur Gestaltung der Webseite erhöht und eine Quelle für fehlerhafte Darstellung sein kann. CSS-Anweisungen in HTML-Tags oder in der HTML-Datei sind also zu vermeiden.

Vor allem Sehbehinderte können über den Browser eigene Einstellungen für Schriftart, Schriftgrad oder Farben einstellen. Das wird durch die Trennung von Struktur und Design erleichtert. Wer das mal ausprobieren möchte: Im Firefox unter Extras -> Einstellungen –< Inhalt bei Schriftarten und -farben auf "Erweitert" klicken. Dort ein paar Wunschwerte einstellen und das Häkchen bei "Seiten das Verwenden eigener Schriftarten erlauben" entfernen. Früher wurden auch HTML-Tabellen zur Gestaltung verwendet. Es gab ansonsten kaum Möglichkeiten, Elemente auf der Webseite anzuordnen. Auch diese Konstruktionen sind mittlerweile verpönt, allerdings noch auf vielen auch aktuellen Webseiten und in einigen Themes für WordPress und anderen Redaktionssystemen zu finden. Vor allem Screenreader-Nutzer sind wenig dankbar für solche Konstruktionen, weil Screenreader für jede Zelle die Spalte, Zeile und Inhalt vorlesen, was bei Datentabellen sinnvoll ist, aber bei normalen Inhalten schlicht störend und überflüssig ist.

Strukturierung durch Überschriften
HTML verfügt über die sechs Überschriften-Ebenen <h1> bis <h6>. Normalerweise werden sie nur zur Strukturierung von Text verwendet. Allerdings kommt es selten vor, dass man auf einer einzigen Webseite alle sechs Überschrift-Ebenen verwendet.

Mangels anderer Lösungen hat sich etabliert, den einzelnen Bereichen der Webseite Überschriften zu geben. Nutzer von Screenreadern haben so die Möglichkeit, einzelne Bereiche wie die Navigation, den Inhalt und so weiter direkt anzuspringen. Screenreader-Nutzer können mit den sogenannten Navigationstasten einzelne HTML-Elemente direkt anspringen.

Es gibt unterschiedliche Philosophien dahinter, welche Überschriftenebenen für die Blöcke gewählt werden sollen. Ich finde es eher sinnvoll, Überschriften höherer Hierarchien für den Text zu verwenden und Überschriften der unteren Hierarchien für die Bereichsnavigation einzusetzen. Dabei wird <h1> für die Hauptüberschrift im Inhaltsbereich verwendet, <h2> und <h3> für die Struktur innerhalb des Textes. Die Überschrift <h6> kann man hingegen zur Kennzeichnung der Bereiche verwenden.
Das Ganze wird als logische Strukturierung bezeichnet.

Logisch wäre allerdings eine andere als die oben beschriebene Vorgehensweise sinnvoll. Alle Blöcke der Webseite wie die Kopfleiste, die Navigation oder der Hauptbereich bekommen die Überschrift 1, da sie alle auf der gleichen Ebene der Hierarchie liegen. Ihnen untergeordnete Elemente wie der Text im Inhaltsbereich erhalten entsprechend auch untergeordnete Überschriften. Wofür man sich auch entscheidet, es sollte auf jeden Fall konsistent sein.

Das Ganze wird auch als Überschriften-Hierarchie bezeichnet. Das heißt, ein wichtigerrer Bereich einer Webseite hat eine Überschrift höherer Ordnung als ein untergeordneter Bereich. Klingt kompliziert, ist aber recht einfach. Nehmen wir an, ich wähle wie in diesem Artikel eine Überschrift 1 als oberste Überschriftenebene für meinen Text. Dann dürfen die Zwischenüberschriften in diesem Text nicht ebenfalls eine Überschrift Ebene 1 haben, da die Abschnitte des Textes ein untergeordnetes Element des Textes sind. Und hier haben wir auch einen Kernwiderspruch der Überschriftenhierarchien. Mag sein, dass der Text das wichtigste Element der aktuellen Seite ist, logisch gesehen ist der Text aber ein untergeordnetes Element der Seite ähnlich wie die Navigation, die Kopf- oder Fußzeile.
<2>Sprunganker
Sprunganker werden verwendet, damit Blinde einzelne Bereiche der WEbseite direkt anspringen können. Es sind Links, die Bereiche innerhalb einer Webseite verlinken, so wie bei der Wikipedia die Inhaltsverzeichnisse der Artikel.

Textstrukturierung

Wie schon erwähnt werden zur Textstrukturierung Überschriften verwendet. Außerdem gibt es Elemente für ungeordnete und nummerierte Listen, Zitate oder Tabellen.
Es gibt einige Möglichkeiten, um Hervorhebungen in Texten zu machen. Wie schon erwähnt, sollen Gestaltung und Strukturierung getrennt werden. Deshalb sind Elemente wie <i> für kursiv oder <bold> für fetten Text unerwünscht. Stattdessen wird das <strong>-Element verwendet, das wird über CSS formatiert. Hervorhebungen sollten nicht für wichtige Zwecke eingesetzt werden, sie werden von der Hilfssoftware von Blinden nicht ausgewertet. Auch für Sehbehinderte kann es schwierig sein, gefetteten von normalen Text zu unterscheiden oder kursiven Text zu lesen.

Navigation

Häufig werden HTML-Listen für die Navigationen verwendet. Die Listenpunkte und Einrückungen von Listen werden dabei über CSS wieder ausgeblendet. Wie erwähnt können Blinde so gezielt nach der Navigation suchen.

Semantisches Markup

Ein grundpfeiler der Barrierefreiheit im Internet ist das semantische Markup. Semantisch bedeutet in diesem Zusammenhang, dass die HTML-Tags maschinenlesbare Informationen darüber enthalten, was sie einschließen. Viele Leute machen zum Beispiel eine Liste im Internet, indem sie ein Aufzählungszeichen schreiben und vielleicht noch eine Einrückung machen. Dabei bietet HTML eigene Elemente für Listen, diese haben den Vorteil, dass sie auch von den Screenreadern von Blinden ausgelesen werden können.

Insgesamt hat HTML nur wenige semantische Elemente wie Überschriften, Listen und Zitatblöcke. HTML war ursprünglich vor allem für die Strukturierung von Text gedacht, die Gestaltung von Webseiten war nicht vorgesehen. Erst mit HTML5 und WAI ARIA wird eine stärkere semantische Strukturierung von Webseiten möglich.

WAI ARIA

Die Arbeitsgruppe des W3C für Barrierefreiheit – die WAI – arbeitet aktuell an einem Standard, um Anwendungen im Internet für Menschen mit Behinderung zugänglich zu machen. Die Accessible Rich Internet Applications-Richtlinien(ARIA) ergänzen das in die Jahre gekommene HTML um Attribute für dynamische Elemente wie Schieberegler. Bereits eingesetzt werden Attribute, welche die Funktion von Blöcken beschreiben können. Einem semantisch nicht besonders aussagekräftigen DIV-Container kann etwa das Attribut Navigation verpasst werden. Diese Orientierungspunkte übernehmen die Funktion der oben beschriebenen Überschriften für Bereichsblöcke.

Wer sich schon ein wenig mit HTML5 beschäftigt hat, dem wird das bekannt vorkommen. In HTML5 sollen die Bereiche der Webseite ebenfalls aussagekräftige HTML-Tags wie Navigation, Inhalt, Kopf und so weiter bekommen. Diese Tags werden bereits eingesetzt, ebenso wie die Orientierungspunkte in ARIA.
Leider wird es eine ganze Weile dauern, bis HTML5 oder ARIA als offizielle Standards verabschiedet werden – und noch länger, bis die Hilfstechnik der Behinderten damit umgehen kann.

Übungen

  • Benutze den Screenreader NVDA, um eine Webseite deiner Wahl durchzugehen. Achte besonders darauf, welche Elemente er beim Erreichen bestimmter Bereiche vorliest, insbesondere, wenn der entsprechende Text nicht auf der Webseite steht.
  • Schalte das Stylesheet der Webseite aus, um einmal das „Skelett der Webseite zu sehen. Gehe dazu im Firefox unter dem Menü Ansicht auf Webseiten-Stil und wähle „Kein Stil“. Jedes HTML-Element hat im Browser ein Standardlayout, das über CSS angepasst wird, bei ausgeschaltetem Stil kannst du ungefähr sehen, wie ein Blinder die Seite wahrnimmt, als lineare Folge unterschiedlicher Elemente.
  • Lektüre-Empfehlungen

  • Die deutschsprachige Referenz für HTML ist selfHTML. Hier gibt es auch Infos rund um Textauszeichnung, Tabellen und vieles mehr.
  • Eine Einführung in die Webgestaltung mit Aspekten der Barrierefreiheit bietet das Buch“Einführung in XHTML, CSS und Webdesign“ von Michael Jendryschik, das auch online gelesen werden kann.
  • Semantik im Web – eine kleine Einführung

Wenn Du es nicht machst, macht es keiner