Giltiga etikett-ID:n för fragment

Silktide kontrollerar formuläretiketter som hänvisar till ett annat element med hjälp av dess ID och rapporterar etiketter vars ID inte finns någonstans på sidan. En etikett som inte pekar på något kan inte namnge något.

I HTML namnger en <label> ett formulärfält genom att ange fältets id i attributet for. Den här kontrollen verifierar endast att det refererade ID:t finns någonstans på sidan – en kompletterande kontroll, Giltiga etikett-ID:n, går längre och verifierar att målet är ett formulärfält som kan ha en etikett.

<!-- Problem: inget på sidan har id="food" -->
<label for="food">Favoritmat</label>

Varför detta är viktigt

En etikett med en bruten referens gör ingenting: en skärmläsare kan inte koppla den till något fält, så fältet som etiketten var avsedd för att beskriva läses upp utan namn, och när etiketten klickas på fokuseras fältet inte längre. Eftersom sidan ser oförändrad ut uppstår dessa fel vanligtvis obemärkt när ID:n byts namn eller markupp struktureras om, och de upptäcks endast genom automatiserade kontroller.

Så åtgärdar du det

1. Hitta elementet som etiketten var avsedd att beskriva och ange elementets exakta id som värde för etikettens for (ID:n är skiftlägeskänsliga):

<!-- Åtgärdat: etiketten pekar på ett verkligt ID -->
<label for="food">Favoritmat</label>
<input type="text" id="food">

2. Lägg till ett id om målelementet saknar ett.
3. Ta bort etiketten om den är kvar sedan tidigare och inte längre beskriver något.

Så testar Silktide detta

1. Hitta varje <label>-element med ett icke-tomt for-attribut på varje sida.
2. Leta efter ett element någonstans på sidan vars id matchar.
3. Rapportera etiketten om inget sådant element finns.

Läs mer

• Förstå framgångskriterium 1.3.1: Information och relationer (WCAG 2.2)
• Elementet label (MDN)
• Giltiga etikett-ID:n