Vorlage:Auflistung/styles

Aus RT-Wiki - IT-Notizbuch
< Vorlage:Auflistung
Version vom 22. Dezember 2022, 02:18 Uhr von Robin Tönniges (Diskussion | Beiträge) (1 Version importiert)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
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>