Unike etikettkoblinger

Silktide kontrollerer skjemetiketter som navngir feltet sitt ved hjelp av en ID, og rapporterer etiketter som deler samme ID med en annen etikett. Hvert felt skal ha nøyaktig én etikett som peker på det, slik at det alltid annonseres på samme måte.

I kobles en <label> til skjemafeltet ved å sette etikettens for-attributt til feltets id. Når to eller flere etiketter bruker samme for-verdi, hevder de alle å være knyttet til det samme feltet – vanligvis fordi et skjema ble kopiert og limt inn, uten at ID-ene ble oppdatert.

<!-- Problem: begge etikettene peker på id="name" -->
<label for="name">Navnet ditt</label>
<input id="name">

<label for="name">Bedriftsnavn</label>
<input id="company">

Hvorfor dette er viktig

må velge hvilken etikett som skal annonseres for feltet, og ulike velger forskjellig – noen leser den første, mens andre leser begge. Samtidig blir feltet den andre etiketten var ment for, stående helt uten etikett, og annonseres derfor som et felt uten navn. Når en besøkende klikker på en etikett, fokuseres også feltet den er knyttet til. En besøkende som klikker på «Bedriftsnavn», kan derfor ende opp med å skrive i feil felt.

Slik løser du det

Gi hvert skjemafelt sin egen unike id.
La hvert etikettfelts for-attributt peke på ID-en til det ene feltet det beskriver:

<!-- Løst: hver etikett peker på sitt eget felt -->
<label for="name">Navnet ditt</label>
<input id="name">

<label for="company">Bedriftsnavn</label>
<input id="company">

Hvis flere tekstbiter faktisk beskriver ett felt, beholder du én enkelt <label> og kobler tilleggsinformasjonen med aria-describedby i stedet for å bruke en ekstra etikett.

Slik tester Silktide dette

Finn hvert <label>-element med et for-attributt på hver side.
Grupper etikettene etter for-verdien.
Når to eller flere etiketter deler samme verdi, rapporteres alle etikettene i gruppen.

Feilsøking

Etikettene er i separate skjemaer

ID-er må være unike på hele siden, ikke bare innenfor ett skjema. To skjemaer som begge inneholder <label for="email"> på samme side, vil fortsatt kollidere – gi ID-ene nye navn slik at de blir forskjellige, for eksempel signup-email og newsletter-email.