Fältetiketter

Silktide kontrollerar att varje formulärfält och knapp på dina sidor har ett namn som programvara kan läsa. Personer som inte kan se formuläret förlitar sig på dessa namn för att veta vad varje fält frågar efter.

En seende besökare förstår vad ett fält betyder utifrån texten intill det. Denna visuella koppling har ingen betydelse i koden: namnet måste vara kopplat till själva fältet, oftast med ett <label>-element i .

<!-- Problem: texten ser ut som en etikett men är inte kopplad till fältet -->
<p>Fullständigt namn</p>
<input type="text">

Varför detta är viktigt

En meddelar varje fält med sitt när besökaren förflyttar sig genom ett formulär. Ett namnlöst fält meddelas bara som "redigera text" – besökaren måste gissa vad som ska skrivas utifrån sammanhanget, och i ett längre formulär blir det snabbt omöjligt. Fält utan etikett är en av de vanligaste orsakerna till att ett formulär inte kan fyllas i utan syn, vilket innebär förlorade registreringar, beställningar och förfrågningar.

Så åtgärdar du det

Koppla ett <label> till varje fält, antingen länkat med ID eller omslutande fältet:

<!-- Länkat med ID -->
<label for="name">Fullständigt namn</label>
<input type="text" id="name">

<!-- Eller omslutande fältet -->
<label>Fullständigt namn <input type="text"></label>

Knappar namnger sig själva genom sin text eller sitt value – inget etikettelement behövs:

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

När en synlig etikett är opraktisk använder du ett -attribut, till exempel aria-label eller aria-labelledby. Observera att detta bara hjälper – seende besökare ser den inte.

Använd inte placeholder-text som etikett: den försvinner så snart besökaren börjar skriva och behandlas inte konsekvent som ett namn.

Så testar Silktide detta

Hitta formulärkontrollerna på varje sida: inmatningsfält, textområden, rullgardinsmenyer och knappar, samt element som har fått en formulärkontrollroll med ARIA (till exempel role="button" eller role="checkbox").
Hoppa över kontroller som inte behöver ett namn: dolda inmatningsfält, fält som lagts till av kända tredjepartswidgetar (till exempel tjänster för , eller de dolda formulär som spårnings- och översättningsskript lägger till för eget bruk), samt element vars ARIA-roll inte kräver en etikett.
Fastställ varje kontrolls tillgängliga namn utifrån dess etikett, ARIA-attribut, knapptext eller värde.
Rapportera varje kontroll vars tillgängliga namn är tomt.

Felsökning

Fältet har text bredvid sig

Närliggande text namnger inte ett fält om den inte är kopplad i koden – använd en <label> med ett for-attribut, eller omslut fältet med etiketten.

Fältet är dekorativt eller hanteras av ett insticksprogram

Fält som läggs till av widgetar som du inte kontrollerar kan vara svåra att åtgärda direkt. Kontrollera om insticksprogrammet erbjuder en tillgänglighetsinställning eller en uppdatering. Om fältet verkligen inte påverkar besökarna kan du resultatet.