Breadcrumb navigation
Die Breadcrumb-Navigation hilft dem Benutzer, seine Position auf der Website zu verstehen, indem sie einen Breadcrumb-Pfad zurück zur Startseite bietet. Die Elemente werden typischerweise inline angezeigt, mit einem Trenner zwischen jedem Element, der die Hierarchie zwischen den einzelnen Seiten angibt.
Anforderungen
Stellen Sie die Hierarchie der Website dar, indem Sie Links inline anzeigen, wobei ein Trenner zwischen den Elementen die Hierarchie zwischen den einzelnen Seiten angibt. Die aktuelle Seite erscheint zuletzt.
Rezept
Hinweis: Das obige Beispiel verwendet einen komplexen Selektor, um Inhalt vor jedem li einzufügen, außer dem letzten. Dies könnte auch mit einem komplexen Selektor erreicht werden, der auf alle li-Elemente außer dem ersten abzielt:
.breadcrumb li:not(:first-child)::before {
content: "→";
}
Fühlen Sie sich frei, die Lösung zu wählen, die Sie bevorzugen.
Getroffene Entscheidungen
Um Listenelemente inline anzuzeigen, verwenden wir das Flexbox-Layout und zeigen somit, wie eine Zeile CSS unsere Navigation ermöglichen kann. Die Trenner werden mittels CSS generierter Inhalte hinzugefügt. Sie könnten diese zu einem beliebigen Trenner ändern, der Ihnen gefällt.
Barrierefreiheit
Wir haben die Attribute aria-label und aria-current verwendet, um Benutzern unterstützender Technologien zu helfen, zu verstehen, was diese Navigation ist und wo sich die aktuelle Seite in der Struktur befindet. Weitere Informationen finden Sie in den verwandten Links.
Beachten Sie, dass die Trennerpfeile →, die über die CSS-Eigenschaft content im obigen Beispiel hinzugefügt werden, für unterstützende Technologien (AT) wie Bildschirmlesegeräte und Brailleanzeigen zugänglich sind. Für eine ruhigere Lösung verwenden Sie ein dekoratives <img> in Ihrem HTML mit einem leeren alt-Attribut. Ein ARIA role gesetzt auf none oder presentation verhindert ebenfalls, dass das Bild für AT sichtbar ist.
Alternativ können Sie die CSS generierten Inhalte durch Einschließen eines leeren Strings als Alternativtext, vorangestellt mit einem Schrägstrich (/), zum Schweigen bringen; zum Beispiel content: url("arrow.png") / "";.
Wenn Sie generierte Trenner einfügen, die für AT sichtbar sind, wählen Sie stattdessen den ::after-Pseudoelement-Selektor anstelle von ::before, sodass der Trennerinhalt nach dem HTML-Inhalt und nicht davor angekündigt wird.