Analyseren van iframes
Hoe de Axe DevTools voor Web CLI inhoud binnen iframes analyseert, en hoe elementen binnen een frame te bereiken.
Pagina's plaatsen vaak veel inhoud in <iframe> elementen: betalingsformulieren, mediaplayers, ingesloten kaarten, chat- en helpwidgets en componenten van derden. De CLI analyseert de inhoud van die frames als onderdeel van een gewone pagina-analyse, zodat ingelijste inhoud geen lacune is in je dekking.
Er hoeft niets ingeschakeld te worden. axe-core wordt geladen in de frames van de pagina, elk frame wordt geanalyseerd samen met het hoofddocument, en de resultaten worden gecombineerd in hetzelfde JSON-resultaatbestand voor de pagina.
Hoe Frameresultaten Worden Gerapporteerd
Resultaten van frames komen binnen in dezelfde violations, passes, incomplete en inapplicable arrays als de rest van de pagina. Wat hen identificeert, is de target array op elk resultaatknooppunt: deze bevat één selector per niveau van framenesting, gevolgd door een selector voor het element zelf.
- Een
targetmet één invoer is een element in het hoofddocument. - Een
targetmet twee invoeren is een element binnen één frame: de eerste selector vindt het frame in het bovenliggende document, en de tweede vindt het element binnen het document van dat frame. - Elke extra invoer vertegenwoordigt een ander niveau van framenesting.
Dit betekent dat een rapport kan wijzen op een element dat niet in de eigen HTML van de pagina bestaat. Lees de target array van buiten naar binnen om te vinden waar het element zich daadwerkelijk bevindt.
Elementen Binnen een Frame Doelgericht Aanpakken
Om op een element binnen een frame te reageren of te analyseren, gebruik een spec-bestand en geef de selector als een lijst. Alle selectoren in de lijst behalve de laatste identificeren opeenvolgende <iframe> elementen om in te navigeren, en de laatste identificeert het doelelement binnen het meest binnenste frame. Zie Selectoren voor de volledige regels en voorbeelden.
# 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"]Schrijf de lijst zonder spatie tussen [ en het eerste aanhalingsteken, anders faalt de validatie van het spec-bestand.
Frame-bewuste selectoren werken voor pagina-acties evenals voor analyze, zodat een workflow een knop kan aanklikken of een veld kan invullen binnen een frame voordat het resultaat wordt geanalyseerd. Zie Pagina-acties.
Omdat een lijst met selectoren altijd wordt gelezen als een pad door frames, kan deze niet worden gebruikt om meerdere niet-verwante elementen te selecteren. Om een analyse te specificeren naar meer dan één regio van een pagina, herhaal de element clausule.
Frames en URI-modus
De --include en --exclude opties van axe <url> nemen een door komma's gescheiden lijst met CSS-selectoren die alleen worden geëvalueerd tegen het hoofddocument, dus ze kunnen geen element binnen een frame targeten. Inhoud binnen frames wordt nog steeds geanalyseerd; je kunt er alleen niet naar specificeren via de opdrachtregel.
Twee gevolgen zijn de moeite waard om te weten:
- Het benoemen van een frame-element, zoals in
--include "#checkout-frame", beperkt de analyse tot dat frame en alles erin, omdat de inhoud van het frame ermee wordt geanalyseerd. - Extra selectoren na de eerste worden stil genegeerd wanneer ze niets in het hoofddocument matchen.
--include "#outer,#inner,#leaf"produceert precies dezelfde resultaten als--include "#outer", zonder waarschuwing dat de rest van het pad werd weggelaten. Een selector die alleen binnen een frame bestaat, faalt helemaal metNo elements found for include in page Context.
Gebruik een spec-bestand wanneer je iets binnen een frame moet targeten.
De axe-core frame-tested regel rapporteert elk frame dat niet door axe-core bereikt kon worden, zodat je "geen problemen in dit frame" kunt onderscheiden van "dit frame is nooit geanalyseerd." Het is een best practice regel, dus het maakt geen deel uit van de WCAG regelsets die de CLI standaard uitvoert; om die resultaten te krijgen, gebruik een aangepaste regelset die best practice regels bevat. Zie Aangepaste Regelsets.