Undgå etiketter på kontrolelementer, der ikke kan have etiketter

Silktide tjekker formularetiketter, der peger på et andet element via ID, og rapporterer etiketter, der er rettet mod elementer, som ikke bør have en – knapper, knaplignende inputfelter og elementer, der slet ikke kan have en etiket. Disse elementer navngives af deres egen tekst eller værdi, og en separat etiket skaber modstridende navne.

I HTML navngiver en <label> et formularfelt via dens for-attribut. Men nogle kontrolelementer har allerede deres eget navn: En knaps navn er dens tekst, og navnet på et indsendelsesinput er dets value. Andre elementer, såsom en almindelig <div> eller et skjult input, kan slet ikke få en etiket på denne måde.

<!-- Problem: knappen siger allerede "Gem"; etiketten konkurrerer med den -->
<label for="save">Gem</label>
<button id="save">Gem</button>

Hvorfor det er vigtigt

Når et kontrolelement har to kilder til sit navn – sin egen tekst og en etiket, der peger på det – løser forskellige browsere og skærmlæsere konflikten forskelligt. Kontrolelementet kan blive annonceret to gange, annonceret med den forkerte tekst eller opføre sig uventet, når der klikkes på etiketten. Når du fjerner den overflødige etiket, hører alle besøgende præcis det, kontrolelementet siger.

Sådan retter du det

1. For knapper og knaplignende inputfelter skal du fjerne <label> og bruge kontrolelementets egen tekst eller value:

<!-- Rettet: knappen navngiver sig selv -->
<button id="save">Gem</button>
<input type="submit" value="Indsend">

2. For en etiket, der peger på et skjult input, skal du fjerne etiketten – skjulte felter vises eller annonceres aldrig, så de behøver ikke et navn.
3. Hvis du satte en etiket på et ikke-formularelement såsom en <div>, der fungerer som et brugerdefineret kontrolelement, skal du bruge ARIA i stedet: Giv elementet aria-labelledby, der peger på teksten, som navngiver det.

Sådan tester Silktide dette

1. Find hvert <label>-element med en for-attribut på hver side.
2. Find det element, hvis id matcher. Etiketter, der peger på ID'er, som ikke findes, springes over her – de rapporteres i stedet af Gyldige etiket-ID'er.
3. Rapportér etiketten, når dens mål er et af følgende:
   • et <button>-element,
   • et <input> med typen button, submit, reset, image eller hidden,
   • ethvert element, der ikke kan have en etiket, såsom en <div> eller en overskrift.
4. Etiketter, der peger på almindelige felter – tekstinput, <select>, <textarea> og lignende – består.

Få mere at vide

• Forstå succeskriterium 1.3.1: Information og relationer (WCAG 2.2)
• Teknik H44: Brug af label-elementer (WCAG)
• Label-elementet (MDN)
• Feltetiketter