Tag 1: Geeignetes Markup durch Webstandards

Die Basis: Listen

Die Diskussionen um die Verwendung geeigneten (X)HTMLs ranken einerseits um die »lose« Aneinanderreihung von Hyperlinks, andererseits um die Einbettung in Container (div>), Absätze (p>) oder eben Listen(einträge) (dl>, <ol>, <ul>). Vielleicht kommt man einer Klärung des zu wählenden Markups näher, wenn man sich fragt: wann ist (X)HTML im Internet am sinnvollsten?

Richtigerweise gehen die Trends zu einer zunehmenden Semantisierung. Das bedeutet, dass Inhalte mit einer möglichst auf diesen Inhalt bezogenen Struktur ausgezeichnet werden. Das nutzt nicht nur beispielsweise bei der Verwendung assistiver Technologien, weil sich die Benutzer mit der Tabulatorentaste durch zentrale Elemente wie Links bewegen können, sondern auch ganz allgemein beispielsweise beim Ranking in Suchmaschinen. Fragt man jedoch beim hier verhandelten Thema nach den praktischen Vorteilen, sollte die Liste spätestens bei der Verschachtelung von mehreren Ebenen zum Favoriten werden. Bei korrekter Auszeichnung werden Untermenüs innerhalb des zugehörigen Listeneintrags eingebunden. Dadurch wird unmittelbar auf die Struktur der Informationsarchitektur eingegangen. Manche Vorlesegeräte geben - je nach Konfiguration - die Verschachtelungen auch zusätzlich aus. Gründe genug also, sich für die Liste zu entscheiden.

Ungeordnete oder nummerierte Liste?

(X)HTML stellt mehrere Listentypen zur Verfügung. Die Definitionsliste (dl>) scheidet an dieser Stelle aus, so dass hier die Frage aufkommt, ob die Wahl einer ungeordneten (ul>) oder einer nummerierten Liste (ol>) sinnvoller ist. Versucht man sich Menüs ohne visuelles Design aber vollständig bedienbar vorzustellen, kommt der Gedanke auf, Links wie in einem Inhaltsverzeichnis zu nummerieren, um den Besuchern, die von der Visualisierung nicht profitieren können, klare Informationen über die Verortung von Navigationsebenen und ihren Links zu geben.

Es scheint nahe zu liegen, dann auch nummerierte Listen (ol>) einzusetzen. Sie sind aber für diesen Zweck nicht optimal geeignet. Zum einen stellt (X)HTML generell keine Einbindung der Ebenennummerierung bei verschachtelten Listen zur Verfügung, was bei komplexen Navigationen unübersichtlich wird. Zum anderen können Probleme bei der Gestaltung mit CSS (Cascading Style Sheets) entstehen. Bestünde in einem Projekt die Anforderung, die Nummerierung von Listeneinträgen auszublenden, hätte das zur Folge, dass sowohl bei einer Auszeichnung mit list-style:none; als auch bei abgeschalteter Ansage von Listenelementen einige Screenreader diese Zahlen nicht auslesen. Ebenso sind sie nicht geeignet als Trennzeichen für die Sprachausgabe und werden nicht wie druckbare Zeichen interpretiert (siehe hierzu auch das nächste Kapitel).

Demnach bleibt noch die ungeordnete Liste, auf die wir unser Menü aufbauen. Wir beschränken uns an dieser Stelle der Übersichtlichkeit halber auf ein Beispiel mit zwei Ebenen, da hier alle notwendigen Elemente bereits enthalten sind und das Menü grundsätzlich auf beliebig viele Ebenentiefen anwendbar ist. Es ergibt sich in Verbindung mit den Links zunächst beispielsweise folgender Ausgabecode:

20. <!-- Die Liste für die erste Ebene -->
21. <ul>
22. <li><a href="foo.html">Struktur</a>
23. <!-- Einbettung der Liste für die zweite Ebene -->
24. <ul>
25. <li><a href="foo.html">Bereiche</a></li>
26. <li><strong>Listen</strong></li>
27. </ul></li>
28. <-- Ende der Einbettung der zweiten Ebene -->
29. <li><a href="foo.html">Gestaltung</a></li>
30. </ul>

In diesem Beispiel befände man sich also auf einer Seite, die sich mit Auszeichnungen und Design beschäftigt. Die aktuell aufgerufene Seite würde sich mit Listen beschäftigen. Der Listeneintrag selbst ist dann nicht mehr verlinkt. Damit kommt man einer allgemeinen Usability-Forderung nach, die sinnvollerweise verlangt, dass Links nicht auf sich selbst verweisen dürfen. Das ist auch leicht nachvollziehbar. Wäre der Begriff "Listen" an dieser Stelle verlinkt, entstünde der Eindruck, dass hier noch mehr oder andere Inhalte abgelegt sind. Für die Umklammerung wird in diesem Beispiel das strong-Element verwendet, weil wir beabsichtigen, aufgerufene Seiten sowohl visuell als auch auditiv zu betonen.

Attribute in Links einsetzen

Das title-Attribut

Der Einsatz des title-Attributs wird unter anderem von der BITV empfohlen und von Webdesignern mit gutem Willen angewandt. Die Grundempfehlung muss aber lauten: Ist die Benennung eines Links und damit seines Zieles eindeutig, ist der Einsatz des title-Attributs nicht notwendig. Manche Ausgabegeräte, z. B. grafische Browser als tooltip, geben sowohl das title-Attribut als auch den eigentlichen Link-Namen aus. Daher macht es wenig Sinn, hier einfach mit Wiederholungen zu arbeiten. Zum einen stellen sie keine aussagekräftigen Zusatzinformationen zur Verfügung, zum anderen enerviert es beispielsweise in Screenreadern. Stellen Sie sich vor, sie bekämen bei jedem Link, den Sie ansteuern, etwas vorgelesen wie: "Bereiche Bereiche". Nicht gut.

title-Attribute sollten nur dann eingesetzt werden, wenn die Linknamen beispielsweise nicht sprechend genug sind. Manche beabsichtigten Linknamen sind beispielsweise wegen ihrer Länge nicht mit der Gestaltung kompatibel oder müssen aus anderen Gründen gekürzt werden. Andere wiederum sind wegen der Mehrfachbedeutung ihres Namens nicht eindeutig genug. Benutzen Sie dann sinnverwandte Ausdrücke oder Übersetzungen bei Begriffen, die nicht der Projektsprache angehören. Einer der Links aus dem obigen Beispiel könnte etwa so aussehen:

25. …<a href="foo.html" title="Über das div-Element">Bereiche</a>…

Navigieren ohne Maus mit accesskey?

Im Allgemeinen werden für das Navigieren ohne Maus, sei es bei Sehbehinderung oder kleinen Displays, bei motorischen Behinderungen oder einfach aus persönlichen Vorlieben die Tabulatorentaste oder Tastaturkürzel eingesetzt.

Letztere - also die Ergänzung von Links mit accesskey-Attributen - haben sich nicht als spezifisches Mittel eines "Zugangs für alle" erwiesen. Zum Beispiel kann ein Mensch mit motorischen Behinderungen, wie einer Verkürzung der Arme durch eine Contergan-Schädigung, das gleichzeitige Drücken von mehreren Tasten nur sehr schwer oder gar nicht anwenden. Auch besteht die Gefahr, dass accesskey-Attribute mit verschiedenen vorgegebenen Tastenkombinationen der Ausgabegeräte übereinstimmen. Bei solchen Gerätekonflikten sind sie entweder innerhalb eines Internetauftrittes nicht anwendbar oder sie können die Funktionen eines Benutzeragenten außer Kraft setzen.

Der Einsatz von Tastaturkürzeln ist zwar über den Einsatz (weniger) freier Zeichen möglich, es steht aber nur eine begrenzte Anzahl zuverlässig zur Verfügung, was eine durchgängige Anwendung in komplexen Menüs ausschließt. Nicht minder schwierig ist deren Vermittlung: in manchen Ausgabegeräten müssen sie zusätzlich mit der Eingabetaste ausgelöst werden oder bei unterschiedlichen Betriebssystemen werden unterschiedliche Funktionstasten benutzt, manche Geräte benötigen zwei, andere drei Tasten. Letztlich bleibt hier nur eine sinnvolle Konsequenz: Wenn überhaupt, dann setzen Sie accesskeys nur für die Tasten des Nummernblocks ein und belegen mit ihnen zentrale Seiten oder Funktionen eines Internetauftrittes wie der Startseite, der Übersichtsseite, der Hilfeseite, dem Kontaktformular oder einer Blätterfunktion (zur nächsten/vorherigen Seite). Ansonsten sollten Sie auf Tastaturkürzel verzichten und diese den Ausgabegeräten vorbehalten lassen. Bedenken Sie auch, dass sich bisher noch kaum Konventionen durchgesetzt und verbreitet haben, welche (zentralen) Seiten mit den verbleibenden Kombinationen angesteuert werden sollten. Einen Beitrag zur Bewältigung leistet das AccessKey-Pad.

Navigieren ohne Maus mit tabindex

Das Tabbing ist allgemein ein beliebtes und probates Mittel, sich rasch ohne Maus durch ein Dokument zu bewegen. Der Einbau einer kontinuierlichen Folge ganzer Zahlen im tabindex-Attribut ermöglicht vermeintlich ein kontrolliertes Steuern in Websites. Aber auch hier können Probleme auftreten: In manchen Ausgabegeräten fallen nicht nummerierte Links oder Formularelemente generell aus der Steuerungsreihenfolge und werden übersprungen, das heißt: sie sind dann mit der Tabulatorentaste gar nicht ansteuerbar.

Hinzu kommt die Einsicht, dass bei entsprechender Auszeichnung - und das ist bei der Anwendung von Webstandards der Fall - Navigationsmenüs bzw. alle Inhalte so oder so linear angelegt werden und dadurch eine Indizierung nicht notwendig ist. Ist die Entscheidung über den Einsatz des tabindex-Attributs letztlich abhängig von den Anforderungen und der Konzeption eines Projektes, so kann man doch sagen, dass es sich in der Regel empfiehlt, die Aufmerksamkeit auf eine lineare und semantisierte Codierung zu legen und auf das tabindex-Attribut zu verzichten. Das erhöht nebenbei die Performance und mindert den Pflegeaufwand, da bei Ergänzungen nicht jedesmal die tabindex-Reihenfolge kontrolliert oder sogar angepasst werden muss.

Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.