Zduplikowane identyfikatory
Silktide znajduje strony, na których ta sama wartość id jest używana w więcej niż jednym elemencie. Identyfikatory muszą być unikalne na stronie, ponieważ wszystko, co odwołuje się do identyfikatora — etykiety formularzy, relacje ARIA, linki na stronie — może znaleźć tylko jeden z duplikatów.
<!-- Oba pola mają id="name": które pole opisuje każda etykieta? -->
<label for="name">Twoje imię i nazwisko</label>
<input id="name">
<label for="name">Nazwa firmy</label>
<input id="name">
Dlaczego to jest ważne
korzystają z odwołań do identyfikatorów, aby łączyć powiązane elementy.
Gdy identyfikatory są zduplikowane,
może odczytać nieprawidłową etykietę pola formularza albo nie odczytać żadnej etykiety — w powyższym przykładzie oba pola mogą zostać ogłoszone jako „Twoje imię i nazwisko”, przez co użytkownik wpisze swoje imię i nazwisko w polu nazwy firmy. Ten sam problem dotyczy atrybutów ,
takich jak aria-labelledby i aria-describedby, oraz linków na stronie,
które prowadzą do #id.
Jak to naprawić
- Zmień nazwy duplikatów tak, aby każde
idna stronie było unikalne, i zaktualizuj wszystko, co się do nich odwołuje (atrybutyfor, atrybuty ARIA, linki). - Jeśli duplikaty pochodzą z powtarzanego komponentu — szablonu używanego kilka razy na stronie — popraw szablon tak, aby generował unikalne identyfikatory, lub użyj klas zamiast identyfikatorów dla punktów zaczepienia stylów, które nie wymagają odwołań.
- Jeśli oznaczony duplikat jest w Twoim kontekście rzeczywiście nieszkodliwy, możesz zignorować wynik.
Jak Silktide to sprawdza
- Znajduje każdy element na stronie z atrybutem
id. Elementy wewnątrz grafik SVG są pomijane, ponieważ ich identyfikatory znajdują się w osobnym kontekście. - Grupuje elementy według wartości ich
id. - Gdy więcej niż jeden element ma to samo
id, oznacza każdy z nich.