Riktlinje nr 60 Prio 2

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

  • Undvik bildbaserade knappar.
  • Namnge varje knapp så att användarna förstår vad som händer när de klickar på den, till exempel ”Beräkna slutpension” eller ”Lägg till ny inkomst”.

Rekommendationer för knappar i formulärLänk hit

  • Sträva efter så få knappar som möjligt.
  • 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.
  • Om en knapptryckning innebär att information skickas från användaren, kalla knappen för ”Skicka”.
  • Lägg till en Avbryt-knapp, om formuläret består av flera sidor. Avbryt ska då avbryta hela flödet, inte bara gå tillbaka till föregående sida i formuläret.
  • Undvik Rensa-knappar i formulär. Risken att en användare av misstag rensar alla fält är större än behovet att kunna rensa alla fält.
  • Om ett formulär består av flera sidor, ska det finnas knappar för att navigera mellan sidorna. Namnge dem “Föregående” och “Nästa”.

Ge knapparna en logisk och användbar placering

Placera knappar visuellt och flödesmässigt i en logisk ordning, så att användarna enkelt kan navigera även med hjälp av tangentbordet.

Se till att ha tillräckligt avstånd mellan knapparna så att det enkelt går att skilja dem åt.

Undvik bildbaserade knappar

Undvik bildbaserade knappar, eftersom texten i dem inte kan förstoras. 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 en alt-text.

Sökfunktioner ska ha tydliga knappar

I regel ska en sökfunktion för hela webbplatsen finnas med på alla sidor, i globalmenyn, och ha en tydlig sök-knapp. Om webbplatsen erbjuder andra typer av sökfunktioner, till exempel i databaser, bör de sök-knapparna vara tydligt och informativt namngivna utifrån sitt syfte. En knapp kan då till exempel heta ”Sök bidrag”.



Kommetarer (2)

  • Ilias Bennani 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.

    • Andreas Nylin 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.