Listor (bullet, numbered, description)

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

Komponentkällor

1177

 

 Inera

Designspecifikation

Bullet list

En bullet list (unordered list, <ul>) används när vi skapar en lista med onumrerade objekt. 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. Det finns en tydlig inbördes ordning mellan objekten där 1 kommer först. 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. 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.

I designsystemet finns två olika description lists: default och column.

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.