Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Doppelt gewinkelte Klammer zu?

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Doppelt gewinkelte Klammer zu?

Auch die kleinen Dinge einer Website lassen sich gut oder weniger gut umsetzen. Maik Wagner widmet sich heute den Trennungszeichen in Breadcrumbs. Tipps für eine verständliche Brotkrumennavigation.

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>

Kommentare

Moritz Gießmann
am 22.12.2008 - 08:48

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.

Permanenter Link

Philipp Bosch
am 22.12.2008 - 10:40

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: "»";
}

Permanenter Link

Mike West
am 22.12.2008 - 10:52

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. :)

Permanenter Link
Peter Rozek

Peter Rozek
am 22.12.2008 - 14:29

@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.

Permanenter Link

Mike West
am 22.12.2008 - 14:59

@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.

Permanenter Link

Michel
am 22.12.2008 - 15:12

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?

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Webkraut)
am 22.12.2008 - 15:33

@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.

Permanenter Link

Michel
am 22.12.2008 - 15:48

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

Permanenter Link
Peter Rozek

Peter Rozek
am 22.12.2008 - 16:45

@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.

Permanenter Link
Patrick Lauke

Patrick Lauke (Webkraut)
am 22.12.2008 - 20:24

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...")

Permanenter Link

nikosch
am 06.01.2009 - 23:01

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

Permanenter Link

Ralph
am 24.01.2009 - 09:31

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

Permanenter Link

Die Kommentare sind geschlossen.