Webstandard & Webdesign - CSS, HTML

 

Listen im Sinne der Barrierefreiheit einsetzen

Inspiriert von Björns Beitrag, nun einen weiteren kleinen Anstoss zum Thema Listen und deren korrekten Einsatz. Auf Layouttabellen zu verzichten ist absolut der richtige Schritt in die richtige Richtung, leider ist der falsche Einsatz vom Div ebenso ein Schritt zurück, wie der nicht korrekte Einsatz von Listen zum Layouten und Strukturieren von Webseiten. Im Sinn der Semantik sollte eine Liste die Funktion erfüllen, deren Bedeutung und dessen Sinn sie erfüllen soll. Nämlich der Darstellung und Aufzählung oder -listung von Inhalten. Wir wollen mit dem korrekten Einsatz von Webstandards und deren Elemente keine zusätzliche Barrieren schaffen, mit denen sich User im Umgang mit dem Web im Alltag auseinander zu setzen haben. Dazu trägt der korrekte Einsatz von Listen bei, sei es als georndete (ol), unsortierte (ul) oder definierte Listen (dl). Denn Sie stellen ein von der Usability her unverzichtbares Element zur Strukturierung von Webseiten dar und können deutliche Beziehungen zu den Inhalten von Seiten darstellen.

Ein Problem welches bei falscher oder fehlender Bezeichnung von Listen auftreten kann, wurde von Roger Hudson, Russ Weakley and Lisa Miller auf einer Konferenz im Dezember 2005 erläutert. Denn sie haben User von Screenreadern und Texteditoren einer Reihe von Tests unterzogen, um deren Verhalten in Bezug auf Webinhalte, deren Struktur, Reihenfolge im Sourcecode und Navigationen zu untersuchen. Das Thema "Structural labels" nimmt in dieser Präsentation einen nicht unwichtigen Teil ein, denn ihr Ergebnis der Untersuchung zeigt deutlich, dass selbst erfahrene User dieser Nutzungsgruppen enorme Schwierigkeiten haben, Seitennavigationen und lokale Navigationen auseinander halten zu können. Wenn Navigationen inhaltlich hintereinander und ohne entsprechende Auszeichnung präsentiert werden, sind diese oft unbrauchbar. Auch wenn die Links einer Liste andere Styles besitzen, bspw. auf Grund Ihrer Verlinkung als das Label ( bspw. Kategorien und Archiv im ersten Bsp. ). Für sehende Nutzer übersichtliche und einfach aufgebaute Seiten, können somit zu einer unüberwindbaren Hürde werden.

Code-Beispiel
<ul>
<li>Kategorien</li>
<li>Browser</li>
<li>CSS</li>
<li>Webstandard</li>
<li>XHTML</li>
<li>Archiv</li>
<li>Januar</li>
<li>Februaur</li>
<li>...</li>
<li>...</li>
</ul>

Wichtig ist daher die Bestimmung einer Definition für Navigationen ( bspw. definition term – dt ) um Bereiche einer Liste besser unterscheiden zu können. Eine Auszeichnung der Listen ist daher unverzichtbar und genau deshalb sind in diesem Blog Header ( siehe Quelltextbsp 2 ) zum Einsatz gekommen. Da ich nur über eine Auflistung meiner Beiträge und deren Strukturierung bzw. Kategorisierung verfüge, habe ich auf eine normale Hauptnavigation im herkömmlichen Sinne mit Inhalten wie Portfolio, Selbstpräsentation ( über mich etc. ), Links, Info etc verzichte. Da in diesem Test selbst ungeübte User in Bezug auf die Anwendungssoftware in dem Test mit der Auszeichnung Header am besten klar kamen, war dies für mich die beste Lösung. Anderen ( eventuell besseren oder sinnvolleren ) Vorschlägen stehe ich natürlich gern offen gegenüber. Die Struktur des ersten Beispieles kann auch einfach und ohne für eine Sitemap übernommen werden, denn leider werden selbst Sitemaps noch allzu häufig mittels Tabellen, Divs und Absätzen realisiert.

Code-Beispiel
<h3>Kategorien</h3>
<ul>
<li>Browser</li>
<li>CSS</li>
<li>Webstandard</li>
<li>XHTML</li>
</ul>

<h3>Archiv</h3>
<ul>
<li>Januar</li>
<li>Februaur</li>
<li>...</li>
<li>...</li>
</ul>

Der Vorteil dieses Ansatzes ist es, dass die User sofort den „Inhalt“ der Liste ( die bspw. bei einem Blogroll enorm lang werden kann ) erkennt und gegebenenfalls bei Desinteresse überspringen kann. Besonders für User von Screenreadern sind endloslange Navigationen besonders schwierig zu handhaben, da jeder einzelne Navigationspunkt linearisiert, d.h. einer nach dem anderen gelesen werden.

In der BITV- Bedingung 13.6 wird die Gruppierung von Navigationselementen sowie die Bereitstellung einer Möglichkeit zum Überspringen der Navigationselemente gefordert. Die Vorteile dieser Bedingung wurden hier kurz angeschnitten und sollten in naher Zukunft im Sine aller User etwas häufiger zum Einsatz kommen als es bisher der Fall ist.

Fazit: Eine bessere Auszeichnung für Navigationen, die im Sinne der Semantik und der Usability eindeutige Vorteile schafft und die für mehr Logik im Dokument sorgt, macht die Seitengestaltung unkomplizierter und flexibler.