Carousel

Carousel är ett bildspel för stillbilder och text användaren kan bläddra mellan. 

Open

1177

Open

Inera

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Carousel är ett bildspel som innehåller stillbilder samt text. Bildspel användas i kombinationen text+bild eller att bara växla mellan bilder utan text. Man ska kunna bläddra till höger och vänster i bildspelet.

Bläddringspilarna ligger utanför bildspelsytan på desktop och flyttas in i ytan på mobil.
Aktuell sida samt antal sidor i karusellen visas längs ner till vänster.

Tillgänglighet

Bildspelet bör vara ett komplement till informationen som finns på sidan, det vill säga att inte finns information i bildspelet som inte går att hitta någon annanstans på sidan. Skulle det finnas information som endast kan nås via bildspelet så skulle det bli problematiskt.
 

• WCAG-kriteriet 2.1.1
  Se till att komponenten går att hantera med enbart tangentbordsnavigering.

• WCAG-kriteriet 2.1.2 
  Se till att markören inte fastnar vid tangentbordsnavigation.

• WCAG-kriteriet 3.2.1 
  Utför inga oväntade förändringar vid fokusering (tab-fokus).

• WCAG-kriteriet 1.4.10 
  Skapa en flexibel layout som fungerar vid förstoring eller liten skärm – Det ska gå att zooma in upp till 200%.

• WCAG-kriteriet 1.4.4 
  Se till att text går att förstora utan problem, dvs det ska inte överlappas eller bli oläsligt när användaren förstorar text.

• WCAG-kriteriet 1.3.4 
  Se till att allt innehåll presenteras rätt oavsett skärmens riktning (liggande och stående).

• WCAG-kriteriet 1.4.12 
  Se till att det går att öka avstånd mellan tecken, rader, stycken och ord.

• WCAG-kriteriet 2.4.3 
  Gör en logisk tab-ordning – Tab-ordningen ska exempelvis inte byta håll oväntat eller hoppa mellan interaktiva objekt på ett oväntat sätt. Vanligtvis brukar ordningen vara från vänster till höger.

• WCAG-kriteriet 2.2.2 
  Pausa stopp dölj – Det måste vara möjligt för användaren att pausa/stoppa rörelser ifall bildspelet kan röra sig automatiskt. Bildspelet kan röra sig för fort för användaren samt kan upplevas distraherande.

• WCAG-kriteriet 2.2.1
  Justera tidsbegränsningar – Bildspel/ carousel komponenter måste erbjuda användaren möjligheten att att pausa eller stoppa bildspelet.

• WCAG-kriteriet 1.4.3
  Använd tillräcklig kontrast mellan text och bakgrund – minst 4.5 i kontrastvärde mellan text och bakgrund.

• WCAG-kriteriet 1.4.11 
  Använd tillräckliga kontraster i komponenter och grafik – minst 3.0 i kontrastvärde mellan icke-textobjekt och bakgrund.

• WCAG-kriteriet 1.4.5 
  Använd text, inte bilder, för att visa text – Skriv ut text i stället för att ha en bild av text. Det blir svårare för användare att läsa texten med hjälpmedel om det är en bild. Texten kan även vara svårläst vid in zoomning (bilden av text kan bli otydlig).

•  WCAG-kriteriet 2.4.7 
  Markera tydligt vilket fält eller element som är i fokus – Tydliga fokusmarkeringar ska ha minst 3.0 i kontrastvärde mot bakgrund.

• WCAG-kriteriet 1.1.1 
  Beskriv med text allt innehåll som inte är text – informationsbärande bilder ska ha en alt-text som beskriver för användaren vad som visas på bilden.

• WCAG-kriteriet 2.5.3 
  Text som är synlig på knappar och andra gränssnittskontroller ska finnas i och överensstämma med den maskinläsbara etiketten.

• WCAG-kriteriet 4.1.2
  Namn, roll, värde – Genom att tillhandahålla information om roll, status och värde på komponenten i användargränssnittet så möjliggörs kompatibilitet med hjälpmedel som användaren kan tänkas använda, exempelvis: skärmläsare. Använd i första hand standardkomponenter som finns i html-standarden. Då uppfyller du automatiskt detta krav.

• WCAG-kriteriet 1.3.1  
  Ange i kod vad sidans olika delar har för roll - Öka chansen att informationen presenteras korrekt oavsett mottagarens verktyg, genom att använda html-elementen på rätt sätt

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.