Knappar

Knappar bör användas när användare ska utföra en handling, exempelvis skicka ett formulär eller söka efter något. För att navigera till andra webbsidor bör länkar användas.

Olika typer av knappar

Knappar av stor vikt

Fyllda knappar har störst vikt och ska användas för den primära handlingen. Använd endast en fylld knapp i en grupp av knappar. Om den primära handlingen går ut på att utföra något som inte går att ångra, som exempelvis att radera, kan en fylld röd knapp användas.

Knappar av medelvikt

Handlingar som är vanliga men inte primära har ingen bakgrundsfärg men en kantlinje som markerar knappens kanter. Den sekundära knappen har mindre visuell synlighet än den primära och kan användas både fristående och i grupp med andra knappar.

Knappar av lägre vikt

För mindre vanliga handlingar kan textknappar användas.

Tänk på att

• Håll knapptexten kortfattad och beskriv tydligt vilken handling en knapptryckning medför. Använd helst verb och undvik knapptexter som ”Ok”, ”Ja” och ”Nej”.
• Behåll samma textgrad på knappar som övrig text på sidan.
• Knappens text och bakgrund ska ha god kontrast (använd gärna WebAIM:s Color Contrast Checker).
• ​Om en ikon används istället för text ska det finnas en beskrivning för hjälpmedel (som exempelvis skärmläsare).
• Använd helst html-elementen <input type=”submit”> eller <button>. Om något annat html-element används ska namn, roll och värde anges.