Päällekkäiset ID:t

Silktide löytää sivuja, joilla samaa id-arvoa käytetään useammassa kuin yhdessä elementissä. ID:iden on oltava yksilöllisiä sivulla, sillä kaikki ID:hen viittaava – lomakkeiden selitteet, ARIA-suhteet ja sivunsisäiset linkit – voi löytää vain yhden kaksoiskappaleista.

<!-- Molemmilla syötekentillä on id="name": mitä kenttää kukin selite kuvaa? -->
<label for="name">Nimesi</label>
<input id="name">

<label for="name">Yrityksen nimi</label>
<input id="name">

Miksi tämä on tärkeää

Avustava teknologia käyttää ID-viittauksia toisiinsa liittyvien elementtien yhdistämiseen. Kun ID:t ovat päällekkäisiä, ruudunlukija saattaa lukea lomakekentälle väärän selitteen tai jättää selitteen kokonaan lukematta – yllä olevassa esimerkissä molemmat kentät voidaan ilmoittaa nimellä "Nimesi", jolloin käyttäjä kirjoittaa nimensä yrityksen nimen kenttään. Sama ongelma koskee ARIA- määrityksiä, kuten aria-labelledby ja aria-describedby, sekä sivunsisäisiä linkkejä, jotka siirtyvät #id-kohtaan.

Miten ongelma korjataan

1. Nimeä kaksoiskappaleet uudelleen niin, että jokainen sivun id on yksilöllinen, ja päivitä kaikki niihin viittaavat kohdat (for-määritteet, ARIA-määritteet ja linkit).
2. Jos kaksoiskappaleet johtuvat toistuvasta komponentista – mallista, joka lisätään sivulle useita kertoja – korjaa malli luomaan yksilöllisiä ID:itä tai käytä luokkia ID:iden sijaan tyylittelykohdissa, jotka eivät tarvitse viittauksia.
3. Jos ilmoitettu kaksoiskappale on omassa tilanteessasi aidosti harmiton, voit ohittaa löydöksen.

Miten Silktide testaa tämän

1. Etsi sivulta jokainen elementti, jolla on id-määrite. SVG-grafiikan sisällä olevat elementit ohitetaan, koska niiden ID:t ovat erillisessä kontekstissa.
2. Ryhmittele elementit niiden id-arvon mukaan.
3. Kun useammalla kuin yhdellä elementillä on sama id, merkitse jokainen niistä.

Lisätietoja

• Onnistumiskriteerin 4.1.1 ymmärtäminen: Jäsentäminen (WCAG 2.1)
• H93: Varmistetaan, että id-määritteet ovat yksilöllisiä verkkosivulla (WCAG-tekniikka)
• id (MDN)