Formulärinstruktioner

Silktide hittar formulärfält som kan behöva en förklaring, till exempel fritextfält, och ber dig avgöra om vart och ett behöver instruktioner som beskriver vad som ska anges. Fält som behöver instruktioner ska ha dem kopplade i koden, inte bara placerade i närheten.

Varför detta är viktigt

En etikett räcker ofta inte. ”Datum” säger ingenting om det förväntade formatet, som varierar mellan olika länder. ”Referens” anger inte vilket av dina tre referensnummer som efterfrågas. Besökare som gissar fel får ett felmeddelande – eller ännu värre, deras inskick accepteras med felaktiga data.

Det är lika viktigt att koppla instruktionen i koden som att skriva den: en ledtråd som bara ligger visuellt nära fältet är osynlig för en användare av en som har fokus på inmatningsfältet.

Så åtgärdar du det

För varje markerat fält ska du avgöra om en besökare kan vara osäker på vad som ska anges. Om så är fallet:

Lägg till en beskrivning och koppla den till fältet med attributet aria-describedby:

<!-- Ledtråden läses upp när fältet får fokus -->
<label for="date">Datum</label>
<input type="text" id="date" aria-describedby="date-hint">
<p id="date-hint">Format: dag/månad/år, t.ex. 28/07/2026</p>

Eller använd en särskilt avsedd fälttyp i i stället. <input type="date"> ger besökare en datumväljare i deras eget språk, utan att någon förklaring behövs – använd detta när en lämplig typ finns.

Om fältet är självförklarande – en sökruta eller ett fält för ”Meddelande” i ett kontaktformulär – behövs ingen instruktion; resultatet.

Så testar Silktide detta

Hitta de formulärkontroller där instruktioner sannolikt hjälper: <textarea>- element och <input>-fält av typen text, email, file, number, password eller range. Knappar, kryssrutor, alternativknappar och rullgardins- menyer hoppas över, eftersom en etikett normalt räcker för dessa.
Hoppa över fält som inte är synliga för seende användare, och fält som injiceras av kända tredjepartswidgetar, till exempel de dolda formulär som spårnings- och översättningsskript lägger till för eget bruk.
Hoppa över fält som redan har en kopplad beskrivning – ett aria-describedby som pekar på riktig, icke-tom text eller ett icke-tomt aria-description-attribut.
Markera varje återstående fält för granskning: en människa avgör om det faktiskt behöver instruktioner.

Felsökning

Mitt fält har en ledtråd precis under det

Visuell närhet är inte samma sak som en koppling. Om inte ledtråden är kopplad till fältet med aria-describedby (eller aria-description) meddelar den inte, och Silktide markerar fältet. Genom att lägga till attributet löser du båda problemen.