Undvik etiketter på kontroller som inte kan etiketteras

Silktide kontrollerar formuläretiketter som pekar på ett annat element med hjälp av dess ID och rapporterar etiketter som riktas mot element som inte bör ha någon – knappar, knappsliknande inmatningsfält och element som inte kan etiketteras alls. Dessa element namnges av sin egen text eller sitt eget värde, och en separat etikett skapar motstridiga namn.

I HTML namnger en <label> ett formulärfält via attributet for. Men vissa kontroller har redan ett eget namn: en knapp har sitt namn från sin text, och ett submit-inmatningsfält har sitt namn från sitt value. Andra element, till exempel en vanlig <div> eller ett dolt inmatningsfält, kan inte etiketteras på detta sätt alls.

<!-- Problem: knappen säger redan "Save"; etiketten konkurrerar med den -->
<label for="save">Save</label>
<button id="save">Save</button>

Varför detta är viktigt

När en kontroll har två källor till sitt namn – sin egen text och en etikett som pekar på den – hanterar olika webbläsare och skärmläsare konflikten på olika sätt. Kontrollen kan läsas upp två gånger, läsas upp med fel text eller bete sig oväntat när man klickar på etiketten. Om den överflödiga etiketten tas bort hör alla besökare exakt vad kontrollen säger.

Så här åtgärdar du det

1. För knappar och knappsliknande inmatningsfält: ta bort <label> och förlita dig på kontrollens egen text eller value:

<!-- Åtgärdat: knappen namnger sig själv -->
<button id="save">Save</button>
<input type="submit" value="Submit">

2. Om en etikett pekar på ett dolt inmatningsfält ska du ta bort etiketten – dolda fält visas eller läses aldrig upp och behöver därför inget namn.
3. Om du etiketterade ett element som inte är ett formulärelement, till exempel en <div> som fungerar som en anpassad kontroll, ska du använda ARIA i stället: ge elementet aria-labelledby som pekar på texten som namnger det.

Så här testar Silktide detta

1. Hitta alla <label>-element med ett for-attribut på varje sida.
2. Leta upp elementet vars id matchar. Etiketter som pekar på ID:n som inte finns hoppas över här – de rapporteras i stället av Giltiga etikett-ID:n.
3. Rapportera etiketten när målet är något av följande:
   • ett <button>-element,
   • ett <input> med typen button, submit, reset, image eller hidden,
   • vilket element som helst som inte kan ta emot en etikett, till exempel en <div> eller en rubrik.
4. Etiketter som pekar på vanliga fält – textinmatningsfält, <select>, <textarea> och liknande – godkänns.

Läs mer

• Förstå framgångskriterium 1.3.1: Information och relationer (WCAG 2.2)
• Teknik H44: Använda label-element (WCAG)
• Label-elementet (MDN)
• Fältetiketter