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?
In nächster Zeit muss ich Dennis ein oder zwei Bier ausgeben: Bevor er mich durch sein Weblog auf das Mac User Treffen im Unperfekthaus hingewiesen hat, machte er mich auch noch auf die Möglichkeit aufmerksam, AppleCare über eBay statt direkt über Apple zu erwerben.
