Breadcrumb

Breadcrumb visar sidan man befinner sig på och var den hierarkiskt bor i strukturen, även om sidan inte visas i lokalnavigeringen. I mobil och tablet används istället en tillbakalänk (truncated breadcrumb), som länkar tillbaka stegvis upp till översta sektions- eller samlingssida.

Open

1177, desktop

 

Open

Inera, desktop

 

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

Allmänt för länkar:

• Aktuell sida ska inte ha en aktiv breadcrumb, de föregående sidorna ska vara länkade dock.

• En länk får aldrig vara tom.

• Undvik icke-formativa namn på länkar så som:

  • Klicka här

  • Här

  • Mer

  • Läs mer

  • Info

  • Länk

• Om det är en externlänk (länk som öppnar nytt fönster eller tab) så ska det finnas en indikation som visar att det kommer hända om man klickar på länken.
  Detta kan indikeras med hjälp av en ikon och att lägga till så att skärmläsaren kan berätta att det är en externlänk.
  
  Exempelvis:

  <a href="https://example.com" target="_blank">
  example link
  <span class="screen-reader-only">(opens in a new tab)</span>
  </a>

Specifikt för mobil (truncated breadcrumb):

Tillbaka-länken ska inte ersätta den globala navigationen, den ska förhöja och hjälpa användaren att smidigt kunna navigera tillbaka till föregående sida.

Vart ska nav ligga? Nav ska ligga innan (main) annars måste användaren gå igenom brödsmulorna varje gång när de vill gå till huvudinnehållet på sidan.

WCAG-kriteriet 1.4.3
Den visuella presentationen av text och text i form av bild har ett kontrastvärde på minst 4,5:1 (Nivå AA). Då breadcrumbs anses som liten text (text mot bakgrund) så ska den uppfylla detta kontrastvärde.

WCAG-kriteriet 2.1.1
Tangentbordsnavigering: Se till att det går att nå breadcrumbs länkarna med tangentbord.

WCAG-kriteriet 3.2.3
Konsekvent navigation och struktur: Se till att strukturen/placeringen av breadcrumbs hittas på samma ställe genom de olika sidorna. Det ska vara lätt för användaren att hitta och känna igen sig när de navigerar genom webbsidan.

WCAG-kriteriet 2.4.4
Gör tydliga länkar: Det ska vara lätt för användaren att förstå vad som kommer hända när hen klickar på en länk. Det är extra bra om länken i sig kan vara tydlig när den är utanför sitt kontext.

WCAG-kriteriet 1.4.1
Använd inte enbart färg för att förmedla information: För länkar exempelvis så ska de även ha en understrykning för att indikera att det är en länk och inte bara brödtext. Om färgen är det enda som skiljer på vanligt text och en länk så kan färgblinda eller användare med nedsatt syn missa detta.

Feedback

Hjälp oss att förbättra den här komponenten genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.