Unieke labelkoppelingen

Silktide controleert formulierlabels die hun veld benoemen met behulp van een ID en meldt labels die dezelfde ID delen met een ander label. Elk veld moet precies één label hebben dat ernaar verwijst, zodat het altijd op dezelfde manier wordt aangekondigd.

In wordt een <label> aan zijn formulierveld gekoppeld door het for-attribuut van het label in te stellen op de id van het veld. Wanneer twee of meer labels dezelfde for-waarde gebruiken, verwijzen ze allemaal naar hetzelfde veld — meestal omdat een formulier is gekopieerd en de ID's nooit zijn bijgewerkt.

<!-- Probleem: beide labels verwijzen naar id="name" -->
<label for="name">Uw naam</label>
<input id="name">

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

Waarom dit belangrijk is

moet kiezen welk label voor het veld moet worden aangekondigd, en verschillende maken daarin verschillende keuzes — sommige lezen het eerste label, andere lezen beide. Het veld waarvoor het tweede label bedoeld was, heeft ondertussen helemaal geen label en wordt dus aangekondigd als een veld zonder naam. Als een bezoeker op een label klikt, krijgt het bijbehorende veld ook de focus. Wie op "Bedrijfsnaam" klikt, kan daardoor in het verkeerde vak beginnen te typen.

Dit probleem oplossen

Geef elk formulierveld een eigen unieke id.
Laat het for-attribuut van elk label verwijzen naar de ID van het ene veld dat het beschrijft:

<!-- Opgelost: elk label verwijst naar zijn eigen veld -->
<label for="name">Uw naam</label>
<input id="name">

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

Als meerdere tekstgedeelten daadwerkelijk één veld beschrijven, gebruik dan één <label> en koppel de aanvullende tekst met aria-describedby in plaats van een tweede label.

Hoe Silktide dit test

Zoek op elke pagina elk <label>-element met een for-attribuut.
Groepeer de labels op basis van hun for-waarde.
Meld elk label in de groep wanneer twee of meer labels dezelfde waarde delen.

Problemen oplossen

De labels staan in afzonderlijke formulieren

ID's moeten op de hele pagina uniek zijn, niet alleen binnen één formulier. Twee formulieren met elk <label for="email"> op dezelfde pagina botsen nog steeds met elkaar — hernoem de ID's zodat ze verschillen, bijvoorbeeld signup-email en newsletter-email.