Button

Med knappar kan användare utföra en åtgärd eller navigera till en annan sida.

Open

1177

 

Open

Inera

 

Innehållsförteckning

Komponentkällor

1177

Inera

Designspecifikation

Varianter

Det finns tre varianter av knappar: primära, sekundära och tertiära. De tre varianterna kan användas för att vikta val användaren måste göra mot varandra. Den primära används t.ex. för det valet som är vanligast eller du helst vill att användaren ska klicka på. Det går bra att kombinera både primär och sekundär knapp, eller primär och tertiär knapp för att vikta två val.

Disabled state

Komponenten button finns med state “disabled”. Vi avråder dock från att använda disabled states för interaktiva element så långt det går. Läs mer om alternativ för disabled states på https://inera.atlassian.net/l/cp/RV1QS9pK.

Om du ändå behöver använda en disabled button ska knappen ska vara läsbar av skärmläsare. Detta kan göras med “aria-disabled=true” istället för “disabled”, vilket låter användaren veta om att det finns en knapp. “aria-live” låter användaren inte skicka in något.

Storlekar

Förutom olika varianter finns också olika storlekar: small, medium och large. De tre storlekarna kan användas för att knappen ska kunna anpassas till användningsområde och kontext.

Knapp med ikon

Det finns möjlighet att ha knappar med ikoner. Antingen med ikon och text eller bara en ikon.

Placering

När två knappar placeras tillsammans i en grupp, tänk på att gruppen ska upplevas som en enhet och behöver ha tillräckligt med luft över/under och på sidorna för att inte flyta samman för mycket med annat innehåll.

Desktop

Primär knapp placeras till höger om sekundär knapp. Spacing mellan knappar är primärt 20 px.

I desktop placeras grupper av knappar (primär + sekundär eller primär + tertiär) högerjusterat i gränssnittet som standard. I de fall det krävs eller är mer logiskt ur användbarhetsperspektiv, exempelvis i formulär, kan knapparna även placeras vänsterjusterat.

Mobil

Knappar i mobil har per default fast bredd som följer griden/bredden för innehållet. Knappar visas stackade efter varandra med 20 px avstånd. Primär knapp placeras nedanför sekundär knapp.

I vissa fall kan knapparna dock placeras horisontellt bredvid varandra, om kontexten kräver det och om knapparna har kort text. Dock rekommenderas det inte.

Button link

Knappar som länkar till en annan sida, istället för att utföra en funktion, kallas för “Button link”. Den ser exakt likadan ut som vanliga knappar, men har bara ett annat beteende.

Loading button

Loading button kan användas när användaren klickat på en knapp för att indikera att tjänsten eller systemet laddar.

Vid användning av en loading button är tillgänglighet viktig. För att 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.

Det finns särskilda riktlinjer för använding av loading buttons vid https://inera.atlassian.net/wiki/spaces/USI/pages/3385000053.

Språk/copy

• Skriv knapptexter i VERSALER då det förstärker knappens utseende. Det är medvetet val och skall inte kopplas till eventuella skrivregler där man ofta undviker versaler då ordbilden i versalskrivna ord blir sämre.

• Undvik knappar med många ord, se gärna avsnitt om Copy. I vissa sammanhang till exempel på 1177.se startsida så kan en puff ha en knapp med många ord, men i ett interaktivt gränssnitt bör knappen i första hand bestå av verb, i andra hand verb + substantiv om substantivet behövs för att särskilja flera liknande knappar.

Tillgänglighet

WCAG-kriteriet 2.4.7

• Fokusram ska vara tydlig med tillräcklig kontrast 3,0:1.

WCAG-kriteriet 1.4.11

• Kontrast på icke-textobjekt ska uppnå minst 3.0 i kontrastvärde.

WCAG-kriteriet 1.4.3

• Kontrast på text mot bakgrund ska ha minst 4.5 i kontrastvärde för liten text och minst 3.0 för stor text.

WCAG-kriteriet 2.5.3

• Knappen ska ha ett namn som stämmer överens med uppmärkningen i koden.

WCAG-kriteriet 3.2.3

• Knapparna ska ha en konsekvent placering på hela webbplatsen/formulären så användaren lätt hittar dom.

• Man ska exempelvis inte heller byta ordningen på ‘skicka’ och ‘avbryt’ knappar.

WCAG-kriteriet 2.4.3

• Tabbordningen ska vara logisk, det ska exempelvis inte skifta får vänster till höger och sedan till höger till vänster. Primärt har vi använt vänster till höger.

WCAG-kriteriet 2.5.8

• Knappar ligger inte för tätt inpå varandra så det blir svårt att klicka på rätt klickyta.

WCAG-kriteriet 2.5.2

• Det ska gå att ångra eller avbryta processen av att klicka på en interaktiv komponent.  Funktionalitet bör inte aktiveras i och med att användaren klickar ner eller vidrör skärmen, i stället bör händelsen aktiveras när användaren släpper upp musknappen eller tar bort fingret från skärmen.

• Om någon funktionalitet måste ske redan när användaren klickar ner, så ska det finnas möjlighet att ångra händelsen om inte hela vitsen med funktionaliteten går förlorad.

• För användare som inte kan se knapparna är det viktigt att man inte döljer information. Med användning av aria-disabled kan man indikera att knappar är inaktiverade så att användare med skärmläsare får till sig den informationen.

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.