Användbarhetsboken berättar hur man gör webbplatser tillgängliga och användbara. Läs den här, eller beställ från Bokus eller Adlibris.

Knapp

Användning

Ett klick på en knapp avslutar arbetet med ett formulär - antingen för att man är klar eller för att man vill avbryta.

Det är också vanligt att knappar utsträcks till andra arbetsuppgifter (med hjälp av javascript eller genom att vara förklädda länkar).

Detta kapitel behandlar det som är gemensamt för alla sorters knappar. Följande kapitel tar upp mer specifika användningar.

Utformning

Det finns flera olika metoder för att skapa en knapp.

<input>

Den vanligaste är med hjälp av HTML-koden <input>. För knappar gjorda på detta sätt varierar utseendet kraftigt, inte bara mellan olika webbläsare och mellan Macintosh och PC. Det kan också variera kraftigt på en och samma webbsida, som ett resultat av små ändringar i formatmallen.

Bild 96. Den enda skillnaden i koden mellan dessa två knappar är att den undre fått en bakgrundsfärg i formatmallen. Överraskande nog ger det till resultat en helt annan knapptyp. (Skärmdump från Internet Explorer 6 på PC.)

Det går att styra typsnitt, fet och kursiv, storlek och färg på texten. Även kontrollerna för bakgrundsfärg och kantutseende fungerar relativt väl med nästan alla webbläsare.

Bild

En variant av <input> gör det också möjligt att använda en bild som knapp. Denna kan dock skapa tillgänglighetsproblem, se Knapptext bör inte göras som bild, nedan. Den kan inaktiveras, men ger ingen visuell ledtråd om att så skett.

Button

Ett modernare sätt är med HTML-koden <button>. Den gör det bland annat vissa möjligheter att kombinera text och bild utan att offra tillgängligheten. Den kan dock ge problem med gamla webbläsare.

Länk och javascript

Ett fjärde alternativ är att med hjälp av javascript låta en länk fungera som en knapp. Själva knapputseendet ordnas med hjälp av formatmallar, vilket ger mycket god kontroll över utseendet och konsekvens mellan olika webbläsare.

Som alla metoder som använder ett element till något det inte är avsett för kan denna ge vissa tillgänglighetsproblem – det är inte uppenbart att det är en knapp för den som inte kan se den. Den kräver också att användaren har javascript (se sid 426 ).

Knappen kan inaktiveras, men det är webbmakarens ansvar att i så fall även ändra utseendet.

Mer om länkars förhållande till knappar i Låt inte knappar fungera som länkar eller länkar som knappar , sid 120 .

comments powered by Disqus