4.1.1 Poprawność kodu

/ Jak strony go nie spełniają

• Ta sama wartość id występuje na dwóch lub więcej elementach jednej strony.
• Komponent, na przykład formularz albo okno dialogowe, jest wstawiony dwa razy i każde id w jego wnętrzu się powtarza.
• Element został otwarty i nigdy nie został zamknięty albo dwa elementy zamknięto w złej kolejności.
• Element znajduje się tam, gdzie specyfikacja na to nie pozwala, na przykład div wewnątrz p albo link wewnątrz linku.
• Element ma dwa razy ten sam atrybut, na przykład dwa atrybuty class.

/ Jak sprawdzić samodzielnie

1. Sprawdź stronę w darmowym walidatorze W3C Nu Html Checker, podając adres albo wklejając źródło.
2. Przefiltruj wyniki pod kątem czterech rodzajów komunikatów: zduplikowane ID, niezamknięty element, element niedozwolony jako dziecko oraz zduplikowany atrybut.
3. W konsoli przeglądarki wypisz wartości id, które na wyrenderowanej stronie występują więcej niż raz. Treść dodana skryptem nigdy nie pojawia się w surowym źródle.
4. Dla każdego zduplikowanego id wyszukaj na stronie atrybuty for, aria-labelledby, aria-describedby i aria-controls, które używają tej wartości. To te duplikaty zmieniają to, co słyszy użytkownik.

/ Jak to naprawić

• Nadaj każdemu id wartość unikalną na stronie, zaczynając od tych, na które wskazują atrybuty for, aria-labelledby, aria-describedby i aria-controls.
• Tam, gdzie komponent jest renderowany więcej niż raz, buduj jego id z klucza danej instancji albo z generowanego przyrostka, a nie ze stałego napisu.
• Zamknij każdy element, który wymaga znacznika końcowego, i popraw kolejność zachodzących na siebie znaczników końcowych.
• Przenieś treść blokową poza elementy p i nigdy nie umieszczaj jednego elementu a ani jednego przycisku wewnątrz drugiego.
• Usuń powtórzone atrybuty, tak żeby każdy element miał jeden atrybut class, id lub style.

/ Co sprawdza nasz skaner

Dwa testy patrzą wyłącznie na id. Test duplicate-id czyta wyrenderowaną stronę i zgłasza id użyte więcej niż raz w tym samym drzewie, licząc osobno dokument i każdy shadow root. F77 z HTML_CodeSniffer zgłasza każdą wartość id powtórzoną w dokumencie. Żaden nie bada znaczników końcowych, zagnieżdżenia ani powtórzonych atrybutów i żaden nie powie, czy duplikat faktycznie psuje etykietę albo odwołanie ARIA.