Donnerstag,
01. Dezember 2005

Arne Kamola hat in seinem Weblog die Diskussion bezüglich der Barrierefreiheit von YAML angeregt. Sein Hauptkritikpunkt ist die Platzierung der Hauptinhalte dem Quelltext. Durch die Verwendung von Floats für die Seitenspalten erscheinen diese zwingender Weise im XHTML-Quelltext vor dem eigentlichen Hauptinhalt. Den technischen Hintergrund für diesen strukturellen Aufbau des Templates habe ich bereits in diesem Beitrag erläutert. Sein Hauptkritikpunkt bleibt davon jedoch unberührt.

Und so habe ich nach Möglichkeiten gesucht, die Inhalte unabhängig von der Darstellung am Bildschirm auch im Quelltext entsprechend ihres Informationsgehaltes zu ordnen (wichtig - oben, weniger wichtig - unten). Nach einigem Überlegen legte sich meine anfängliche Betriebsblindheit und daher folgen jetzt ein paar Anregungen für die Anwendung des Templates.

Abb. 1: YAML Standardaufteilung der Spalten


Als Basis verwende ich in meinem Tutorial (Stand: Version 1.1 vom 25.11.05) ein 3-Spalten-Layout mit Header und Footer, siehe Abbildung 1. Im XHTML-Quelltext von kommt als erstes die rechte Spalte (gelb), danach die linke Spalte (grün) und erst an dritter Stelle folgt der eigenliche Hauptinhalt der Seite, die mittlere Spalte (grau). Das Schema der XHTML-Struktur ist nachfolgend dargestellt.

Abb. 2: YAML-Stuktur mit neu sortierten Randspalten


Lässt sich daran etwas ändern? Ja, wenn auch nicht viel. Da sowohl die linke als auch die rechte Spalte (#col1 und #col3) als floats definiert sind, müssen sie zwar im Quelltext zwingen vor der mittleren Spalte #col2 erscheinen, ihre Reihenfolge untereinander ist jedoch egal. Weitergehende Änderungen an der Dokumentenstruktur sind nicht möglich, wenn die volle Flexibilität von YAML (z.B. Spaltentrenner ohne Grafikeinsatz mittels border-Definition) erhalten bleiben soll.

Lassen sich mit YAML Arne Komalas Forderungen nach einer inhaltsorientierten Struktur des Quelltextes umsetzen?
Die Randbedingungen für die Beantwortung dieser Frage werden folgendermaßen abgesteckt:

  1. Die Navigation (Haupt- und Untermenus) sollen immer am Anfang des Quelltextes stehen
  2. Im Anschluss soll der Hauptinhalt der Webseite folgen
  3. Als Letztes folgen im Quelltext alle weiteren Zusatzinformationen.

Durch diese Forderungen soll eine möglichst hohe Nutzungsqualität (z.B. geringer Srollaufwand) in alternativen Textbrowsern erreicht werden. Was mit YAML in dieser Hinsicht möglich ist und was nicht, werden die folgende Layoutvariationen zeigen. Das Ziel versuche ich, durch eine möglichst geschickte Nutzung der zur Verfügung stehenden Spalten zu erreichen. Die Farbcodierung der einzelnen Spalten entsprechend Abbildung 2 zeigt in den nachfolgenden Abbildungen die jeweils erforderliche Reihenfolge der beiden Spalten #col1 und #col3 im XHTML-Quelltext an.

Verweilen wir zunächst bei einem üblichen 3-Spalten-Layout mit einer Hauptnavigation im Header, einer Unternavigation in einer Randspalte und dem Hauptinhalt in der mittleren Spalte. Soll die Unternavigation in die rechte Spalte, so können wir YAML ohne Anpassung im Quelltext direkt verwenden - Punkt 1 wäre erfüllt, siehe Abbildung 1.

Abb. 3: 3-Spalter, Unternavigation rechts


Möchten wir die Unternavigation hingegen in der linken Spalte platzieren (Abbildung 3), so tauschen wir einfach die beiden Randspalten im Quelltext entsprechend Abbildung 2. Auch in diesem Fall wäre ist Punkt 1 erfüllt. Die Punkte 2 und 3 können bei diesem Layout mit YAML nicht erfüllt werden. Die Gründe hierfür sind bekannt. Doch es geht ja gerade erst los denn mit YAML lässt sich noch eine ganze Menge mehr anstellen. Wie wäre es hiermit?

Abb. 4: 3-Spalter, Navigation im Header (a)


Ein solches Layout findet man beispielsweise im Law-Blog. Dabei könnte #col1 für den Hauptinhalt genutzt werden. In den beiden rechten Spalten würden hingegen die Zusatzinfos platziert. Die Spaltenbreite für #col1 kann in Pixeln (fix) oder Prozent (flexibel) angegeben werden. Der übrige Platz wird zwischen den beiden Spalten #col2 und #col3 zu gleichen Teilen vergeben. Mit diesem Layout wären alle drei Punkte der Liste erfüllt.

Abb. 5: 3-Spalter, Navigation im Header (b)


Anders herum - mit dem Hauptinhalt ganz rechts - geht es natürlich ganz genauso. Doch nicht nur 3-Spalten-Layouts sind mit YAML machbar. Durch Abschalten einer Spalte, lassen sich verschiedene 2-Spalten-Layouts erzeugen.

Benötigen wir beispielsweise ein 2-Spalten-Layout mit Navigation in der linken Spalte, so wird #col3 einfach aus dem Quelltext entfernt (Abbildung 6). Punkte 1-3 sind erfüllt.

Abb. 6: 2-Spalter mit Navigation in #col1


Soll die Navigation hingegen im Header platziert werden, dann muss der Hauptinhalt natürlich direkt danach kommen. Dazu platzieren wir den Hauptinhalt einfach in #col1 und #col2 wird zur Randspalte ‘degradiert’, siehe Abbildung 7.

Abb. 7: 2-Spalter mit Navigation im Header


Das gleiche Spielchen lässt sich seitenverkehrt natürlich auch mit #col3 treiben. Auf entsprechende Abbildungen verzichte ich an dieser Stelle.

Fazit

Die für die vorgestellten Layoutvariationen erforderlichen Anpassungen der YAML-Basis beschränken sich, wie bereits im Tutorial angedeutet, auf wenige CSS-Befehle mit denen die Breitenangaben für die drei Spalten festgelegt werden.

In Sachen Optimierung für Textbrowser steht das YAML-Template damit nach meiner Meinung keineswegs auf verlorenem Posten. Auch wenn sich die Kritikpunkte für das normale 3-Spalten-Layout nicht vollkommen ausräumen lassen, so sind bei einer ganzen Reihe von Layoutvariationen die Forderungen nach einer inhaltsorientierten Struktur des Quelltextes problemlos mit YAML umsetzbar.


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.