Laddning av innehÄll
För att arbeta pÄ liknande sÀtt med laddning av innehÄll i vÄra olika tjÀnster finns riktlinjer för hur vi kan visualisera och informera om laddning.
Fyra olika case har identifierats:
Knapp nÀr en anvÀndare ska skicka nÄgot (dÀr vi inte vill att knappen ska klickas pÄ mÄnga gÄnger)
NÀr innehÄll ska laddas in pÄ specifik plats (i en behÄllare som t ex tabell)
En hel sida ska laddas in
Visualisera laddningsförlopp/procentuell laddning (progress bar)
De flesta exempel för laddning av innehÄll bygger pÄ anvÀndning av komponenten https://inera.atlassian.net/wiki/spaces/USI/pages/233121313. För att skapa tillgÀngliga grÀnssnitt Àr det viktigt att följa rekommendationerna för tillgÀnglighet som beskrivs pÄ komponentsidan.
InnehÄll:
Knapp - loading button
Komponenten loading button kan anvÀndas nÀr anvÀndaren klickat pÄ en knapp för att indikera att tjÀnsten eller systemet laddar. Laddningen kan ocksÄ förhindra att anvÀndaren skickar samma sak flera gÄnger i rad.
Vid anvĂ€ndning av en loading button Ă€r tillgĂ€nglighet viktig. För anvĂ€ndare som har nedsatt syn sĂ„ Ă€r det viktigt att skĂ€rmlĂ€sare kan berĂ€tta att en laddning pĂ„gĂ„r. För att göra detta sĂ„ kan aria-attributet aria-live="polite" anvĂ€ndas. Det Ă€r ett attribut som anvĂ€nds för att beskriva dynamiskt innehĂ„ll. Undvik att anvĂ€nda =âassertiveâ sĂ„ lĂ„ngt som möjligt, denna ska enbart anvĂ€ndas om det Ă€r kritisk information som mĂ„ste förmedlas till anvĂ€ndaren direkt.
LÀs mer pÄ: https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements
Exempel pÄ anvÀndning
AnvÀndaren klickar pÄ knapp för att skicka eller spara ett formulÀr eller annan information dÀr resultatet visas pÄ ny sida.
Â
Â
Designexempel
1177
Â
Inera
InnehÄll laddas in pÄ specifik plats
Ibland behöver vi visualisera att innehÄll laddas in pÄ en annan plats Àn dÀr anvÀndaren klickade. Spinnern placeras dÀr innehÄllet kommer att visas nÀr det har laddat klart.
Exempel pÄ anvÀndning
Kan anvÀndas för att visualisera laddning av exempelvis sökresultat eller innehÄll i datatabeller.
Â
Â
Designexempel
1177
Â
Inera
Hel sida laddas
I vissa fall kan det ta lite tid för innehĂ„ll att laddas in pĂ„ en sida, t. ex. om man har sĂ€mre internetuppkoppling. DĂ„ kan det vara bra att göra det tydligt för anvĂ€ndaren att systemet arbetar för att visa innehĂ„llet. Komplettera spinnern med en text som beskriver vad som hĂ€nder: âInnehĂ„llet laddarâ eller âDu loggas inâ.
Exempel pÄ anvÀndning
Kan anvÀndas för att visualisera laddning av en hel sida med innehÄll.
Designexempel
1177
Â
Inera
Visualisera laddningsförlopp/procentuell laddning
I vissa processer kan vi behöva visualisera ett förlopp eller procentuella vÀrden. DÄ fungerar det bra att anvÀnda en progress bar.
Exempel pÄ anvÀndning
Kan anvÀndas för att visa ett förlopp, exempelvis uppladdning av en fil.