Button
Knappar används som "call to actions"(uppmaning till handling). Det finns olika visuella vikter på knapparna beroende på i vilket syfte den ska användas.
Det finns olika nivåer av knappar för att minska misstag vid definitiva val och för att minska eller öka den visuella vikten vid fall där det finns andra valmöjligheter vid behov. För avbryt/spara -fall följs det logiska flödet med att dialogen eller ytan som är aktiv ”avslutas” med en slutsats, alltså spara.
Avbryt/spara – spara/avbryt:
Namnsättning av knappar är viktig då de ska förmedla vad som händer och inte bara nej/ja som utan sin kontext tappar betydelse. När knappar, oavsett visuell vikt namnsätts ska det vara tydligt vad knappen gör i förhållande till kontexten, exempelvis ”avbryt/spara”.
Namnsättning av knappar:
Vilken visuell vikt som knapparna har skiljer sig främst mellan positiva och negativa fall. Genom att skapa visuell skillnad minskar vi felfall och ökar chansen i att hitta rätt snabbt. I de negativa fallen sätts det visuella fokuset på det alternativ som gör minst skada, exempelvis ”avbryt” medans i de positiva fallen ligger den visuella vikten på exempelvis ”spara”.
Positiva fall:
Negativa fall:
- Knappen följer färgens tema.
- Knappens bredd anpassas efter längden på texten.
- Hörnens rundning är 4 px på alla typer av knappar.
- Knappens bredd styrs av texten:
- 18 px marginal på båda sidor innan brytgräns.
- 22 px marginal på båda sidor efter brytgräns.
- Minsta storlek på primärknappens bakgrund är 87 px.
- Om knappen bara är en ikon ska inte bakgrunden vara 87 px bred.
- Knappens textstorlek är brödtext och följer brytgräns.
- Knappens höjd är fast på 30 px oavsett brytgräns.
- Knappen kan innehålla:
- Ikon och text
- Endast text
- Endast ikon (Ev bryta ut till egen knapp framåt)
Tillgänglighetskrav
- Space/Enter aktiverar knapp
- Knappen har rollen ”button”
- Knappen har en ”accessible label”. Som standard räknas det tillgängliga namnet från vilket textinnehåll som helst inom knappelementet. Kan dock också förses med aria-marked by eller aria-label.
- Om en beskrivning av knappens funktion är närvarande har knappelementet aria-described by inställt på ID för elementet som innehåller beskrivningen.
- När den åtgärd som är associerad med en knapp inte är tillgänglig, har knappen aria-disabled inställd till true.
- Om en knapp är disabled ska det fortfarande gå att fokusera på den.
- Man ska kunna via tangentbordet navigera sig till knappen i båda enabled och disabled tillstånd.
- När knappen är fokuserad ska den kunna aktiveras av space och enter.
- Man ska via en readspeaker höra tillståndet på knappen och vad det står på den.
- Samma acceptanskriterier som primärknapp.
- Knappens bredd styrs av texten 10 px marginal på båda sidor oavsett brytgräns.
- Annars samma acceptanskriterier som primärknapp.
- Textlänkens färg är inte systemspecifik.
- Annars samma acceptanskriterier som primärknapp.