Så skapar du tillgängliga webbformulär

Att tänka på när du skapar formulär

Stäng inte ute dina besökare med formulär som inte är tillgängliga, här följer några viktiga punkter:

• Fundera en extra gång på om alla fält i formuläret verkligen behövs.
• Det ska tydligt framgå vilka fält i formuläret som är obligatoriska att fylla i.
• Se till så att alla fält är åtkomliga och tydligt markerade för de som navigerar med tangentbordet.
• Det ska finnas en ledtext för varje fält i webbformuläret. Ledtexten är den text som anger för besökaren vad denne ska mata in i ett visst fält. Se ett exempel nedanför den här punktlistan.
• Varje ledtext måste kopplas ihop med rätt formulärsfält med hjälp av ett så kallat label-element. Detta görs i HTML-koden, se exempel nedanför den här punktlistan. I de flesta webbpubliceringsverktyg sker detta automatiskt.

Exempel

Ledtext för formulärsfält

I exemplet nedan är "E-postadress" ledtext till formulärsfältet.

Ledtext som kopplas ihop med rätt formulärsfält i HTML-koden

<label for="e-postadress">E-postadress</label>
<input id="e-postadress" type="text">

HTML-koden ovan visar hur ledtexten (E-postadress) är ihopkopplad med rätt formulärsfält med hjälp av label-element i koden. Värdet i "for" ska vara detsamma som värdet i "id".

Felmeddelanden

Ett vanligt tillgänglighetsproblem när det gäller formulär är svårtolkade felmeddelanden. Du har säkert själv stött på felmeddelanden som är helt obegripliga och vet hur frustrerande det är.

Se över alla felmeddelanden på webbplatsen så att de är konkreta och lätta att förstå. Skriv tydliga felmeddelanden som förklarar vilken information som ska fyllas i fältet. Skriv inte att “fältet innehåller otillåtna tecken”, berätta istället vilka tecken som är otillåtna.