Analyse von iframes
Wie das Axe DevTools for Web CLI Inhalte innerhalb von iframes analysiert und wie man Elemente innerhalb eines Frames erreicht.
Seiten platzieren oft wesentliche Inhalte in <iframe>-Elementen: Zahlungsformulare, Mediaplayer, eingebettete Karten, Chat- und Hilfewidgets sowie Komponenten von Drittanbietern. Das CLI analysiert den Inhalt dieser Frames im Rahmen einer gewöhnlichen Seitenanalyse, sodass gerahmter Inhalt keine Lücke in Ihrer Abdeckung darstellt.
Es muss nichts aktiviert werden. axe-core wird in die Frames der Seite geladen, jeder Frame wird zusammen mit dem Dokument auf der obersten Ebene analysiert und die Ergebnisse werden in derselben JSON-Ergebnisdatei für die Seite zusammengeführt.
Wie Frame-Ergebnisse gemeldet werden
Ergebnisse aus Frames erscheinen in denselben violations-, passes-, incomplete- und inapplicable-Arrays wie der Rest der Seite. Was sie identifiziert, ist das target-Array auf jedem Ergebnis-Knoten: Es hält einen Selektor pro Ebene der Frame-Verschachtelung, gefolgt von einem Selektor für das Element selbst.
- Ein
targetmit einem Eintrag ist ein Element im Dokument auf der obersten Ebene. - Ein
targetmit zwei Einträgen ist ein Element innerhalb eines Frames: Der erste Selektor findet den Frame im übergeordneten Dokument, und der zweite findet das Element innerhalb des Dokuments dieses Frames. - Jeder zusätzliche Eintrag stellt eine weitere Ebene der Frame-Verschachtelung dar.
Das bedeutet, dass ein Bericht auf ein Element hinweisen kann, das nicht im eigenen HTML der Seite existiert. Lesen Sie das target-Array von außen nach innen, um herauszufinden, wo sich das Element tatsächlich befindet.
Ziel von Elementen innerhalb eines Frames
Um auf ein Element innerhalb eines Frames zu agieren oder es zu analysieren, verwenden Sie eine Spezifikationsdatei und geben den Selektor als Liste an. Alle Selektoren in der Liste außer dem letzten identifizieren aufeinanderfolgende <iframe>-Elemente, in die navigiert werden soll, und der letzte identifiziert das Zielelement im innersten Frame. Siehe Selektoren für die vollständigen Regeln und Beispiele.
# Analyze only the card form inside the card-fields frame,
# which is itself inside the payment-widget frame
analyze only element ["iframe.payment-widget", "#card-fields", "form"]
# Analyze the page, but skip everything inside a third-party frame
analyze the page excluding element [".third-party-frame", "html"]Schreiben Sie die Liste ohne Leerzeichen zwischen [ und dem ersten Anführungszeichen, sonst schlägt die Validierung der Spezifikationsdatei fehl.
Frame-bewusste Selektoren funktionieren sowohl für Seitenaktionen als auch für analyze, sodass ein Workflow in einen Frame klicken oder ein Feld ausfüllen kann, bevor das Ergebnis analysiert wird. Siehe Seitenaktionen.
Da eine Liste von Selektoren immer als Pfad durch Frames gelesen wird, kann sie nicht verwendet werden, um mehrere nicht zusammenhängende Elemente auszuwählen. Um eine Analyse auf mehr als einen Bereich einer Seite einzugrenzen, wiederholen Sie die element-Klausel.
Frames und URI-Modus
Die Optionen --include und --exclude von axe <url> nehmen eine kommagetrennte Liste von CSS-Selektoren, die nur gegen das Dokument auf der obersten Ebene ausgewertet werden, sodass sie kein Element innerhalb eines Frames anvisieren können. Inhalte innerhalb von Frames werden dennoch analysiert; Sie können nur nicht von der Befehlszeile aus darauf abzielen.
Zwei Konsequenzen sind erwähnenswert:
- Das Benennen eines Frame-Elements, wie in
--include "#checkout-frame", beschränkt die Analyse auf diesen Frame und alles, was darin ist, da der Inhalt des Frames damit analysiert wird. - Zusätzliche Selektoren nach dem ersten werden still ignoriert, wenn sie nichts im Dokument auf der obersten Ebene treffen.
--include "#outer,#inner,#leaf"liefert genau dieselben Ergebnisse wie--include "#outer", ohne Warnung, dass der Rest des Pfades verworfen wurde. Ein Selektor, der nur innerhalb eines Frames existiert, schlägt mitNo elements found for include in page Contextvollständig fehl.
Verwenden Sie eine Spezifikationsdatei, wenn Sie etwas innerhalb eines Frames anvisieren müssen.
Die axe-core-frame-tested-Regel meldet alle Frames, die von axe-core nicht erreicht werden konnten. So können Sie „keine Probleme in diesem Frame“ von „dieser Frame wurde nie analysiert“ unterscheiden. Es ist eine Best-Practice-Regel, daher gehört sie nicht zu den WCAG-Regelsets, die das CLI standardmäßig ausführt; um diese Ergebnisse zu erhalten, verwenden Sie ein benutzerdefiniertes Regelset, das Best-Practice-Regeln enthält. Siehe Benutzerdefinierte Regelsets.