Quelltext der Seite Vorlage:Auflistung/styles

{{Dokumentation/styleSeite|css=1}}
== Funktion ==
Horizontal sollen Listenelemente aufeinander folgend angeordnet werden, durch Trennzeichen gegliedert.

== Barrierefreiheit ==
<section begin="A10Y" />
Für [[w:Screenreader]] wird eine Navigationsstruktur im Dokument generiert.
* In der optischen Präsentation wird dies als konventionelle Abfolge von Verlinkungstexten dargestellt.
* Semantisch handelt es sich um eine einfache Aufzählungsliste <code>&lt;ul></code>, wovon allerdings nur Screenreader etwas erfahren.
* Die sichtbaren Trennzeichen zwischen den Elementen werden per [[w:Cascading Style Sheets|CSS]] generiert, sind damit nicht Bestandteil des [[w:Document Object Model|DOM]], somit auch für Screenreader nicht existent.
* Auch die als Ersatz beim Copy&Paste zwischen den Elementen generierten Pipe-Symbole&nbsp;<code>|</code> werden für Screenreader unterdrückt; jedoch nicht per CSS.
* Anders als eine konventionelle Aufzählung (etwa von Verlinkungen) in einem kontinuierlichen Fließtext getrennt durch nicht vorlesbare Symbole sind die einzelnen Elemente navigierbar voneinander abgegrenzt.
* Beispielsweise können die Elemente mit der Tabulator-Taste weitergeschaltet werden.
* Siehe dazu auch: [https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html ''Breadcrumb Example''.] w3.org (englisch)
* Die Methodik wird im Desktop-Portalrahmen der Wikis seit den frühen 2000er Jahren nicht nur in den vertikalen Seitenleisten, sondern auch in den horizontalen Menüs verwendet.
<section end="A10Y" />

== Klassen ==
; ul.breadcrumb-nav-container
: Für die umgebende Aufzählung.
: Markiert zur optischen Umwandlung von Aufzählung zur linearen Abfolge.
: Ein Element mit <code style="white-space:nowrap">breadcrumb-nav-container</code> ist immer erforderlich.
; ol.breadcrumb-nav-container
: Alternativ zu <code style="white-space:nowrap">ul.breadcrumb-nav-container</code> für hierarchische Aufzählungen.
; ol.breadcrumb-nav-bullet
; ul.breadcrumb-nav-bullet
: Legt das Trennzeichen-Prinzip auf grafische Elemente fest, per CSS-Hintergrundbild.
; span.breadcrumb-nav-bullet-sep
: Gestaltung des verborgenen Trennzeichens, das bei Copy&Paste wirksam wird.
; ol.breadcrumb-nav-bullet-pipe
; ul.breadcrumb-nav-bullet-pipe
: Das Trennzeichen soll ein senkrechter Strich sein sein.
; ol.breadcrumb-nav-bullet-pipe-narrow
; ul.breadcrumb-nav-bullet-pipe-narrow
: Der senkrechte Strich soll dichter am Text stehen; etwa weil dieser nur aus einem Buchstaben besteht.
; ol.breadcrumb-nav-bullet-circle
; ul.breadcrumb-nav-bullet-circle
: Das Trennzeichen soll kreisförmig sein.
; ol.breadcrumb-nav-bullet-blue
; ul.breadcrumb-nav-bullet-blue
: Das Trennzeichen soll königsblaue Farbe haben.

=== Kompatibilität ===
Die Spezifikation ist synchronisiert mit: [[Vorlage:Subpage/styles]]

== Beispiele ==
Siehe [[../Test/]]seite.
{{#tag:pre|{{Auflistung/Test/basics}}
|style="overflow:auto;"}}