Formulär och tillgänglighet

Formulär är ofta det viktigaste interaktionselementet på en webbplats. Kontaktformulär, inloggning, sökfält, beställningar och anmälningar – allt bygger på formulär. Om formuläret inte är tillgängligt utestängs användare med funktionsnedsättning från kritiska funktioner.

WCAG har flera framgångskriterier som direkt berör formulär:

  • 1.3.1 Information och relationer – Etiketter, grupperingar och instruktioner ska finnas i koden
  • 1.3.5 Identifiera inmatningssyfte – Fält ska ha maskinläsbar typ (autocomplete)
  • 2.4.6 Rubriker och etiketter – Etiketter ska vara beskrivande
  • 3.3.1 Identifiering av fel – Fel ska beskrivas i text
  • 3.3.2 Etiketter eller instruktioner – Instruktioner ska finnas vid inmatning
  • 3.3.3 Förslag vid fel – Konkreta förslag ska ges vid felaktig inmatning

Etiketter – grundstenen

Varje formulärfält måste ha en kopplad etikett. Det innebär ett <label>-element vars for-attribut matchar fältets id:

<label for="email">E-postadress</label>
<input type="email" id="email" name="email">

Varför det spelar roll:

  • Skärmläsare läser upp etiketten när fältet får fokus
  • Klick på etiketten aktiverar fältet (användbart för motoriskt nedsatta)
  • Det ger en tydlig visuell koppling mellan text och fält

Vanliga misstag med etiketter

Placeholder istället för etikett – Placeholder-text försvinner när användaren börjar skriva och saknar semantisk koppling till fältet. Den uppfyller inte kravet på etikett.

Etikett utan for-attribut – En <label> utan for är bara text. Skärmläsaren kopplar den inte till fältet.

Visuellt dold etikett utan tillgänglig text – Om designen kräver att etiketten döljs, använd CSS som döljer den visuellt men behåller den för skärmläsare (sr-only-klassen). Ta aldrig bort den helt.

Gruppering av relaterade fält

Relaterade fält (exempelvis radioknappar, kryssrutor eller adressfält) ska grupperas med <fieldset> och <legend>:

<fieldset>
  <legend>Leveransalternativ</legend>
  <label><input type="radio" name="delivery" value="home"> Hemleverans</label>
  <label><input type="radio" name="delivery" value="pickup"> Hämta i butik</label>
</fieldset>

Utan <fieldset> och <legend> läser skärmläsaren bara "Hemleverans, radioknapp" utan kontext om vad valet gäller.

Felhantering

Felmeddelanden är kritiska för tillgängligheten. WCAG ställer flera krav:

Identifiera felet

Beskriv felet i text, inte bara med färg. En röd kant runt ett fält hjälper inte en skärmläsaranvändare. Lägg till ett textmeddelande som "E-postadressen saknar @-tecken".

Koppla felet till rätt fält

Använd aria-describedby för att koppla felmeddelandet till fältet:

<input type="email" id="email" aria-describedby="email-error" aria-invalid="true">
<span id="email-error">E-postadressen saknar @-tecken</span>

Flytta fokus till felet

När formuläret skickas och fel hittas, flytta fokus till det första felet eller till en sammanfattning av alla fel överst i formuläret. Utan detta vet inte tangentbordsanvändare att valideringen misslyckades.

Ge konstruktiva förslag

Säg inte bara att fältet är felaktigt – förklara vad som förväntas. "Ange datum i formatet ÅÅÅÅ-MM-DD" är bättre än "Ogiltigt datum".

Autocomplete-attributet

WCAG 1.3.5 kräver att inmatningsfält med personlig information använder rätt autocomplete-attribut. Det gör att webbläsare och hjälpmedel kan fylla i fälten automatiskt:

<input type="text" autocomplete="given-name" name="firstName">
<input type="text" autocomplete="family-name" name="lastName">
<input type="email" autocomplete="email" name="email">
<input type="tel" autocomplete="tel" name="phone">

Vanliga autocomplete-värden: name, given-name, family-name, email, tel, street-address, postal-code, country.

Tillgängliga knappar

Formulärets skicka-knapp ska alltid vara ett <button>- eller <input type="submit">-element, aldrig en <div> eller <a>:

<button type="submit">Skicka meddelande</button>

Knappens text ska beskriva åtgärden. "Skicka beställning" är bättre än bara "Skicka". Om knappen är inaktiverad (disabled), överväg att förklara varför – exempelvis "Fyll i alla obligatoriska fält för att skicka".

Checklista för tillgängliga formulär

  • Alla fält har kopplade <label>-element
  • Relaterade fält grupperas med <fieldset> och <legend>
  • Obligatoriska fält markeras tydligt (inte bara med asterisk)
  • Fel beskrivs i text och kopplas till rätt fält
  • Fokus flyttas till felmeddelande vid misslyckad validering
  • Fält med persondata har rätt autocomplete-attribut
  • Knappar har beskrivande text
  • Formuläret fungerar helt med tangentbord
  • Alla tillstånd (fokus, fel, inaktiverad) har tillräcklig kontrast

Att göra formulär tillgängliga handlar om att tänka på alla steg i interaktionen: hitta fältet, förstå vad som förväntas, fylla i, skicka, och hantera eventuella fel. Gör du det rätt blir formuläret bättre för alla.