Unika etikettkopplingar

Silktide kontrollerar formuläretiketter som namnger sitt fält med hjälp av ett ID och rapporterar etiketter som delar samma ID med en annan etikett. Varje fält ska ha exakt en etikett som pekar på det, så att det alltid annonseras på samma sätt.

I kopplas en <label> till sitt formulärfält genom att etikettens for-attribut sätts till fältets id. När två eller flera etiketter använder samma for-värde gör de alla anspråk på samma fält – vanligtvis för att ett formulär har kopierats och ID-värdena aldrig uppdaterades.

<!-- Problem: båda etiketterna pekar på id="name" -->
<label for="name">Ditt namn</label>
<input id="name">

<label for="name">Företagsnamn</label>
<input id="company">

Varför detta är viktigt

måste välja vilken etikett som ska annonseras för fältet, och olika väljer olika – vissa läser den första, andra läser båda. Samtidigt lämnas fältet som den andra etiketten var avsedd för helt utan etikett, så det annonseras som ett fält utan namn. När en besökare klickar på en etikett fokuseras också dess fält, så en besökare som klickar på ”Företagsnamn” kan upptäcka att hen skriver i fel ruta.

Så här åtgärdar du problemet

Ge varje formulärfält ett eget unikt id.
Låt varje etiketts for-attribut peka på ID:t för det enda fält som etiketten beskriver:

<!-- Åtgärdat: varje etikett pekar på sitt eget fält -->
<label for="name">Ditt namn</label>
<input id="name">

<label for="company">Företagsnamn</label>
<input id="company">

Om flera textstycken faktiskt beskriver ett och samma fält ska du behålla en enda <label> och koppla den extra texten med aria-describedby i stället för att använda en andra etikett.

Så testar Silktide detta

Hitta alla <label>-element med ett for-attribut på varje sida.
Gruppera etiketterna efter deras for-värde.
När två eller flera etiketter delar samma värde rapporterar du varje etikett i gruppen.

Felsökning

Etiketterna finns i separata formulär

ID:n måste vara unika på hela sidan, inte bara inom ett formulär. Två formulär som båda innehåller <label for="email"> på samma sida krockar fortfarande – byt namn på ID:n så att de skiljer sig åt, till exempel signup-email och newsletter-email.