På den här sidan beskriver vi utseende och användningsområde för ett antal olika listor. Listorna är en del av vår typografi.
Innehållsförteckning
Komponentkällor
1177
Inera
Designspecifikation
Bullet list
En bullet list 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 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 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.
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) DESCRIPTION LIST
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 |