Analisando iframes
Como o Axe DevTools para Web CLI analisa conteúdo dentro de iframes e como acessar elementos dentro de um frame.
As páginas frequentemente colocam conteúdo substancial dentro de elementos <iframe>: formulários de pagamento, players de mídia, mapas incorporados, widgets de chat e ajuda e componentes de terceiros. O CLI analisa o conteúdo desses frames como parte de uma análise comum de página, portanto, o conteúdo em frames não é uma lacuna na sua cobertura.
Não é necessário ativar nada. O axe-core é carregado nos frames da página, cada frame é analisado junto com o documento de nível superior, e os resultados são combinados no mesmo arquivo de resultado JSON para a página.
Como os Resultados de Frames São Relatados
Os resultados de frames chegam nas mesmas matrizes violations, passes, incomplete e inapplicable que o restante da página. O que os identifica é a matriz target em cada nó de resultado: ela contém um seletor por nível de aninhamento de frame, seguido por um seletor para o próprio elemento.
- Um
targetcom uma entrada é um elemento no documento de nível superior. - Um
targetcom duas entradas é um elemento dentro de um frame: o primeiro seletor encontra o frame no documento pai e o segundo encontra o elemento dentro do documento daquele frame. - Cada entrada adicional representa outro nível de aninhamento de frame.
Isso significa que um relatório pode apontar para um elemento que não existe no próprio HTML da página. Leia a matriz target de fora para dentro para encontrar onde o elemento realmente está.
Alvejando Elementos Dentro de um Frame
Para agir ou analisar um elemento dentro de um frame, use um arquivo de especificação e forneça o seletor como uma lista. Todos os seletores na lista, exceto o último, identificam sucessivos elementos <iframe> para navegar, e o último identifica o elemento alvo dentro do frame mais interno. Veja Seletores para as regras completas e exemplos.
# 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"]Escreva a lista sem espaço entre [ e a primeira aspas, ou o arquivo de especificação falha na validação.
Seletores conscientes de frame funcionam tanto para ações de página quanto para analyze, assim um fluxo de trabalho pode clicar em um botão ou preencher um campo dentro de um frame antes de analisar o resultado. Veja Ações de página.
Como uma lista de seletores é sempre lida como um caminho através de frames, ela não pode ser usada para selecionar vários elementos não relacionados. Para delimitar uma análise a mais de uma região de uma página, repita a cláusula element.
Frames e Modo URI
As opções --include e --exclude de axe <url> aceitam uma lista separada por vírgulas de seletores CSS que são avaliados apenas contra o documento de nível superior, portanto, não podem direcionar um elemento dentro de um frame. O conteúdo dentro dos frames ainda é analisado; você só não pode delimitá-lo na linha de comando.
Duas consequências valem a pena conhecer:
- Nomear um elemento de frame, como em
--include "#checkout-frame", delimita a análise para esse frame e tudo que está dentro dele, porque o conteúdo do frame é analisado junto com ele. - Seletores extras após o primeiro são silenciosamente ignorado quando não correspondem a nada no documento de nível superior.
--include "#outer,#inner,#leaf"produz exatamente os mesmos resultados que--include "#outer", sem aviso de que o restante do caminho foi descartado. Um seletor que existe apenas dentro de um frame falha totalmente comNo elements found for include in page Context.
Use um arquivo de especificação quando precisar direcionar algo dentro de um frame.
A regra frame-tested do axe-core relata qualquer frame que o axe-core não pôde alcançar, o que ajuda a distinguir "nenhum problema neste frame" de "este frame nunca foi analisado". É uma regra de melhores práticas, por isso não faz parte dos conjuntos de regras WCAG que o CLI executa por padrão; para obter esses resultados, use um conjunto de regras personalizado que inclua regras de melhores práticas. Veja Regras Personalizadas.