Unngå etiketter på kontroller som ikke kan ha etiketter

Silktide kontrollerer skjematiketter som peker på et annet element ved hjelp av ID, og rapporterer etiketter som er rettet mot elementer som ikke bør ha en – knapper, knapplignende inndatafelt og elementer som ikke kan ha en etikett i det hele tatt. Disse elementene navngis av sin egen tekst eller verdi, og en separat etikett skaper motstridende navn.

I HTML navngir en <label> et skjemafelt via attributtet for. Men enkelte kontroller har allerede sitt eget navn: Navnet til en knapp er teksten i den, og navnet til et sendingsfelt er verdien i value. Andre elementer, som en vanlig <div> eller et skjult inndatafelt, kan ikke merkes på denne måten i det hele tatt.

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

Hvorfor dette er viktig

Når en kontroll har to kilder til navnet sitt – sin egen tekst og en etikett som peker på den – håndterer ulike nettlesere og skjermlesere konflikten forskjellig. Kontrollen kan bli lest opp to ganger, bli lest opp med feil tekst eller oppføre seg uventet når etiketten klikkes. Hvis du fjerner den overflødige etiketten, hører alle besøkende nøyaktig det kontrollen sier.

Slik løser du det

1. For knapper og knapplignende inndatafelt fjerner du <label> og bruker kontrollens egen tekst eller value:

<!-- Løst: knappen navngir seg selv -->
<button id="save">Save</button>
<input type="submit" value="Submit">

2. For en etikett som peker på et skjult inndatafelt, fjerner du etiketten – skjulte felt vises eller leses aldri opp, så de trenger ikke noe navn.
3. Hvis du merket et ikke-skjemabasert element, for eksempel en <div> som fungerer som en egendefinert kontroll, bruker du ARIA i stedet: Gi elementet aria-labelledby, slik at det peker på teksten som navngir det.

Slik tester Silktide dette

1. Finn hvert <label>-element med et for-attributt på hver side.
2. Finn elementet med en id som samsvarer. Etiketter som peker på ID-er som ikke finnes, hoppes over her – de rapporteres i stedet av Gyldige etikett-ID-er.
3. Rapporter etiketten når målet er ett av følgende:
   • et <button>-element,
   • et <input>-element med typen button, submit, reset, image eller hidden,
   • et element som ikke kan ha en etikett, for eksempel en <div> eller en overskrift.
4. Etiketter som peker på vanlige felt – tekstinndatafelt, <select>, <textarea> og lignende – består.

Les mer

• Understanding Success Criterion 1.3.1: Info and Relationships (WCAG 2.2)
• Technique H44: Using label elements (WCAG)
• The label element (MDN)
• Etiketter for felt