Barrierefreiheit von Tagclouds

Da heute im Team die Frage aufkam, wie und ob man Tagclouds barrierefrei gestalten kann, hier ein paar Gedanken dazu.

Tagclouds sind in erster Linie eine optische Orientierungshilfe. Je nach Definition erkennt der Nutzer auf einen Blick, welche Begriffe oft nachgefragt werden (wertende Ausrichtung) oder zu welchen Bereichen zahlreiche Beiträge vorhanden sind (inhaltliche Ausrichtung).

Da es sich bei einer Tagcloud um eine Liste von Links handelt, ist es sinnvoll, für die Darstellung die HTML-Listenform zu verwenden.

Wichtig ist, dass die Priorität eines Begriffes nicht nur optisch erkennbar ist (durch Farbe, Schriftgrad oder -formatierung - hier bitte auf ausreichende Kontraste und Skalierbarkeit der Schrift achten, sowie die Begriffe nicht nur allein durch Farbe unterscheiden), sondern auch im Title des Links auftaucht. Und das nicht in der Form “Priorität 1 ...”, “Priorität 2…” sondern z.B: Arbeitslosigkeit 25 Beiträge Priorität 2, Arbeitswelt 80 Beiträge Priorität 1, Berufliche Aus- und Weiterbildung 5 Beiträge Priorität 3 usw..

Idealerweise besteht die Möglichkeit, die Tagcloud wahlweise alphabetisch oder nach Prioritäten zu sortieren.

Ferner sollte darauf geachtet werden, dass die Links einen ausreichenden Abstand zueinander haben und dass die Zeilenhöhe ausreichend ist.

Außerdem sollte dem Nutzer unbedingt die Möglichkeit gegeben werden, die Tagcloud zu überspringen, am besten durch Einsatz eines Ankers oder Accesskeys der zum Beginn des nächsten Seitenbereichs führt.

Im Sinne der Barrierefreiheit sollte sich die Tagcloud natürlich auch nicht automatisch im Hintergrund aktualisieren und verändern, während man die Webseite betrachtet. Auch eine dynamische Neuordnung der Begriffe bzw. Vergrößerung der Schrift bei ähnlichen Themen o.ä., wenn man z.B. mit der Maus drüberfährt, wird eher verwirren statt helfen.

Wenn es sich um eine Tagcloud mit wenigen wichtigen Begriffen für den gesamten Webauftritt handelt statt für vereinzelte untergeordnete Bereiche, könnte man zusätzlich auf das Microformat rel=“tag” zurückgreifen, das seinen Platz im a-Tag hat. (z.B. <a href=“http://www.irgendwas.de/stiftung” rel=“tag”>Stiftung Digitale Chancen</a>). Achtung: Semantisch als Tag gekennzeichnet wird hierbei nicht der am Bildschirm angezeigte Verweis “Stiftung Digitale Chancen” sondern der letzte Abschnitt des Links, in diesem Fall “stiftung”.
Leer- und Sonderzeichen des Tags in der URL sollten dabei URL-encodiert sein.

Gesendet von R. Romppel Zuordungen: Kommentare • Partizipation und Teilhabe •

• E-mail
• Facebook
• Twitter
• Google Bookmarks
• Del.icio.us
• Mister Wong

(1) Kommentare • Permalink

Yahoo!-Webentwickler Mark Norman Francis hat sich 2006 schon einmal mit ähnlichen Schlussfolgerungen zu diesem Thema geäußert, der Blogbeitrag bietet auch einige Beispiele: http://24ways.org/2006/marking-up-a-tag-cloud/