På den här sidan beskriver vi utseende Utseende och användningsområde för ett antal olika listor (bullet, numbered, definition). Listorna är en del av vår typografi.
Innehållsförteckning
| Innehållsförteckning | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Komponentkällor
Designspecifikation
Bullet list
En bullet list (unordered list, <ul>) används när vi skapar en lista med onumrerade objekt (<ul>). Det finns ingen särskild inbördes ordning mellan objekten. Olika styling används för olika teman:
1177 för invånare: bullet points i primary/40, text i neutral/20
1177 för vårdpersonal: bullet points i neutral/20, text i neutral/20
Inera och Inera admin: bullet points i primary/40, text i neutral/20
Numbered list
En numbered list (ordered list, <ol>) används när vi skapar en lista med numrerade objekt (<ol>). Det finns en tydlig inbördes ordning mellan objekten där 1 kommer först och resterande objekt i fallande ordning. För både 1177- och Inera-temat används neutral/20 för både siffror och efterföljande text.
Description list
Description list (<dl>) visar listor med innehåll där varje informationspost har en beskrivande term/rubrik (<dl>). Här finns en relation mellan rubriken och dess beskrivning. Dessa listor kan exempelvis användas för att presentera en lista med värden eller termer, som namn, telefonnummer, e-postadresser eller liknande.
För description lists ser stylingen olika ut beroende på tema.
1177
För invånare använder vi den rosa färgen som primär (primary/90), medan vi för vårdpersonal använder den blågrå färgen (accent/95).
Inera
För Inera använder vi den beige färgen (accent/95), oavsett om listan gäller Inera eller Inera Admin. I designsystemet finns två olika description lists: default och column.
Default
Column (1177)
Column (Inera)
Tillgänglighet
WCAG 2.2, 1.1.1 Icke-Textinnehåll (Nivå A):
Se till att allt icke-textinnehåll i listan, såsom bilder eller ikoner, förmedlas till användare som navigerar med hjälpmedel.
WCAG 2.2, 1.3.1 Information och Relationer (Nivå A)
| Status | ||
|---|---|---|
|
Säkerställ tydliga och korrekta relationer mellan termer och deras beskrivningar i description list, vilket underlättar för hjälpmedel att förmedla strukturen och innehållet på ett meningsfullt sätt.
WCAG 2.2, 1.4.12 Avstånd mellan Text (Nivå AA):
Säkerställ att text i listan tillåter avståndsjusteringar utan överlappning eller att det stör läsbarheten.
WCAG 2.2, 1.4.3 Kontrast (Minimum) (Nivå AA):
Säkerställ tillräcklig kontrast mellan text och bakgrund, samt mellan olika delar av listan för att underlätta läsbarhet.
WCAG 2.2, 2.1.1 Tangentbordsnavigation (Nivå A):
Se till att det är lätt att identifiera interaktivitet i listan och att den är går att använda med tangentbordsnavigation.
WCAG 2.2, 2.4.11 Fokus synligt (Minimum) (Nivå AA):
Säkerställ tydlig synlighet av fokus, vilket indikerar det aktuella elementet med tangentbordsfokus.
WCAG 2.2, 2.4.3 Fokusordning (Nivå A):
Säkerställ att navigeringsordningen i listan är logisk och följer ett förutsägbart mönster.
WCAG 2.2, 2.4.4 Länksyfte (Nivå A):
Se till att länkar i listan har tydliga syften, undvik vagt formulerade termer som "Läs mer" eller "Mer information".
WCAG 2.2, 3.1.1 Sidans Språk (Nivå A):
Se till att innehåll och instruktioner i listan är tydligt förståeliga på det förväntade språket.
WCAG 2.2, 3.3.2 Etiketter eller Instruktioner (Nivå A):
Tillhandahåll tydliga och begripliga etiketter eller instruktioner för användare som interagerar med listan.
WCAG 2.2, 4.1.2 Namn, Roll, Värde (Nivå A):
Säkerställ att skärmläsare kan identifiera och rapportera namn, roller och värden för interaktiva element korrekt i listan.
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 |