Dubbele ID's
Silktide vindt pagina's waarop dezelfde id-waarde voor meer dan één element
wordt gebruikt. ID's moeten uniek zijn binnen een pagina, omdat alles wat naar
een ID verwijst - formulierlabels, ARIA-relaties en links binnen de pagina -
slechts één van de duplicaten kan vinden.
<!-- Beide invoervelden hebben id="name": welk veld beschrijft elk label? -->
<label for="name">Uw naam</label>
<input id="name">
<label for="name">Naam van het bedrijf</label>
<input id="name">
Waarom dit belangrijk is
gebruikt ID-verwijzingen om gerelateerde elementen met elkaar te verbinden.
Wanneer ID's dubbel voorkomen, kan een
het verkeerde label voor een formulierveld voorlezen, of helemaal geen label - in het bovenstaande voorbeeld kunnen beide velden worden aangekondigd als "Uw naam", waardoor de gebruiker zijn naam in het veld voor de bedrijfsnaam invoert. Hetzelfde probleem geldt voor -
attributen zoals aria-labelledby en aria-describedby, en voor links binnen de pagina die naar een #id springen.
Zo lost u het op
- Hernoem de duplicaten zodat elke
idop de pagina uniek is en werk alles bij wat ernaar verwees (for-attributen, ARIA-attributen en links). - Als de duplicaten afkomstig zijn van een herhaald component - een template die meerdere keren per pagina wordt weergegeven - past u de template aan zodat deze unieke ID's genereert, of gebruikt u klassen in plaats van ID's voor stijlhaken die geen verwijzingen nodig hebben.
- Als een gemarkeerd duplicaat in uw context echt onschadelijk is, kunt u de bevinding negeren.
Hoe Silktide dit test
- Vind elk element op de pagina met een
id-attribuut. Elementen binnen SVG-afbeeldingen worden overgeslagen, omdat hun ID's in een afzonderlijke context bestaan. - Groepeer elementen op basis van hun
id-waarde. - Als meer dan één element dezelfde
idheeft, wordt elk van deze elementen gemarkeerd.