Dubblett-ID:n

Silktide hittar sidor där samma id-värde används för mer än ett element. ID:n måste vara unika på en sida, eftersom allt som hänvisar till ett ID – formuläretiketter, ARIA-relationer och länkar på sidan – bara kan hitta en av dubbletterna.

<!-- Båda inmatningsfälten delar id="name": vilket fält beskriver varje etikett? -->
<label for="name">Ditt namn</label>
<input id="name">

<label for="name">Företagsnamn</label>
<input id="name">

Varför detta är viktigt

Hjälpmedel är beroende av ID-referenser för att koppla samman relaterade element. När ID:n är duplicerade kan en skärmläsare läsa upp fel etikett för ett formulärfält, eller ingen etikett alls – i exemplet ovan kan båda fälten läsas upp som ”Ditt namn”, så att användaren skriver sitt namn i fältet för företagsnamn. Samma problem påverkar ARIA-attribut som aria-labelledby och aria-describedby, samt länkar på sidan som hoppar till ett #id.

Så åtgärdar du problemet

1. Byt namn på dubbletterna så att varje id på sidan är unikt, och uppdatera allt som hänvisade till dem (for-attribut, ARIA-attribut och länkar).
2. Om dubbletterna kommer från en upprepad komponent – en mall som infogas flera gånger per sida – ändrar du mallen så att den genererar unika ID:n, eller använder klasser i stället för ID:n som stilmallar inte behöver hänvisa till.
3. Om en markerad dubblett verkligen är ofarlig i ditt sammanhang kan du ignorera resultatet.

Så testar Silktide detta

1. Hitta alla element på sidan som har ett id-attribut. Element inuti SVG- grafik hoppas över, eftersom deras ID:n finns i ett separat sammanhang.
2. Gruppera elementen efter deras id-värde.
3. När fler än ett element delar samma id markeras vart och ett av dem.

Läs mer

• Understanding Success Criterion 4.1.1: Parsing (WCAG 2.1)
• H93: Ensuring that id attributes are unique on a Web page (WCAG technique)
• id (MDN)