Varför tillgängliga formulär är viktiga
Ett formulär är ofta den första kontakten en besökare har med ditt företag. Om det är svårt att fylla i, frustrerande att navigera eller inte fungerar för alla, riskerar du att förlora kunder – och dessutom missar du viktiga sökordspositioner i Google. Tillgänglighet handlar om att göra din webbplats användbar för så många som möjligt, inklusive personer med funktionsnedsättningar.
Fördelarna med tillgängliga formulär
- Bättre användarupplevelse: Alla besökare kan fylla i formuläret utan hinder.
- Högre konvertering: Enkla formulär ökar chansen att besökare slutför sin handling.
- SEO-fördelar: Google premierar webbplatser som är tillgängliga och lättanvända.
- Laglig säkerhet: I många länder är det lagkrav att webbplatser ska vara tillgängliga för alla.
Grundläggande principer för tillgängliga formulär
1. Använd tydliga etiketter och instruktioner
Varje fält i ditt formulär ska ha en tydlig etikett som förklarar vad som ska fyllas i. Använd <label>-taggen i HTML för att koppla etiketten till rätt fält. Undvik vaga formuleringar som "Namn" – istället för "För- och efternamn" om det är vad du vill ha.
Exempel på korrekt HTML:
<label for="namn">För- och efternamn:</label>
<input type="text" id="namn" name="namn">
Om du har komplexa instruktioner, placera dem direkt under fältet med hjälp av <p> eller <span>.
2. Strukturera formuläret logiskt
Använd rubriker (<h2>, <h3>) för att dela upp formuläret i avsnitt. Detta hjälper både användare och skärmläsare att förstå strukturen.
Exempel:
<h2>Kontaktuppgifter</h2>
<label for="epost">E-postadress:</label>
<input type="email" id="epost" name="epost" required>
3. Gör fälten tillräckligt stora och klickbara
En liten knapp eller ett litet fält är svårt att träffa med fingret på en mobil enhet – eller för någon med nedsatt motorik. Se till att:
- Knappar och länkar är minst 48x48 pixlar stora.
- Textfält har tillräckligt med utrymme för att undvika oavsiktliga klick.
- Använd
cursor: pointer;i CSS för att indikera att ett element är klickbart.
4. Visa felmeddelanden på rätt sätt
Felmeddelanden ska vara tydliga, specifika och placerade nära det fält som orsakar problemet. Använd aria-invalid="true" och aria-describedby för att hjälpa skärmläsare att förstå felet.
Exempel:
<label for="epost">E-postadress:</label>
<input type="email" id="epost" name="epost" aria-describedby="epost-error" required>
<span id="epost-error" class="error-message">Ange en giltig e-postadress.</span>
5. Använd rätt input-typer
Genom att välja rätt type för dina input-fält underlättar du för både användare och webbläsare. Exempel:
-
type="email"– Kontrollerar automatiskt att det är en giltig e-postadress. -
type="tel"– Öppnar numeriskt tangentbord på mobila enheter. -
type="date"– Visar en datumväljare istället för att man ska skriva in datum manuellt.
Avancerade tips för ännu bättre tillgänglighet
Använd ARIA-attribut för extra tydlighet
ARIA (Accessible Rich Internet Applications) gör det möjligt att lägga till extra information för skärmläsare. Exempel:
-
aria-label– Ger en extra beskrivning av ett element. -
aria-required="true"– Indikerar att ett fält är obligatoriskt. -
role="button"– Används för att markera ett element som en knapp om det inte är en<button>-tagg.
Exempel på ARIA i praktiken:
<input type="checkbox" id="nyhetsbrev" aria-required="true">
<label for="nyhetsbrev">Jag vill prenumerera på nyhetsbrevet</label>
Testa med skärmläsare
För att säkerställa att ditt formulär verkligen är tillgängligt, testa det med en skärmläsare som NVDA, JAWS eller VoiceOver. Du kan också använda verktyg som WebAIM's Contrast Checker för att kontrollera färgkontraster.
Sammanfattning: Så skriver du tillgängliga formulär
Ett tillgängligt formulär handlar om att göra det enkelt för alla att fylla i – oavsett förutsättningar. Genom att följa dessa principer förbättrar du både användarupplevelsen och din sökrankning:
- Använd tydliga etiketter och instruktioner.
- Strukturera formuläret logiskt med rubriker.
- Gör fälten stora och klickbara.
- Visa felmeddelanden på rätt sätt.
- Använd rätt input-typer för bättre användarupplevelse.
- Lägg till ARIA-attribut för extra tydlighet.
- Testa med skärmläsare för att säkerställa tillgängligheten.
Kom ihåg: Ett tillgängligt formulär är inte bara bra för användarna – det är också bra för din webbplats och ditt företag. Börja redan idag och se skillnaden!