Zduplikowane ID elementów HTML łamie zasady standardu i może zaburzać działanie skryptów w wiadomości.
Na czym polega problem zduplikowanych identyfikatorów
Atrybut id nadaje elementowi HTML identyfikator, który powinien jednoznacznie wskazywać ten element w obrębie całego dokumentu. Przykładowo zapis <div id="formularz"> tworzy identyfikator formularz, do którego można odwołać się z arkusza CSS, kodu JavaScript, odnośnika z fragmentem adresu URL albo innego elementu HTML. Zgodnie z zasadami poprawnego tworzenia dokumentów HTML wartość identyfikatora nie powinna występować więcej niż raz w tym samym dokumencie.
Zduplikowane ID powstaje wtedy, gdy dwa lub więcej elementów otrzyma identyczną wartość atrybutu id, na przykład id="kontakt". Taki dokument może nadal zostać wyświetlony przez przeglądarkę, ponieważ parser HTML zwykle nie zatrzymuje renderowania z powodu tego błędu. Brak komunikatu widocznego dla użytkownika nie oznacza jednak poprawności kodu. Problem pojawia się w chwili, gdy skrypt, styl lub mechanizm nawigacji zakłada, że dany identyfikator wskazuje dokładnie jeden element.
Wpływ na JavaScript, CSS i nawigację strony
W JavaScript metoda document.getElementById() jest przeznaczona do wyszukania elementu o określonym identyfikatorze. Przy powtórzonym ID nie można bezpiecznie traktować wyniku jako jednoznacznego odniesienia do wszystkich pasujących elementów. Przeglądarka zwraca pojedynczy element zgodnie z zasadami DOM, zazwyczaj pierwszy znaleziony w kolejności drzewa dokumentu. Skrypt może więc zmienić, ukryć albo odczytać nie ten panel, przycisk lub pole formularza, którego oczekiwał autor.
Podobne skutki występują przy użyciu selektora CSS #kontakt oraz metod takich jak document.querySelector('#kontakt'). Selektor CSS może dopasować więcej niż jeden element, natomiast querySelector() zwraca pierwszy pasujący element. Z kolei kod wykorzystujący querySelectorAll() może nieoczekiwanie otrzymać kolekcję zawierającą kilka elementów, mimo że logika aplikacji zakładała jeden wynik. Duplikaty mogą także zaburzać działanie odnośników w rodzaju href="#kontakt", ponieważ przeglądarka przechodzi do elementu odpowiadającego fragmentowi adresu, a przy wielu takich elementach wybór nie opisuje jednoznacznie zamierzonego miejsca.
Powtórzone ID są szczególnie kłopotliwe w interaktywnych formularzach i komponentach tworzonych z szablonów. Skrypt obsługujący jeden przycisk może pobrać pole z innej kopii formularza, przełączyć niewłaściwą zakładkę albo odczytać wartość z ukrytego elementu. CSS również może nadać ten sam wygląd kilku elementom, gdy projektant chciał stylizować tylko jeden z nich. Przyczyną bywa najczęściej wielokrotne wstawienie tego samego fragmentu szablonu bez wygenerowania unikalnego identyfikatora.
Znaczenie dla formularzy i dostępności
Identyfikatory są używane nie tylko przez skrypty. Element <label for="email"> łączy etykietę z kontrolką formularza mającą id="email". Jeżeli kilka kontrolek ma takie samo ID, kliknięcie etykiety może aktywować inną kontrolkę niż oczekiwana. Ten sam mechanizm dotyczy odwołań między elementami, takich jak aria-labelledby, aria-describedby i aria-controls. Powtórzona wartość identyfikatora utrudnia jednoznaczne ustalenie, który nagłówek opisuje dane pole, który komunikat błędu odnosi się do kontrolki i który panel jest sterowany przez przycisk.
Skutki mogą być widoczne dla osób korzystających z klawiatury, czytnika ekranu lub innych technologii wspomagających, ale także dla każdego użytkownika w przypadku walidacji formularza, rozwijanych sekcji i okien dialogowych. Zduplikowane ID nie tworzy samo w sobie dodatkowego elementu ani nie powoduje automatycznego usunięcia jednego z nich. Powoduje natomiast niejednoznaczne relacje w strukturze dokumentu. Dlatego identyfikatory należy projektować jako stabilne i unikalne, a dla zwykłych grup elementów używać klas CSS albo innych mechanizmów selekcji.
Wykrywanie i usuwanie duplikatów
Kontrolę można rozpocząć od narzędzi deweloperskich przeglądarki. W konsoli JavaScript polecenie document.querySelectorAll('[id]') zwraca wszystkie elementy posiadające atrybut id. Ich wartości można następnie porównać, aby znaleźć powtórzenia. Do szybkiego wykrycia duplikatów przydatny jest także skrypt iterujący po elementach i zapisujący już napotkane wartości w zbiorze Set. Walidatory HTML oraz narzędzia do kontroli jakości front-endu mogą zgłosić wielokrotne użycie tego samego identyfikatora jeszcze przed wdrożeniem strony.
Naprawa polega na ustaleniu, czy elementy rzeczywiście powinny być rozróżniane. Jeżeli każdy reprezentuje inną sekcję, należy nadać im różne ID, na przykład kontakt-glowny i kontakt-stopka, a następnie zaktualizować wszystkie odwołania w CSS, JavaScript, formularzach i linkach. Jeżeli elementy są równorzędnymi powtórzeniami, wspólną klasę można zastosować do stylowania, natomiast identyfikator pozostawić tylko tam, gdzie potrzebne jest jednoznaczne wskazanie konkretnego elementu. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i podzespołów, w tym diagnostyką problemów wynikających z nieprawidłowego działania oprogramowania oraz stron internetowych.
