| Innehållsförteckning |
|---|
Exempel
| Iframe | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Iframe | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Designspecifikation
...
Breadcrumb visar sidan man befinner sig på och var den hierarkiskt bor i strukturen, även om sidan inte visas i lokalnavigeringen.
...
Sidor högre upp i strukturen är klickbara och visas med generell styling för länkar: blå, understruken text. Aktuell sida visas med svart text.
I mobil och tablet används istället en tillbakalänk (truncated breadcrumb), som länkar tillbaka stegvis upp till översta sektions- eller samlingssida.
...
Do’s and Don’ts
-
Tillgänglighet
Brödsmulorna ska länka till föregående sidor och den aktuella sidan användaren står på ska också stå med i brödsmulorna, dock ska den inte vara länkad då den går till samma sida som användaren redan står på.
Det är viktigt <nav> element har en aria beskrivning. Antingen med aria-label eller som i exemplet med aria-describedby. Läs mer på mdn.
För länk till nuvarande sida kan aria-current=”page” eller aria-current=”location” användas.
Research på komponenten
-
Relaterade resurser/komponenter
Status
...
Status
...
| Status | ||||
|---|---|---|---|---|
|
...
Publicerad
...
2020-01-18
...
Senast uppdaterad
...
Innehållsförteckning
| 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.
Publicerad | |
Senast uppdaterad |