Sidjämförelse

Exempel

Designspecifikation

Det finns två olika typer av knappar: primära och sekundära. De två alternativen kan användas för att vikta knappvalen 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å.

Knappar har 3 px hörnradie och text i versaler. Primär knapp har fylld mörkgrön bakgrund, medan sekundär knapp har vit bakgrund och grön ramlinje.

Placering

Desktop

Primär knapp placeras till höger om sekundär knapp. Knappar kan placeras centrerade gruppvis eller högerjusterat. Spacing mellan knappar är primärt 20 px.

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 kapparna dock placeras horisontellt bredvid varandra, om kontexten kräver det och om knapparna har kort text.

Do’s and Don’ts

-

Tillgänglighet

Knappen som är i fokus behövs markeras tydligt och här är det viktigt att tänka på kontrastvärden med färger som väljs att användas. Detta är för att användare ska tydligt kunna se vilken knapp som är i fokus, det finns användare som navigerar sig med tangentbord för att komma åt innehåll.

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 blinda användare får till sig den informationen som de annars missar om de inte kan navigera sig till knappen.

Beroende på om det är viktigt eller inte att användare med skärmläsare vet om att en inaktiverad knapp finns så väljer du den fokusbara eller den ej fokusbara (som döljer knappen).

En guide med videoexempel kring aria-disabled finnas att se här: https://a11y-101.com/development/aria-disabled

Research på komponenten

-

Relaterade resurser/komponenter

-

Status

...

Status

...

Status