Vorlage:Auflistung/styles
Zur Navigation springen
Zur Suche springen
Vorlage:Dokumentation/styleSeite
Funktion
Horizontal sollen Listenelemente aufeinander folgend angeordnet werden, durch Trennzeichen gegliedert.
Barrierefreiheit
<section begin="A10Y" /> Für 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
<ul>
, wovon allerdings nur Screenreader etwas erfahren. - Die sichtbaren Trennzeichen zwischen den Elementen werden per CSS generiert, sind damit nicht Bestandteil des DOM, somit auch für Screenreader nicht existent.
- Auch die als Ersatz beim Copy&Paste zwischen den Elementen generierten Pipe-Symbole
|
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: 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
breadcrumb-nav-container
ist immer erforderlich. - ol.breadcrumb-nav-container
- Alternativ zu
ul.breadcrumb-nav-container
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 Testseite.
<strong class="error"><span class="scribunto-error" id="mw-scribunto-error-0">Lua-Fehler: Der Prozess konnte nicht erstellt werden: proc_open(/var/lib/mediawiki/errorlog.log): failed to open stream: Permission denied</span></strong>