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?