Brödsmula

Ett av de bästa sätten för användare att navigera tillbaka i strukuren är genom brödsmulor. Den gör så att de enkelt kan se var befinner sig i strukturen och navigera tillbaka upp i strukturen.

Acceptanskriterier för brödsmulor

Mallens för innehållsida ska innehålla brödsmulor.

Användaren ska inte behöva skrolla på sidan för att hitta brödsmulorna
Länkar i brödsmulorna ska vara understrukna
Det ska gå att använda brödsmulorna med tangenterna (tab).
Brödsmulorna ska ha tillräcklig kontrast (WCAG AA 2.1).
Man ska kunna dölja brödsmulorna vid behov.
Det ska finnas dokumenterat hur man visar och döljer brödsmulorna så att en redaktör förstår det.
Att visa eller dölja brödsmulorna ärvs ner i strukturen automatiskt.
Om brödsmulor är dolda minskar marginalen över innehållet.
Sista nivån ska vara nuvarande sida och uppmärkt med aria-current="location"

Utveckling i Sitevision

Sitevision: Brödsmulorna ska vara skapade med modulen "Flernivålänk".

Brödsmulor visar vanligtvis en hierarkisk stig från den aktuella sidan upp till startsidan eller en överordnad kategori.

Brödsmulor är användbara för tillgänglighet eftersom de ger en visuell indikation på sidans hierarkiska struktur och gör det enkelt för användare att navigera tillbaka upp i strukturen utan att behöva använda tillbaka-knappen eller navigera genom menyer eller sidor.

Dessutom kan brödsmulor även vara användbara för sökmotoroptimering eftersom de ger tydliga och relevanta länkar till andra sidor på webbplatsen och förbättrar användbarheten för både människor och sökmotorer.

CSS-kod för brödsmulor


.vrd-breadcrumb {
    padding: 1rem 0 0;
    margin-top: 0.2em;
}

.vrd-breadcrumb li a.normal {
    padding: 0.4rem 0 0.1rem 0;
    text-decoration: none;
    position: relative;
}

.vrd-breadcrumb li a.normal:hover {
    text-decoration: none;
}

.vrd-breadcrumb li a.normal::after{
    content: "";
    position: absolute;
    background-color: currentColor;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    transition: all .2s ease-in-out; 
}

.vrd-breadcrumb li a.normal:hover::after {
    background-color: transparent;
}

 .vrd-breadcrumb li span{
    padding-left: 0.2em;
 }


.vrd-breadcrumb li span,
.vrd-breadcrumb li a.normal {
    color: #000;
}

.vrd-breadcrumb li a.vrd-current {
    font-weight: 700;
    pointer-events: none;
    text-decoration: none;
}

.vrd-breadcrumb li a.normal.vrd-current::after{
    display: none;
}

Placering

Brödsmulor bör placeras på en tydlig och konsistent plats på webbsidan för att hjälpa användare att snabbt hitta dem och förstå deras syfte. Vanligtvis placeras brödsmulor nära sidhuvudet eller direkt under menyn. Användaren ska inte behöva skrolla för att hitta brödsmulorna.

Utseende

Vetenskapsrådet har tagit fram en gemensam komponent för brödsmulor. Försök följa utseendet även om verksamheten är särprofilerad, då kommer ni får en bra och användarvänlig bördsmula redan från start.

Typsnittet i brödtexten ska vara som bödtexten 16 pixlar. Nuvarande sidan ska vara markerad med vikt 700. Länkar i brödsmulor ska markeras med ett understräck men inte typsnittet understruket. När muspekaren hålls över (hover) ska sträcket under länken döljas. Brödsmulan ska ha 1rem/16px upp mot sidhuvud och 2.875rem/46px mot H1/Vänstermeny.

Exempel på brödsmula

Tillgänglighet

Brödsmulor bör vara tydliga och lättförståeliga, med logiska och beskrivande länkar som ger användare en snabb överblick över webbsidans hierarki. De bör vara lättlästa med kontrasterande färger som klarar WCA 2.1 AA.

De bör även vara responsiva och fungera på mobila enheter och mindre skärmar ner till 320 pixlar. Brödsmulor bör också skalas på ett lämpligt sätt för att passa skärmstorleken, utan att ta upp för mycket utrymme eller störa sidans layout.

Elementet ska även vara tillgängliga för personer med funktionsnedsättningar och avigerbara med tangentbordet för att uppfylla webbtillgänglighetskraven.