MP:Mediaprojekte

Barrierefreiheit, Semantik und Struktur einer Webseite visualisieren

Ziggurat ist ein Tool, mit welchem sich die Semantik und Struktur einer Webseite  visualisieren lässt. Doch nicht nur das, es kann auch bei einer Analyse der Barrierefreiheit sehr gute Dienste leisten.

Der klassische Weg ist in den Quelltext der Seite zu schauen und mit dem Webdeveloper Firefox Plugin gewisse Seitenstrukuren (div´s/tables..) zu umranden. Um den logischen Aufbau lässt sich das Lesen der Quelltextenicht vermeiden … das nervt!

Greg (der Author von Ziggurat) hat ein Javascript Bookmarklet programmiert, welches genau dieses Problem behebt. Zigurrat killt jegliches Markup aus der Webseite. Das Script baut die Webseite neu auf und visualisiert die Inhalte in einer Ebenenstruktur. Es werdenTabellen, Block Elemente und Bilder als Ebenen dargestellt und sematisch wichtige Elemente werden hervorgehoben.

Hier zwei Screens von Ziggurat

Die "neue" visuelle Darstellung der Webseite beantwortet direkt diverse Fragen:

• Ist die Webseite sematisch korrekt aufgebaut?
• Wie verschachtelt ist das HTML der Webseite?
• Wurden Tabellen benutzt?
• Ist die Seite mit einem Screenreader zu interpretieren?
• Wurden Alt-Tags zu Bildern gesetzt?

Auf Greg´s Webseite gibt es das Bookmarklet, welches per Draq und Drop auf den Bookmark-Ordner gezogen wird.

Der Link muss dann auf der zu untersuchenden Webseite geklickt werden und schon beginnt die Verwandlung.

Zum Testen von sauber aufgebauten Webseiten, kann ich unseren Blog oder z.B. http://s-fels.de empfehlen. Ein wunderschönes Negativbeispiel ist http://www.spiegel.de.