Работа с iframe

Библиотека Axe-core предоставляет мощные инструменты для автоматизированного тестирования доступности веб-страниц, включая работу с элементами внутри iframe. Поскольку содержимое iframe загружается отдельно от основного документа, тестирование доступности таких областей требует специального подхода.

Подключение и инициализация

Для работы с iframe необходимо сначала убедиться, что Axe-core загружен и инициализирован в контексте родительского документа. Стандартный способ подключения библиотеки выглядит следующим образом:

import axe from 'axe-core';

// Инициализация на документе
axe.run(document, {
    // Конфигурация проверок
}, (err, results) => {
    if (err) throw err;
    console.log(results.violations);
});

Чтобы тестировать содержимое iframe, нужно получить доступ к его документу через contentDocument:

const iframe = document.querySelector('#myIframe');
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Запуск проверок внутри iframe

После получения документа iframe можно запускать проверки Axe-core напрямую на его контенте:

axe.run(iframeDocument, {
    runOnly: ['wcag2a', 'wcag2aa'],
    rules: {
        'color-contrast': { enabled: true },
        'image-alt': { enabled: true }
    }
}).then(results => {
    console.log('Violations in iframe:', results.violations);
});

Ключевые моменты:

runOnly — позволяет ограничить набор правил для ускорения проверки или фокусировки на конкретных стандартах WCAG.
rules — позволяет включать или отключать отдельные правила, например, проверку контраста текста и альтернативного текста для изображений.

Работа с несколькими iframe

На странице может находиться несколько iframe, поэтому необходимо организовать обход каждого элемента и запуск Axe-core по отдельности:

const iframes = document.querySelectorAll('iframe');

iframes.forEach((frame, index) => {
    const doc = frame.contentDocument || frame.contentWindow.document;
    axe.run(doc).then(results => {
        console.log(`Violations in iframe #${index}:`, results.violations);
    });
});

Для асинхронных операций рекомендуется использовать Promise.all или async/await для удобного сбора результатов всех фреймов:

async function checkAllIframes() {
    const frames = Array.from(document.querySelectorAll('iframe'));
    const results = await Promise.all(
        frames.map(frame => {
            const doc = frame.contentDocument || frame.contentWindow.document;
            return axe.run(doc);
        })
    );
    results.forEach((res, idx) => {
        console.log(`iframe ${idx} violations:`, res.violations);
    });
}

checkAllIframes();

Ограничения и особенности

Кросс-доменные iframe: доступ к contentDocument запрещен браузером из-за политики безопасности. В таких случаях необходимо запускать Axe-core внутри самого iframe. Это может потребовать вставки скрипта Axe-core в контент iframe.
Динамически загружаемый контент: если содержимое iframe обновляется после загрузки страницы, проверку нужно выполнять после полной отрисовки DOM внутри фрейма. Используются события load или MutationObserver.
Стили и контраст: Axe-core учитывает стили элементов, применяемые внутри iframe. Поэтому проверка визуальной доступности, например контраста текста, будет корректной при условии, что все CSS загружены.

Пример внедрения Axe-core в iframe с ограничением домена

Если iframe находится на том же домене, можно вставить библиотеку через скрипт:

const script = document.createElement('script');
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.6.3/axe.min.js';
iframe.contentDocument.head.appendChild(script);

script.onl oad = () => {
    iframe.contentWindow.axe.run(iframe.contentDocument).then(results => {
        console.log('iframe loaded axe violations:', results.violations);
    });
};

Если доступ к iframe на другом домене невозможен, альтернативой является интеграция Axe-core в сам проект, который формирует содержимое iframe, либо использование серверной проверки доступности.