Webkrauts » Doppelt gewinkelte Klammer zu?

Hauptmenü

Suche

Newsfeeds

Trackbacks

Adventskalender - Tür 22 - Dateien, Sandboxie, Adventskalender, Türchen, Formaten, Konvertieren, Ihrer, Komprimieren - Blog von Lutz Nelde

Artikel

Doppelt gewinkelte Klammer zu?

22. Türchen des Webkrauts-Adventskalenders

Breadcrumb-Navigationen helfen dem Besucher, sich innerhalb der Struktur einer Seite zu orientieren.

Erst bei der Nutzung einer Screenreader-Software wird einem bewusst, welche ursprüngliche Bedeutung die Symbole haben, mit denen die einzelnen Ebenen einer Breadcrumb-Navigation voneinander getrennt werden.

Die klassischen Trennzeichen zwischen den Aufzählungspunkten in Breadcrumb-Navigationen symbolisieren für sehende Benutzer eine Art »Weiter-Pfeil« oder »Ebene tiefer«-Pfeil:

Diese haben aber bei der Nutzung von Screenreadern ihre Tücken, die umso größer werden, je länger der Pfad wird. Sie sorgen unter Umständen für genervte Benutzer, im schlimmsten Falle für Verwirrung und Verständnisprobleme. Mal sind sie beim Vorlesen zu lang, mal haben sie unklare Aussagen oder werden gar nicht vorgelesen.

Lässt man sich die Liste typischer Trennzeichen z.B. von JAWS vorlesen,
merkt man, dass einige Zeichen nicht unbedingt ideal sind.

Beispiel gefällig?

Zeichen	wird vorgelesen als
»	Doppelt gewinkelte Klammer zu
>	größer
∗	Stern
→	stumm
⇒	stumm
•	stumm
/	Schrägstrich
\|	senkrechter Strich
:	Doppelpunkt

(getestet mit JAWS 7.10 und JAWS 8.0 deutsch.)

Manchmal sieht man auch den Einsatz von Pfeilgrafiken; diese brauchen natürlich einen Alternativtext. Wenn dann eines dieser Zeichen im Alternativtext steht, wird es noch aufgeblähter, JAWS sagt dann »Doppelt gewinkelte Klammer, Grafik« oder gar »Doppelt gewinkelte Klammer – Eine Ebene tiefer, Grafik«. Wenn es also unbedingt eine Grafik als Trennzeichen sein soll, dann bitte den ALT-Text leer lassen.

Wie denn jetzt?

Beim Aufbau einer solchen Navigationsliste sollte man sich ein hübsches und sinnvolles Zeichen aussuchen, das auch dem Screenreader-Benutzer die Navigation erleichtert und ihn nicht mit langen Erläuterungen belästigt oder gar im Dunkeln lässt. Hier empfehlen sich der Doppelpunkt, der Schrägstrich oder das Größer-Zeichen, die auch unter Usability-Aspekten ihre Berechtigung haben.

Grundsätzlich sollten Breadcrumb-Navigationen immer als Liste ausgezeichnet sein, hierbei eignet sich eine geordnete Liste (<ol>) besser als eine ungeordnete (<ul>), denn über die CSS-Formatierung kann die Nummerierung ausgeblendet werden, die der Screenreader trotzdem vorliest.

Das führt uns zu folgendem Code:

<ol>
<li><a href="home.html">Startseite</a></li>
<li> : <a href="hierhin">eine Ebene tiefer</a></li>
<li> : <a href="dorthin">zweite Ebene</a></li> 
</ol>

Über den Autor

Maik Wagner lebt und arbeitet in Essen. Neben der Arbeit für Kunden engagiert er sich bei SELFHTML und dem W3C für Webstandards und Barrierefreiheit.

Info:: Doppelt gewinkelte Klammer zu? ist Beitrag Nr. 494
Autor:: Maik Wagner am 22. Dezember 2008 um 07:00
Kategorie:: Adventskalender 2008

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1.

Schöner Artikel über ein Thema, über das ich noch nie nachgedacht habe. Danke für die Anregung. Das Größer-Zeichen macht auch semantisch Sinn, da die Website die zuerst vorgelesen wird, eine Ebene höher steht als die Folgende.

Kommentar von Moritz Gießmann - 22. Dezember 2008 um 08:48
2.

Warum spart man sich nicht die ganzen Probleme mit Screenreadern und setzt die Trennzeichen zwischen den einzelnen Listen-Elementen als Grafik per CSS (background-image) rein? Meiner Meinung nach ist der Gewinn an Semantik, den man erzielt, wenn man mit Doppelpunkten oder ähnlichem im HTML arbeitet, sehr überschaubar.

Interessieren würde mich, ob JAWS & Co. die Trennzeichen auch vorlesen, wenn sie mit dem :before-Pseudo-Selektor und content:"…" eingefügt werden. Also etwa so:

li:before {
content: "»";
}

Kommentar von Philipp Bosch - 22. Dezember 2008 um 10:40
3.

Noch besser könnte so sein, mit entsprechende background Bilder für ol li span:

<ol> <li><a href="home.html">Startseite</a></li> <li> <span>gefölgt von</span> <a href="hierhin">eine Ebene tiefer</a> </li> <li> <span>gefölgt von</span> <a href="dorthin">zweite Ebene</a> </li> </ol>

Damit hört Mann keine komische Zeichen, sondern echte Wörter.

Kommentar von Mike West - 22. Dezember 2008 um 10:52
4.

@Philipp

das :before-Pseudo-Selektor und content:"…" wird vom Screenreader Jaws 8.0 u. 9.0 nicht vorgelesen. Wäre eine schöne und smarte Lösung.

Allerdings können die bekannten IE-krücken den Pseude-Selektor nicht darstellen. Da sag ich nur warten aufs IE8 Christkind…

@mike

Ich würde auf das span-Element verzichten und stattdessen die Hintergrundgrafik dem li-, oder a-Element zuweisen.

Kommentar von Peter - 22. Dezember 2008 um 14:29
5.

@Peter: Sorry, mein kommentar war unklar. Ich habe das span vorgeschlagen, weil die Text ("gefölgt von") kann damit unsichtbar werden. Mit "position: absolute; left: -999em;" auf dem span, wird es gelesen, aber nicht gesehen. Das heisst, dass die Hintergrundgrafik muss ja auf dem li- oder a-Element sein.

Kommentar von Mike West - 22. Dezember 2008 um 14:59
6.

Wären hier nicht eigentlich ineinander verschachtelte Listen angebracht, um die unterschiedlichen Tiefen der Navigationsstruktur anzuzeigen?

Ich hab kurzerhand auch einen Artikel dazu geschrieben: Brotkrummen-Navigation als ineinander verschachtelte Listen?

Kommentar von Michel - 22. Dezember 2008 um 15:12
7.

@Michel: Wir haben über ineinander verschachtelte Listen diskutiert, kamen aber zu dem Schluss, dass sie hier übertrieben sind. Es wären dann Listen, die jeweils nur ein einzelnes Element tragen, überzeugend ist das auch nicht.
Dem Screenreader reicht eine einfache geordnete Liste vollkommen.

Kommentar von Nicolai Schwarz - 22. Dezember 2008 um 15:33
8.

@Nicolai: Okay, ich seh‘s ein. Aber gut zu wissen, dass ich nicht der einzige war, dem der Gedanke kam.

Kommentar von Michel - 22. Dezember 2008 um 15:48
9.

@Michael:

Rein von der hierarchischen Ordnung wäre eine verschachtelte Liste schon richtig. Praktisch wäre das aber wie Nicolai schreibt übertrieben. Wäre zu viel des guten, sozusagen überoptimiert. Ich würde sagen hier sollte auch nutzerorientiert gedacht werden und auf die Erfahrung des Anwenders vertrauten.

Kommentar von Peter - 22. Dezember 2008 um 16:45
10.

Warum braucht man hier eigentlich ein Trennzeichen? Ich wuerd auch eher sagen, ein visuelles Zeichen sollte eher per CSS eingesetzt werden. Selbst mit :before Pseudo-Selektor…macht ja nichts aus, wenn JAWS und co CSS-generierten Inhalt nicht verstehen, da es sich ja hier um ein visuelles Zeichen, und nicht um eigentlichen Inhalt, handelt. Und ich denk mal Screenreader-Benutzer, wie auch andere Nutzer, wissen nun schon was Breadcrumbs sind wenn sie auch mit etwas Text eingeleitet werden ("You are here: blah > blah > blah") und dann nur eine geordnete, und visuell gestylte, Liste kommt. Extra netten text ("gefolgt von" etc) scheint mir hier sehr suspekt (a la "die armen Screenreader user wissen ja net, was des is…")

Kommentar von Patrick H. Lauke - 22. Dezember 2008 um 20:24
11.

Die Trennzeichen entspringen meines Wissens einer nicht ganz eindeutigen Vorgabe des BITV zur Trennung von Hyperlinks in Dokumenten.

zur Auszeichnung als verschachtelte Liste: http://www.simplebits.com/notebook/2004/02/04/sqxii.html

Kommentar von nikosch - 6. Januar 2009 um 23:01
12.

Danke für diese neuen Denkanstöße, vor allem auch für das Gesprochene. Bisher waren mir diese Informationen unbekannt. Ralph

Kommentar von Ralph - 24. Januar 2009 um 09:31