Archiv der Kategorie: DOM (Document Object Model)

Dokument-Strukturierung: gut für SEO, gut für den Besucher, Spitze für die Barrierefreiheit

Zuerst ein bißchen Theorie

Ein Dokument ist im üblichen Sprachgebrauch ein Schriftstück, allenfalls wird noch ein Word-Dokument so genannt. Im Internet-Sprachgebrauch heißt eine Webseite auch ein Dokument, und es gibt ellenlange theoretische Abhandlungen über das sogenannte DOM (Document Object Model), hier bei Wiki kann man es ganz genau nachlesen.

Man kann es aber auch ganz einfach ausdrücken: eine Webseite ist nichts anderes als ein HTML-Dokument, das nach festen Regeln erstellt ist und bestimmte Elemente enthält, die in der HTML-Definition festgelegt sind. Diese Elemente sind standardisiert und werden von ihrem Web-Browser interpretiert und grafisch dargestellt.

Der heutige Standard ist HTML 5, eine sehr gute Dokumentation der Sprachelemente findet man hier bei selfhtml.

Beispiel für ein HTML-Element: eine simple Tabelle

Eine Tabelle in HTML sieht im einfachsten Fall so aus:

<table>
  <thead>
    <tr>
      <th>Vorname</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Evi</td>
      <td>Leu</td>
    </tr>
  </tbody>
</table>

Das erzeugt eine zweispaltige Tabelle mit den Spaltenüberschriften „Vorname“ und „Name“, und einer Tabellenzeile mit den Werten „Evi“ und „Leu“. Im Browser sieht das dann so aus:

dom tabelle
dom tabelle

Das ist schon alles. Was die einzelnen Tags wie <table>, <tr>, <td> usw. bedeuten lernt man in HTML für Anfänger 1, erstes Semester, und das kann auch jeder selber googlen.

Es soll hier mal reichen, wir wollten ja nur ein Beispiel dafür haben, wie ein DOM-Element aussehen kann.

Wer braucht das – wir machen doch unsere Webseiten mit WordPress (oder InDesign oder…)

Natürlich programmiert heute niemand mehr HTML „zu Fuß“, dafür gibt es grafische Bedienoberflächen und WYSIWYG-Editoren zuhauf, die einem die lästige Arbeit mit den ganzen Tags abnehmen und es in komfortablen grafischen Editoren erlauben, HTML-Dokumente so einfach zusammenzustellen wie man einen Brief in Word schreibt.

Trotzdem sollte man als Webdesigner seine HTML-Elemente genauestens kennen und richtig einsetzen, und das ist beileibe nicht selbstverständlich, da wird im Web geschlampert und geflickschustert, was das Zeug hält.  Jeder kennt die Regeln zumindest theoretisch, kaum jemand wendet sie richtig an.  Für Überschriften sind h1..h6 vorgesehen, eine Tabelle formatiert man mit Hilfe des <table>-Tags, es gibt nummerierte Listen, es gibt Image-Tags für die Bilder… das sind viele, aber doch nicht endlos viele. Eine hübsche komplette Liste aller HTML5-Tags findet ihr hier bei MDN Web Docs

DOM sauber umgesetzt: Trennung von Text und Formatierung

Die Idee dabei ist, Text und Formatierung sauber zu trennen, und so wohlstrukturierte Dokumente zu erstellen.

Ein einfaches Beispiel: eine Hauptüberschrift soll fett, in Arial und in 30 Punkt Größe angezeigt werden. Was macht der WYSIWYG-Webdesigner? Er markiert den betreffenden Textabschnitt, drückt auf das Icon für „fett“, wählt in der Dropdownliste für die Schriftart „Arial“ und scrollt in der Schriftgrößen-Zahleneingabe rauf bis 30. Das erzielt zwar den gewünschten Effekt, aber es ist technisch nicht sauber.

Wie gehts richtig? Die Überschrift erster Ordnung kriegt die Tags <h1>…</h1>, und wenn man es nicht dem Browser überlassen will wie eine Überschrift erster Ordnung dargestellt wird, legt man es in seiner CSS-Datei fest. Hierhin kommen unsere Textattribute, wenn man es richtig machen will.

Das ist erstens weniger Arbeit bei der Formatierung, und zweitens hat es den unschlagbaren Vorteil, daß ich bei Änderungswünschen – der Kunde hätte jetzt doch lieber eine andere Schriftart für die Überschriften – nicht alle Überschriftszeilen einzeln anfassen muß, sondern die Änderung einmal zentral in der CSS festlege, und fertig.

Saubere Gliederung

Das habe ich bei der Umarbeitung meiner Webseiten auf barrierefrei neu lernen müssen, bei mir hatte sich da über die Jahre auch eine gewisse Schlamperei eingeschlichen. Ich schreibe ja sehr viel Text, und lange Textwüsten auf einer Webseite sind absolutes Bildschirmgift, die liest kein Mensch. Also, umdenken, Text in kürzere logische Einheiten unterteilen, Zwischenüberschriften einfügen, wo es Sinn macht, Listen und Tabellen verwenden. Das erhöht die Lesbarkeit und hält den Besucher bei der Stange, weil er nicht von unstrukturierten Endlostexten gelangweilt wird.

Einfaches Beispiel: Rezepte mit Struktur

Ich hätte da wieder das einfache Beispiel: alle meine Rezepte im Inselfisch-Kochbuch haben die selbe logische Gliederung:

  • Einleitung
  • Zutaten
  • Zubereitung
  • Tipps

Diese Elemente sind als h2-Überschriften formatiert. H1 kriegt der Titel des jeweiligen Rezepts, das ist einfach der Beitragstitel aus WordPress. Der Text dazwischen ist einfach <p> wie Absatz. That’s all, nach diesem Muster schreibe ich alle meine Rezepte. Ich muß nicht drüber nachdenken wie ich es mache, und es hat bei meinem Publikum einen hohen Wiedererkennungswert und dient der allgemeinen Übersichtlichkeit und Verständlichkeit. Mehr ist nicht dran an der Strukturierung – machen muß man es halt!

Übrigens: Suchmaschinen lieben klar strukturierte HTML-Dokumente (Stichwort Sitemap). Benutzer mit Handicap (Screenreader & Co.) lieben sie auch, weil sie so klar durch das Dokument navigieren können. Deswegen ist eine gute Textstrukturierung auch eine der wichtigsten Voraussetzungen der Barrierefreiheit nach WCAG.

Von Anfang an richtig machen, dann ist das ganz leicht!

Ich habe für die Umstellung des Inselfisch-Kochbuchs auf barrierefreie Strukturierung etwa 200 Rezepte nachträglich mit einer sauberen HTML-Auszeichnung versehen, und glauben sie mir, das war einen Sysiphos-Arbeit, da bin ich tagelang gesessen!

Wenn ich von Anfang an mit sauberen Zwischenüberschriften und klaren Gliederungsebenen gearbeitet hätte, wäre der Weg zur Barrierefreiheit wesentlich kürzer gewesen.

Deswegen kann ich für neue Webseiten-Projekte nur empfehlen: machen sie es von Anfang an richtig. Überlegen sie sich gut, wie sie ihre Seite in logische Elemente gliedern, und halten sie sich an diese Logik. Es wird ihnen bald wie mir gehen: das Gliedern längerer Texte mit Zwischenüberschriften ist mir inzwischen in Fleisch und Blut übergegangen, das mache ich mittlerweile ohne groß darüber nachzudenken. So macht klares, strukturiertes Webdesign richtig Spaß, und meine Besucher lieben es, ob mit Handicap oder ohne.