Eine ergänzende Orientierungshilfe: Die Brotkrumen-Navigation veröffentlicht in 2011zuletzt bearbeitet in 2016

HTML und CSS für Breadcrumbs

HTML sieht kein Element für die Auszeichnung einer Brotkrumennavigation vor. Allerdings handelt es sich bei einer Brotkrumennavigation meist um eine Folge von Links zu übergeordneten Webseiten, d.h. die Links sollten als Navigationsregion ausgezeichnet werden:

Wie Links in einer Brotkrumennavigation aufbereitet werden sollen, wurde in der Vergangenheit oft diskutiert. Die meisten Quellen empfehlen entweder eine Nummerierung mit OL, eine Aufzählung mit UL oder einen Absatz mit P ohne Listenelemente. Die Listen bieten leichte Vorteile, weil dann Screenreader vorab ankündigen, wieviele Listeneinträge in der Brotkrumennavigation stehen.

Beispiel mit UL

Von allen Variationen ist eine einfache Aufzählung mit UL am Ehesten zu empfehlen, denn eine Brotkrumennavigation ist ihrem Wesen nach eine Linkliste. Wenn Links als Liste aufbereitet werden, können sie besser in einem Screenreader übersprungen werden. Darüber hinaus sollten folgende Aspekte im HTML noch berücksichtigt werden:

• Die Navigationsregion benötigt eine Bezeichnung, damit sie von anderen Navigationsregionen unterschieden werden kann. Die Bezeichnung kann mit dem aria-label- oder aria-labelledby-Attribut erfolgen.
• Visuell stellt die Brotkrumennavigation eine Beziehung zwischen der aktuellen Seite und den übergeordneten Webseiten her. Oft wird das durch ein Zeichen wie ein ">" dargestellt. Das Trennzeichen sollte im HTML stehen, damit auch Screenreader es erfassen können.
• Die aktuelle Seite, d.h. der letzte Eintrag in der Navigation, wird meist visuell so gestaltet, dass er sich von den anderen Einträgen unterscheidet. Das muss natürlich auch
  Fatal error: Uncaught Error: Call to undefined function mysql_query() in /is/htdocs/wp1150536_NS87B85NF3/www/bfw/lib/php/content_func.php:198 Stack trace: #0 /is/htdocs/wp1150536_NS87B85NF3/www/bfw/lib/php/content_func.php(174): setScLinkToDb('1.3.1', '20-35-breadcrum...') #1 /is/htdocs/wp1150536_NS87B85NF3/www/bfw/knowhow/breadcrumb/html-und-css.php(21): sclink('1.3.1', 'semantisch') #2 {main} thrown in /is/htdocs/wp1150536_NS87B85NF3/www/bfw/lib/php/content_func.php on line 198