Logotyp vetenskapsrådet
logo_mobile

Formulärets instruktioner

Tydliga instruktioner hjälper användarna att fylla i formuläret.

Skapa tydliga och klickbara fältetiketter

Skapa en beskrivande fältetikett (label) som förklarar funktionen hos varje fält i formuläret. Genom att i kod (med hjälp av for-attributet på label-elementet) koppla etiketten till fältet kan användare markera fältet genom att klicka på etiketten, vilket ökar den klickbara ytan. Genom kopplingen blir det även möjligt för en person som saknar en visuell presentation att veta vilken etikett som hör till vilket fält, eftersom skärmläsare läser upp etiketten när fältet får fokus.

Om utförliga instruktioner behövs, placera dessa i första hand i inledningen av formuläret.

Kodexempel:

<div>För att bli användare behöver du fylla i anmälningsformuläret nedan. Observera att din e-postadress måste vara kopplad till en forskningsutförare (exempelvis ett universitet, en högskola eller ett forskningsinstitut).</div>
<label for="adress">Adress <span>(obligatoriskt):</span></label><input id="adress" type="text" autocomplete="street-address" aria-required="true" />

Se till att hjälpmedel kan presentera meddelanden som inte är i fokus

De som använder tekniska hjälpmedel, som skärmläsare och förstoringsprogram, ska kunna göras uppmärksamma på viktiga meddelanden även om de presenteras utanför det område på sidan som är i fokus. Ange med hjälp av attributen role eller aria-live var viktiga meddelanden kan förekomma, så får hjälpmedlen kännedom om dessa och kan presentera dem för användaren vid ett lämpligt tillfälle. Användarna riskerar annars att missa varningar, upplysningar och felmeddelanden.

Exempel:

Lägg till aria role="alert" på felmeddelanden så att skärmläsaren kan läsa upp dem. Märk upp meddelanden med aria-live så att skärmläsaren blir medveten om att innehållet uppdateras dynamiskt.

Kodexempel:

<h2 role="alert">Du måste fylla i din e-postadress i formatet namn@domän.se.</h2>

Gör inte instruktioner beroende av sensoriska kännetecken

Ge alla användare möjlighet att förstå instruktionerna till formuläret. Även den som inte kan uppfatta form eller storlek, eller saknar möjlighet att relatera till höger eller vänster, behöver kunna förstå navigation och instruktioner. Det kan till exempel handla om personer som använder tekniska hjälpmedel som presenterar informationen på ett alternativt sätt. Det är exempelvis svårt för en person som använder skärmläsare att förstå en instruktion som ”klicka på knappen till höger”, eller för en icke hörande att kunna följa instruktionen “när du hör tonen är det dags att klicka”.

Tänk på:

  • Undvik texthänvisningar som "till höger" eller "till vänster", eftersom de inte gäller för alla sorters skärmar, till exempel läsplatta eller mobiltelefon.

Gör tydliga och användbara knappar

Se till att alla knappar är lätta att förstå och använda. Ge knapparna en logisk, lätt åtkomlig plats och namnge dem så att användarna förstår vad som händer när de klickar.

Exempel:

  • Namnge knappar så att användarna förstår vad som händer när de klickar på dem.
  • Placera alltid knapparna i slutet av formuläret.
  • Välj en tydlig färg med tillräcklig kontrast för att signalera call to action.
  • Anpassa färgen på texten så att den får tillräcklig kontrast.
  • Använd inte knappar för att ”rensa” innehåll i formulär.
  • Knappar är alltid fält av typen Submit.