Entydige labeltilknytninger

Silktide tjekker formularlabels, der angiver deres felt ved hjælp af et ID, og rapporterer labels, der deler det samme ID med et andet label. Hvert felt bør have præcis ét label, der peger på det, så det altid bliver annonceret på samme måde.

I forbindes et <label> med sit formularfelt ved at indstille labellets for-attribut til feltets id. Når to eller flere labels bruger den samme for-værdi, gør de alle krav på det samme felt – som regel fordi en formular blev kopieret og indsat, og ID'erne aldrig blev opdateret.

<!-- Problem: begge labels peger på id="name" -->
<label for="name">Dit navn</label>
<input id="name">

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

Hvorfor dette er vigtigt

skal vælge, hvilket label der skal annonceres for feltet, og forskellige vælger forskelligt – nogle læser det første, mens andre læser begge. Samtidig har feltet, som det andet label var beregnet til, slet ikke noget label, så det annonceres som et unavngivet felt. Hvis man klikker på et label, får dets felt også fokus, så en besøgende, der klikker på "Virksomhedsnavn", kan ende med at skrive i det forkerte felt.

Sådan retter du det

Giv hvert formularfelt sit eget entydige id.
Lad hvert labels for-attribut pege på ID'et for det ene felt, det beskriver:

<!-- Rettet: hvert label peger på sit eget felt -->
<label for="name">Dit navn</label>
<input id="name">

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

Hvis flere tekststykker reelt beskriver ét felt, skal du beholde et enkelt <label> og i stedet forbinde den ekstra tekst med aria-describedby frem for et andet label.

Sådan tester Silktide dette

Find hvert <label>-element med en for-attribut på hver side.
Gruppér labels efter deres for-værdi.
Når to eller flere labels deler den samme værdi, rapporteres hvert label i gruppen.

Fejlfinding

Labels er i separate formularer

ID'er skal være entydige på hele siden, ikke kun i én formular. To formularer, der hver indeholder <label for="email"> på den samme side, er stadig i konflikt – omdøb ID'erne, så de er forskellige, for eksempel signup-email og newsletter-email.