Vad som gör en knapp klickbar.

En knapp är det ställe där allt annat på sidan ska mynna ut. Ändå är det ofta det minst genomtänkta elementet — någon valde en färg som passade, skrev “Skicka”, och gick vidare.

Storlek: 44 pixlar är golvet

Fyrtiofyra gånger fyrtiofyra pixlar är den vedertagna minsta träffytan för touch — det är också måttet Apples riktlinjer för tillgänglighet anger. Det finns matematik bakom den: enligt Fitts lag faller träfftiden brant när ett mål växer från litet till mellanstort, och planar sedan ut. Vi går igenom formeln i UX-lagarna. Runt 44 px börjar avkastningen på ytterligare storlek avta.

Två saker som ofta missas:

• Träffytan är inte samma sak som den synliga knappen. En liten ikonknapp kan se ut som 24 px och ändå ha 44 px träffyta med hjälp av utfyllnad. Det är ofta rätt lösning i en verktygsrad.
• Avståndet räknas också. Två knappar med olika konsekvens — “Spara” och “Radera” — ska inte ligga bredvid varandra. Ett par pixlars marginal är billigare än en ångrad radering.

Etiketten: skriv vad som händer

Knappen ska beskriva handlingen, inte mekaniken.

Svagt	Bättre	Varför
Skicka	Boka tid	Säger vad som faktiskt sker
OK	Radera projektet	Bekräftelser ska namnge konsekvensen
Läs mer	Se priserna	Berättar vart länken går
Klicka här	Ladda ner prislistan	“Här” fungerar inte för skärmläsare
Nästa	Till betalning	Visar var i flödet man är

Regeln som fångar det mesta: knappen ska gå att förstå utan texten runtomkring. Läs bara etiketten högt. Vet du vad som händer? Bra. Annars skriv om.

Ett primärt anrop per vy

Enligt von Restorff-effekten minns och klickar man det som avviker. Effekten är ändlig: framhäver du fem saker framhäver du ingen.

Praktiskt: en fylld knapp, resten som konturknappar eller textlänkar. Kan du inte bestämma vilken som är viktigast är det ett produktbeslut som inte tagits, inte ett designproblem.

De fem tillstånden

Varje knapp behöver fem, och det finns en som nästan alltid saknas.

Tillstånd	Vad det visar	Vanlig miss
Normal	Att den går att klicka	Ser ut som en textruta
Hover	Att musen är över	Saknas — eller är enda signalen om klickbarhet
Fokus	Var tangentbordet är	Bortstylad med outline: none
Aktiv	Att klicket registrerades	Saknas, känns trögt
Inaktiverad	Att den inte går att trycka på	Ingen förklaring till varför

Fokusmarkeringen är den viktiga. Den syns när man tabbar sig fram, och för den som inte kan använda mus är den enda sättet att veta var man befinner sig. Att ta bort den med outline: none — vilket görs ofta, för att standardramen är ful — gör sajten obrukbar med tangentbord.

Ta inte bort den. Byt ut den mot något snyggare:

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

:focus-visible visar ramen för tangentbord men inte vid musklick, vilket är den kompromiss som brukar efterfrågas.

Inaktiverade knappar ljuger ofta

En grå knapp utan förklaring säger “det här går inte” men inte varför. Besökaren står kvar och gissar.

Två bättre vägar: låt knappen vara klickbar och visa felet vid klick, eller skriv ut villkoret bredvid — “Fyll i e-postadress för att fortsätta”. Båda är mer respektfulla än en grå fläck.

Snabbtestet

Tabba dig igenom sidan med tangentbordet. Ser du hela tiden var du är? Går det att aktivera varje knapp med mellanslag eller retur?

Går det inte, är knapparna sannolikt <div>-element med klickhanterare i stället för riktiga <button>. Det är det vanligaste enskilda tillgänglighetsfelet vi hittar, och lösningen är att byta taggen — ett riktigt <button> får tangentbordsfokus, tar emot mellanslag och retur, och annonseras som knapp av skärmläsare utan att du skriver en rad extra kod.