Spinner

Spinner uttrycker en ospecificerad väntetid när något laddas.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Tillgänglighet

Allmänt: Vid implementering av en loading spinner så fundera på hur du vill förmedla det du visuellt förmedlar även för användare som inte kan se, ibland är det onödigt att leverera massa information som inte ger användaren nytta. Var och när komponenten används kommer påverka tänket hur och om icke-seende användare ska meddelas om att “en process är igång/det laddar”. Så ha det i åtanke beroende på var och hur komponenten kommer att användas, så det inte stör användare med skärmläsare istället för att hjälpa.

Använd aria-live för “live regions” där nya saker kan laddas in för att skrämläsaren ska förstå att något händer/läggs till. Mer information om olika aria-live finns här: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Om loading spinner används/visas när man laddar om en hel sida av innehåll, se då till att det inte går att interagera med innehållet förens sidan är helt inläst. Om anslutningen är dålig och lite i taget syns vi inladdning så kan användaren tror att det är allt innehåll som finns men i verkligheten så har inte allt innehåll laddats in ännu. Då kan en Overlay läggas på sidan under tiden som laddningssnurran visas vilket gör att användaren inte kan interagera med innehåll innan allt är färdigladdat.

WCAG-kriteriet 1.1.1

Beskriv med text allt innehåll som inte är text: Om loading spinner kommer vara synlig i flera sekunder dvs om en laddning kan ta flera sekunder så ska användare med skärmläsare informeras så de inte tror att sidan har kraschat eller liknande. Detta kan göra att användare trycker på uppdatera knappen eller att de lämnar sidan och där med förlorar sin progress i onödan. Eftersom loading spinner är en visuell animation så ska den då förklaras för de som inte kan se. Detta kan göras med exempelvis en dold text för seende användare men som är synlig för skärmläsare. Prova att lyssna med skärmläsare för att se att det inte blir för upprepande.

WCAG-kriteriet 4.1.3

Se till att hjälpmedel kan presentera meddelanden som inte är i fokus:

• Se till att de som använder tekniska hjälpmedel som exempelvis skärmläsare och förstoringsprogram kan göras uppmärksamma på viktiga meddelanden även om de presenteras utanför det område på sidan som användaren har i fokus.

• Ange med hjälp av attributen role eller aria-live var viktiga meddelanden kan förekomma, så får hjälpmedel kännedom om dessa och kan presentera dem för användaren vid ett lämpligt tillfälle.

WCAG-kriteriet 1.4.11

Kontrast på icke-textobjekt: Det ska vara tillräcklig kontrast mellan bakgrund och komponenter, ikoner, symboler och andra grafiska informationsbärande objekt. Minsta kontrast värdet det ska uppnå är: 3.0. Samt när det gäller text så ska det uppnå 4.5 för liten text och 3.0 för stor text.

WCAG-kriteriet 2.2.2

Pausa, Stopp, Dölj (Nivå A): Detta kriteriet gäller dock inte en “laddnings”-animation trots att den kan visas i mer än 5 sekunder om användaren har dålig koppling. Det rörliga innehållet (animationen) visas inte tillsammans med annat innehåll där med så gäller inte denna regel. Mer information finns här:https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

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.