4.1.1 Syntaxanalyse

/ Woran Seiten scheitern

• Derselbe id-Wert steht an zwei oder mehr Elementen einer Seite.
• Eine Komponente wie ein Formular oder ein Dialog ist zweimal eingebunden, und jede id darin wiederholt sich.
• Ein Element wird geöffnet und nie geschlossen, oder zwei Elemente werden in der falschen Reihenfolge geschlossen.
• Ein Element steht dort, wo die Spezifikation es nicht erlaubt, etwa ein div in einem p oder ein Link in einem Link.
• Ein Element trägt dasselbe Attribut zweimal, zum Beispiel zwei class-Attribute.

/ So prüfen Sie es selbst

1. Lassen Sie die Seite durch den kostenlosen W3C Nu Html Checker laufen, über die Adresse oder durch Einfügen des Quelltexts.
2. Filtern Sie die Ergebnisse nach vier Arten von Meldungen: doppelte ID, nicht geschlossenes Element, Element als Kind nicht erlaubt und doppeltes Attribut.
3. Listen Sie in der Browserkonsole die id-Werte auf, die in der gerenderten Seite mehr als einmal vorkommen. Per Skript eingefügter Inhalt erscheint nie im rohen Quelltext.
4. Suchen Sie für jede doppelte id auf der Seite nach den Attributen for, aria-labelledby, aria-describedby und aria-controls, die diesen Wert verwenden. Das sind die Duplikate, die verändern, was ein Nutzer hört.

/ So beheben Sie es

• Geben Sie jeder id einen Wert, der auf der Seite eindeutig ist, und beginnen Sie mit denen, auf die for, aria-labelledby, aria-describedby und aria-controls verweisen.
• Wird eine Komponente mehr als einmal gerendert, bilden Sie ihre ids aus einem Schlüssel der Instanz oder einem erzeugten Suffix und nicht aus einer festen Zeichenkette.
• Schließen Sie jedes Element, das ein End-Tag braucht, und korrigieren Sie die Reihenfolge von End-Tags, die sich überschneiden.
• Holen Sie Blockinhalt aus p-Elementen heraus und setzen Sie niemals ein a-Element oder eine Schaltfläche in ein anderes.
• Löschen Sie wiederholte Attribute, sodass jedes Element nur ein class-, id- oder style-Attribut behält.

/ Was unser Scanner prüft

Zwei Prüfungen sehen nur auf ids. Die Prüfung duplicate-id liest die gerenderte Seite und meldet eine id, die im selben Baum mehr als einmal vorkommt, wobei Dokument und jeder Shadow Root getrennt zählen. F77 aus HTML_CodeSniffer meldet jeden id-Wert, der sich im Dokument wiederholt. Keine untersucht End-Tags, Verschachtelung oder wiederholte Attribute, und keine sagt, ob ein Duplikat tatsächlich ein label oder einen ARIA-Verweis bricht.