Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Brotkrumen-Navigation als ineinander verschachtelte Listen?

(Screenshot) Webkrauts: Doppelt gewinkelte Klammer zu?

Maik Wagner schreibt im heutigen Webkrauts-Türchen „Doppelt gewinkelte Klammer zu“ über die Aussprache von Zeichen wie », → oder > in Screen-Readern und welche davon unbenklich für Brotkrummen-Navigationen verwendet werden können. (Puh, langer Satz.)

Am Ende des Artikels schreibt er, und da gebe ich ihm recht:

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

Dabei kam mir folgender Gedanke: Müsste eine Brotkrummen-Navigation nicht eigentlich aus ineinander verschachtelten Listen bestehen um die Tiefe auch semantisch aufzugreifen? In Hauptnavigationen macht man das doch auch so, wenn eine Ebene mit Unterpunkten geöffnet ist.

<ul class="breadcrumb">
<li><a href="">Werners Elektro-Shop</a>
<ul>
<li><a href="">Produkte</a>
<ul>
<li><a href="">Lötkolben</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Schließlich sind die verschiedenen Ebenen miteinander verknüpft und eine ist jeweils die Tochter der anderen, macht also durchaus Sinn, ist aber wahrscheinlich schon wieder zuviel des Guten.

Wenn die Brotkrummen-Navigation nicht aus zu vielen Unterpunkten besteht – was aber meistens nicht der Fall ist -, besteht doch sogar die Möglichkeit, denen, die sich die Website vorlesen lassen, Zusatzinformationen zukommen zu lassen:

<ul class="breadcrumb">
<li><a href="">Werners Elektrop-Shop</a>
<ul>
<li>Hauptkategorie: <a href="">Produkte</a>
<ul>
<li>Unterkategorie: <a href="">Lotkolben</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Diese Zusatzinformationen kann man noch in ein <span>-Element einwickeln, um sie für die Bildschirm-Anzeige zu verstecken. Nicht unbedingt mit display: none;, sonst werden sie gar nicht erst vorgelesen, aber mit dem allseits bekannten text-indent: -9999px; sollte es klappen. Habe ich allerdings nicht getestet.

Wahrscheinlich ist das wieder zuviel des Guten und es reicht, eine Brotkrummen-Navigation als geordnete Liste auszuzeichnen und die Nummerierung auszublenden. (list-style-type: none;) Was meint ihr? $-ility-Experten im Haus?

5 Antworten auf „Brotkrumen-Navigation als ineinander verschachtelte Listen?“

Interessanter Gedanke. Ist aber sicher auch ein wenig Interpretationssache. Ich habe bisher mehr oder weniger Gedankenlos <ul> benutzt, finde aber bei näherer Betrachtung, dass eine <ol> treffender wäre. Schließlich stehen die einzelnen Punkte ja sehr wohl in einem geordneten Verhältnis zueinander.

Bei Deinem Ansatz ist mir das Markup schlicht zu umständlich ;)

Too Much Fucking Markup and Implied Semantics which may or may not be there. Zudem nicht wirklich nett im Screenreader. Listen bitte nur bei mehr als einem Element verschachteln. Die Semantik in HTML ist begrenzt und man muss sie nicht überstrapazieren!

Da stimme ich dem Eric zu. Semantik-Akrobatik wie diese hier nuetzt keinem Menschen und keiner Maschine. Und wen man Breadcrumbs als flache, geordnete Liste ansetzt, machen sie eher mehr Sinn: dies sind die Schritte, in dieser Ordnung, von der Homepage zur aktuellen Seite.

Kommentare sind geschlossen.