Kort svar: Et id skal være unikt på siden. Når to elementer deler id, peger labels, aria-labelledby og aria-describedby på det første — og alle referencer til det andet rammer forkert. Ahorizon tæller gentagne id-værdier og giver enten fuld score eller nul.
Hvad Ahorizon måler
Kontrollen indgår i ét af tjekkene. Tærsklerne nedenfor er dem, motoren faktisk regner med.
| Tjek | Hvad motoren ser på | Hvornår kontrollen består |
|---|---|---|
| EAA-tjekUnikke element-id'er | Alle id-attributter på siden, og om nogen værdi optræder mere end én gang. | Alt eller intet. Én gentagelse er nok til at give nul. |
Sådan ser det ud i koden
Den samme formularkomponent to steder på siden. Begge labels peger nu på det første felt.
<label for="email">E-mail</label><input id="email">
<label for="email">E-mail</label><input id="email"><label for="nyhedsbrev-email">E-mail</label><input id="nyhedsbrev-email">
<label for="kontakt-email">E-mail</label><input id="kontakt-email">Hvad fundet betyder
- En label, der peger på et gentaget id, knytter sig til det første element. Det andet felt står uden label.
- Det samme gælder aria-labelledby og aria-describedby — beskrivelsen havner det forkerte sted.
- Ankerlinks til et gentaget id fører altid til den første forekomst.
Sådan retter du det
- Præfiks id'er med komponentens navn, så genbrug ikke kolliderer.
- Generér unikke id'er i komponenter, der kan optræde flere gange på samme side.
- Brug klasser til styling og id kun til referencer.
Det kan tjekket ikke afgøre
- Motoren tæller gentagelser i den serverleverede HTML. Elementer indsat i browseren indgår ikke.
- Kontrollen kan ikke se, om en reference faktisk rammer forkert i praksis — kun at forudsætningen for fejlen er der.
- Et unikt id er ikke en garanti for, at referencen peger det rigtige sted hen.