Gör tydliga användbara knappar

Se till att knappar är lätta att förstå och använda. Namnge knapparna tydligt, och på vedertagna sätt.


Rekommendationer för knapparLänk hit

  • Namnge knappar så att användarna förstår vad som händer när de klickar på dem.
  • Ge knapparna en logisk och användbar placering.
  • Använd lagom många knappar.
  • Presentera inte knappens text enbart som bild.


Namnge knappar så att användarna förstår vad som händer när de klickar på demLänk hit

Använd gärna verb såsom ”Spara” eller ”Skicka”, ”Beräkna slutpension” eller ”Lägg till ny inkomst”.
Om webbplatsen erbjuder olika sökfunktioner, till exempel i databaser, bör sök-knapparna vara tydligt och informativt namngivna utifrån sitt syfte.
En knapp kan då till exempel heta ”Sök på webbplatsen” och en annan ”Sök blankett”.


Ge knapparna en logisk och användbar placeringLänk hit

  • Placera knappar visuellt och flödesmässigt i en logisk ordning, så att användarna enkelt kan navigera även med hjälp av tangentbordet.
  • Markera extra tydligt den knapp som tar användaren till nästa steg.
  • Den knapp som tar användaren till nästa steg ska ligga sist på formulärsidan.
  • Se till att ha tillräckligt avstånd mellan knapparna så att det enkelt går att skilja dem åt.

Använd lagom många knapparLänk hit

Använd inte onödigt många knappar i formulär. Många användare har svårare att använda komplexa formulär. (Se även Minimera antalet fält i formulär (R50)).

Överväg till exempel att avstå från rensa-knappar i formulär. Risken att en användare av misstag rensar alla fält är ofta större än behovet att kunna rensa alla fält.

Men givetvis behövs vissa knappar. Om ett formulär består av flera sidor, bör det finnas knappar för att navigera mellan sidorna. Namnge dem “Föregående” och “Nästa”. Om det finns en ”avbryt”-knapp där ska den avbryta hela flödet, inte bara gå tillbaka till föregående sida i formuläret.
I regel ska en sökfunktion för hela webbplatsen finnas med på alla sidor, i globalmenyn, och ha en tydlig sök-knapp.


Presentera inte knappens text enbart som bildLänk hit

Se Använd text, inte bilder, för att visa text (R128). Ni kan göra undantag om ni bedömer att det blir tydligast med en bildknapp, till exempel för aktionsknappar som tydligt visar huvudflödet genom en webbapplikation. I så fall ska texten i knappen vara 12 px eller större.

Bildbaserade knappar ska ha textalternativ, som behöver formuleras med omsorg, se Möjliggör röststyrning av knappar och kontroller (R162).



Kommentarer (2)

  • Besökare skriver:

    Ang ”Undvik bildbaserade knappar”. Detta torde väl knappast gälla för SVG-baserade bilder? Dessa går, i likhet med t.ex. glyphiconer, bra att använda då dessa förblir tydliga när man zoomar med webbläsarens inbyggda funktioner eller med hjälpmedel/operativsystemets förstoringsfunktion.

    • Besökare skriver:

      Det stämmer att SVG-bilder förblir tydliga när sidan zoomas. Om användaren zoomar in sidan blir texten större och förblir skarp, så på det sättet syns text i SVG-bilder bättre än t.ex. PNG-bilder.

      Om SVG-text anges i relativa storlekar som %, em eller rem så anpassar sig också texten till inställningar för textstorlek som gjorts i användarens webbläsare.

      SVG-bilder har också stöd för title- och description-texter som beskriver innehållet för användare som ej kan ta del av den visuella informationen.

      Det finns dock många andra fällor att gå i när bilder används som knappar. En submit-knapp i ett formulär kan t.ex. som standard användas genom klick, enter-knappen eller mellanslagsknappen. Det ska också gå att navigera till knappen med tangentbord. Används ett bild-element () istället för en knapp ( eller ) så tappar man dessa funktioner. Det blir också svårare för användare med skärmläsare att tolka elementets funktion. Det går att återskapa allt detta på egen hand med JavaScript, tabindex och WAI-ARIA men det är säkrare att använda sig av standardkomponenten för en knapp och lägga in bilder som bakgrund i knappen. Det går också att använda sig av om det inte är en submit-knapp.