Knappar

Exempel på knappar

Användning

• Primär knapp - används i de flesta fall, till exempel vid spara/redigera/nästa. Kan även kombineras med ikon (se variant)
• Sekundär knapp - används oftast för att ge användaren möjlighet att avbryta eller stänga utan åtgärd
• Varningsknapp - Ovanlig. Används i särskilda situationer där det är viktigt att användaren förstår att åtgärden innebär en stor ändring som kan innebära en stor påverkan eller inte går att ändra tillbaka.

Om placering

• Vi lägger knappar till vänster och längst ner under formulär och innehåll som de berör. Ett skäl till detta är för att det ska gå snabbt för ökat att följa en linje i vänsterkant rakt ner till knappen. En knapp som ligger till höger kan vara svårare att hitta när man använder zoom-verktyg.
• Lägg den primära knappen först, följt av den sekundära knappen (om den används).

Om tillgänglighet

Använd button för att ange en knapp i koden, och undvik länkar som ser ut som knappar. Koden för button tillför viktiga funktioner avseende tillgänglighet. För att särskilja knappar som heter samma sak på en sida (till exemnpel flera Redigera-knappar) är det viktigt att använda en label som också ger mer information, till exempel vad det är man redigerar med knappen. En skärmläsare kommer annars bara läsa upp "Redigera" flera gånger och användaren kan få svårt att veta vilken knapp som är vilken. Exempel på angivelse av tydlig label : <button aria-label="Redigera roller">Redigera</button>.

Om inaktiva knappar

Vi undviker helt användning av inaktiva knappar. Beroende på sammanhang är det bättre att

• inte alls visar en knapp
• tillåta att man använder knappen men får ett felmeddelande
• tillåta att knappen tar användaren vidare trots att de inte gjort några ändringar

Problemet med inaktiva knappar är att de förvirrar mer än de hjälper och de funkar dåligt ur ett tillgänglighetsperspektiv. De är ofta designade så att de inte går att läsa (kontrasten är dålig) eller så är det inte uppenbart vad man måste gör för att knappen ska kunna användas.

Specifikationer