Comic Book Guy: Die Seite wurde neu angelegt: „{{Dokumentation/styleSeite|css=1}} == Funktion == Horizontal sollen Listenelemente aufeinander folgend angeordnet werden, durch Trennzeichen gegliedert. === Barrierefreiheit === Diese Spezifikationen sind speziell zur Barrierefreiheit vorgesehen. * 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…“

2025-09-24T12:23:35Z

Die Seite wurde neu angelegt: „{{Dokumentation/styleSeite|css=1}} == Funktion == Horizontal sollen Listenelemente aufeinander folgend angeordnet werden, durch Trennzeichen gegliedert. === Barrierefreiheit === Diese Spezifikationen sind speziell zur Barrierefreiheit vorgesehen. * 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…“

Neue Seite

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

=== Barrierefreiheit ===
Diese Spezifikationen sind speziell zur Barrierefreiheit vorgesehen.
* 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 bei einer Hierarchie um eine nummerierte Aufzählung (<code><ol></code>), wovon allerdings nur Screenreader etwas erfahren.
* Die verbindenden Pfeilspitzen usw. zwischen den Elementen werden per CSS generiert, sind damit nicht Bestandteil des DOM, somit auch für Screenreader nicht existent.
* Alternativ kann ohne eine Hierarchie auch eine einfache Aufzählung (<code><ul></code>) verwendet werden.

=== Breadcrumb ===
Diese Navigationsmethode nennt sich übrigens ''breadcrumb'' (Brotkrumen); die Spur der Brotkrümel, anhand derer Hänsel und Gretel den Rückweg aus dem Wald zu finden beabsichtigen.
* [https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html ''Breadcrumb Example''] w3.org (englisch)
Eine analoge Gliederung semantischer Elemente, die den Charakter eigenständiger Objekte (meist Verlinkungen) erhalten sollen, und nicht als konventionell dahinplätschernder Fließtext, lässt sich mit einer nichtnummerierten Aufzählung erreichen; hier ohne Hierarchie.

=== Unterseiten ===
Die seit vielen Jahren im Kopfbereich bestimmter hierarchisch organisierter Meta-Seiten dargestellte Hierarchie soll flexibler repräsentiert werden.
* Bei kleinen Mobilgeräten bzw. schmalem Bildschirm erfolgt keine Darstellung.
* In die Druckausgabe wird diese Navigation nicht aufgenommen; das ist in der Vorlage geregelt.

== Klassen ==
; ol.breadcrumb-nav-container
: Für die umgebende Aufzählung.
: Markiert zur optischen Umwandlung von nummerierter Aufzählung zur linearen Abfolge.
: Immer erforderlich.
; ol.breadcrumb-nav-gt
: Für die nummerierte Aufzählung.
: Elemente sollen durch <code>></code> links des zweiten bis letzten Elements getrennt werden.
; ol.breadcrumb-nav-lt
: Für die nummerierte Aufzählung.
: Elemente sollen durch <code><</code> links des zweiten bis letzten Elements getrennt werden.
; ol.breadcrumb-nav-middot
: Für die nummerierte Aufzählung.
: Elemente sollen durch einen kreisförmigen mittigen Punkt rechts des ersten bis vorletzten Elements getrennt werden.
; ol.breadcrumb-nav-pipe
: Für die nummerierte Aufzählung.
: Elemente sollen durch <code>|</code> rechts des ersten bis vorletzten Elements getrennt werden.
; ul.breadcrumb-nav-container
: Für die umgebende nichtnummerierte Aufzählung.
: Markiert zur optischen Umwandlung von Aufzählung zur linearen Abfolge.
: Immer erforderlich.
; ul.breadcrumb-nav-gt
: Für die nichtnummerierte Aufzählung.
: Elemente sollen durch <code>></code> links des zweiten bis letzten Elements getrennt werden.
; ul.breadcrumb-nav-lt
: Für die nichtnummerierte Aufzählung.
: Elemente sollen durch <code><</code> links des zweiten bis letzten Elements getrennt werden.
; ul.breadcrumb-nav-middot
: Für die nichtnummerierte Aufzählung.
: Elemente sollen durch einen kreisförmigen mittigen Punkt rechts des ersten bis vorletzten Elements getrennt werden.
; ul.breadcrumb-nav-pipe
: Für die nichtnummerierte Aufzählung.
: Elemente sollen durch <code>|</code> getrennt werden.

== Schreibgeschützte Variante ==
Bei stärkerer oder kritischer Nutzung ließe sich eine Seite [[Gadget:BreadcrumbNav.css]] anlegen, die automatisch nur noch von BOA bearbeitet werden kann.
* Im jungfräulichen Gadget-Namensraum sollte damit jedoch noch abgewartet werden; zurzeit ist das auch technisch noch nicht freigegeben.
* Nachträgliche Linkfixe sollen vermieden werden, und im MediaWiki-Namensraum sollten möglichst keine vermeidbaren Ressourcen mehr eingeführt werden.
Für die erste Entwicklungsphase ist Dreiviertelschutz gesetzt.

== Beispiele ==
Aus wikisyntaktischen Gründen müssen <code><li></code>-Elemente jeweils auf neuen Zeilen stehen.
<syntaxhighlight lang="html">
<ul class="breadcrumb-nav-container breadcrumb-nav-middot">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</syntaxhighlight>
Nachstehend Testfälle zur Funktionalität.

=== gt ol ===
<ol class="breadcrumb-nav-container breadcrumb-nav-gt" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ol>

=== gt ul ===

<ul class="breadcrumb-nav-container breadcrumb-nav-gt" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>

=== lt ol ===
<ol class="breadcrumb-nav-container breadcrumb-nav-lt" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ol>

=== lt ul ===

<ul class="breadcrumb-nav-container breadcrumb-nav-lt" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>

=== middot ol ===
<ol class="breadcrumb-nav-container breadcrumb-nav-middot" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ol>

=== middot ul ===
<ul class="breadcrumb-nav-container breadcrumb-nav-middot" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>

=== pipe ol ===
<ol class="breadcrumb-nav-container breadcrumb-nav-pipe" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ol>

=== pipe ul ===
<ul class="breadcrumb-nav-container breadcrumb-nav-pipe" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>

=== ohne Trennzeichen ===
<ol class="breadcrumb-nav-container" style="margin-left:50%;">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ol>

Vorlage:Subpage/styles - Versionsgeschichte