Duplikerede id'er
Silktide finder sider, hvor den samme id-værdi bruges på mere end ét
element. ID'er skal være entydige på en side, fordi alt, der henviser til et
ID – formularetiketter, ARIA-relationer og links på siden – kun kan finde én af
dubletterne.
<!-- Begge inputfelter har id="name": hvilket felt beskriver hver etiket? -->
<label for="name">Dit navn</label>
<input id="name">
<label for="name">Virksomhedsnavn</label>
<input id="name">
Hvorfor dette er vigtigt
afhænger af ID-henvisninger for at forbinde relaterede elementer.
Når ID'er er duplikerede, kan en
læse den forkerte etiket for et formularfelt eller slet ingen etiket – i eksemplet
ovenfor kan begge felter blive annonceret som "Dit navn", så brugeren skriver sit navn
i feltet for virksomhedsnavn. Den samme fejl påvirker -
attributter som aria-labelledby og aria-describedby samt links på siden,
der springer til et #id.
Sådan løser du det
- Omdøb dubletterne, så hvert
idpå siden er entydigt, og opdater alt, der henviste til dem (for-attributter, ARIA-attributter og links). - Hvis dubletterne kommer fra en gentaget komponent – en skabelon, der er brugt flere gange pr. side – skal du rette skabelonen, så den genererer entydige ID'er, eller bruge klasser i stedet for ID'er til stilhooks, der ikke behøver henvisninger.
- Hvis en markeret dublet reelt er harmløs i din sammenhæng, kan du ignorere fundet.
Sådan tester Silktide dette
- Find hvert element på siden med en
id-attribut. Elementer i SVG- grafik springes over, da deres ID'er findes i en separat kontekst. - Gruppér elementer efter deres
id-værdi. - Når mere end ét element deler det samme
id, markeres hvert af dem.