List

Listkomponenten används för att visa en lista med information, exempelvis ett sökresultat. Det finns flera varianter av listkomponenten för olika användningsområden.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Listkomponenten finns i olika varianter som används för att visa olika typer av information i en lista.

• Default: standard lista med rubrik och brödtext för varje post.

• Search: används för sökträffar.

• Event: används i fall där datum, tid och plats behöver anges. Kan användas med och utan https://inera.atlassian.net/l/c/EP3LhYGs.

• News: används för nyheter.

Typer av interaktivitet

List items kan ha två typer av interaktivitet:

• Endast rubrik är en länk. Används för listor där innehållet också kan innehålla länkar till annan information eller andra sidor.

• Hela list item är en länk. Används där hela innehållet ska vara klickbart och ta användaren till en annan sida.

Tillgänglighet

WCAG-kriteriet 1.3.1
Information och relationer: Se till att de olika delarna på sidan har korrekta roller, ex: en lista ska kodas som en lista. Om det är en grupp innehållande en lista med tillhörande ledtext så ska det finnas en koppling mellan ledtexten och list-gruppen.

Riktlinje 104: https://webbriktlinjer.se/riktlinjer/104-gor-listor-med-de-html-element-som-ar-till-for-att-skapa-listor/ Märk upp alla listor som listor med korrekta HTML-element. Använd inte listrelaterade HTML-element för sådant som inte är listor.

Det finns tre olika typer av listor i HTML:

• oordnade listor – punktlistor, när ordningen inte är relevant.

• ordnade, numrerade, listor - när ordningen är viktigt och ska läsas i en sekvens.

• definitionslistor - en beskrivningslista. I listan anger man de termer som ska beskrivas i ett dt

  -element och dess beskrivning i ett matchande dd-element. https://www.w3.org/WAI/tutorials/page-structure/content/#lists
  
  

WCAG-kriteriet 1.4.3
Kontrast på text: Se till att liten text har ett kontrastvärde av minst 4.5:1 mot bakgrunden, och stor text minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.4.11
Kontrast på icke-textobjekt: Grafik, så som ikoner, komponenter och andra informationsbärande grafiska element ska ha kontrast värde på minst 3.0:1. (Nivå AA)

WCAG-kriteriet 1.3.4
Innehåll presenteras korrekt oavsett skärmens riktning: Se till att innehållet visas korrekt oavsett om användaren använder sig utav en enhet som enbart kan vara i liggande eller stående läge. (Nivå AA)

WCAG-kriteriet 1.4.4
Se till att det går att förstora utan problem: Det ska gå att zooma in mer än 200% utan att text överlappar eller att innehållet blir trasigt. Det ska även gå att förstora texten (dubbelt så stort) utan att innehållet blir trasigt eller överlappande.

WCAG-kriteriet 1.4.10
Skapa flexibel layout som fungerar vid förstorning eller liten skärm: Undvik horisontell scrollning ner till 320 pixlars bredd. Använd i första hand responsiv design men gör annars en anpassad mobilversion om responsiv design är inte är möjligt.

Om listan innehåller interaktiva element

WCAG-kriteriet 1.4.1 Använd inte enbart färg för att förmedla information: Använd gärna färg men ha med något mönster eller annan indikation för att urskilja länkar från brödtext. Ex: understrykning eller symbol. OBS! Om det är en länk som går till en extern sida så ska det finnas en symbol som indikerar detta samt att det finns med i beskrivningen för skärmläsare. (Nivå A)

Riktlinje 34: https://webbriktlinjer.se/riktlinjer/34-gor-lankar-och-klickbara-ytor-enkla-att-anvanda-for-alla/ Se till att klickbara ytor inte ligger för tätt inpå varandra. Om en länk har en tillhörande ikon så gör även denna klickbar. Förstora den klickbara ytan genom att inkludera ett område runt det som är länkat. I WCAG 2.2 så kommer ett krav på att klickbara ytor ska vara minimum 24×24 CSS-pixlars storlek, detta är inte officiellt satt ännu då WCAG2.2 är ett utkast fortfarande men kan vara bra att ha i åtanke.

WCAG-kriteriet 2.4.4
Skriv tydliga länkar: Försök i största utsträckning att skriva länktexten så att det går att förstå vart länken leder även om den är tagen ur sitt sammanhang. Undvik att använda ord som “klicka här”, “Läs mer” eller “klicka på denna länk för att..” då detta är underförstått om länken är utmärkt tydligt visuellt som en länk, samt skärmläsare läser upp länkar som länkar redan. Användare som använder skärmläsare kan använda sig utav en länklista av sidan och där med få en översikt. Om länkarna bara heter “läs mer” eller “klicka här” så säger det inte det så mycket om vad länken kommer ta dem. (Nivå A)

WCAG-kriteriet 2.1.1
Se till att det går att navigera med tangentbord: Se till att användaren kan nå alla interaktiva element på sidan med tangentbordsnavigering. (Nivå A)

WCAG-kriteriet 2.4.7
Tydlig fokusmarkering: Se till att interaktiva element har tydlig fokusram vid navigering med tangentbord, ska ha minst 3.0 i kontrastvärde. Användaren ska tydligt se vart hen står med fokuset. (Nivå AA)

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.