Kenyérmorzsa
Adja meg az aktuális oldal helyét egy olyan navigációs hierarchiában, amely CSS-en keresztül automatikusan elválasztókat ad hozzá.
Példa
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Az elválasztó cseréje
Az elválasztók automatikusan hozzáadódnak a CSS-hez a ::before
és segítségével content
. Változással módosíthatók $breadcrumb-divider
. Az idézet függvény az idézőjelek generálásához szükséges egy karakterlánc körül, így ha >
elválasztóként szeretné használni, használhatja ezt:
$breadcrumb-divider: quote(">");
Lehetőség van base64 beágyazott SVG ikon használatára is :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
Az elválasztó a következő beállítással távolítható $breadcrumb-divider
el none
:
$breadcrumb-divider: none;
Megközelíthetőség
Mivel a navigációs útvonalak navigációt biztosítanak, célszerű értelmes címkét hozzáadni, például aria-label="breadcrumb"
az elemben biztosított navigáció típusát leírni <nav>
, valamint aria-current="page"
a készlet utolsó elemére egy jelet alkalmazni, jelezve, hogy az az aktuális oldalt képviseli.
További információkért tekintse meg az ARIA Authoring Practices Guide navigációs útvonal mintáját .