Screen reader совместимость

Автоматизированное тестирование доступности веб-приложений с помощью Puppeteer становится всё более востребованным для обеспечения поддержки пользователей с нарушениями зрения. Puppeteer предоставляет возможности управления браузером на уровне DOM и пользовательских событий, что позволяет имитировать работу реальных пользователей и проверять совместимость сайта с экранными читалками (screen readers).

Настройка Puppeteer для тестирования доступности

Для тестирования screen reader совместимости Puppeteer используется вместе с инструментами аудита доступности, такими как axe-core. Основная задача — получить информацию о том, насколько элементы страницы корректно интерпретируются assistive technologies.

Пример базовой настройки: 

const puppeteer = require(&
const axeCore = require('axe-core');

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    await page.addScriptTag({ path: require.resolve('axe-core') });
    const results = await page.evaluate(async () => {
        return await axe.run();
    });

    console.log(results.violations);
    await browser.close();
})();

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

  • Запуск в headless: false позволяет наблюдать работу скринридера и поведение элементов.
  • Инъекция axe-core дает возможность собирать детальные отчёты о нарушениях доступности.
  • violations содержит список элементов, которые могут вызвать проблемы для screen readers.

Проверка семантики HTML

Screen readers сильно зависят от корректной семантики HTML. Puppeteer позволяет получить доступ к атрибутам role, aria-*, а также к тегам и их содержимому для проверки соответствия стандартам ARIA.

Пример проверки атрибутов ARIA: 

const ariaElements = await page.$$eval('[role]', elements =>
    elements.map(el => ({
        role: el.getAttribute('role'),
        ariaLabel: el.getAttribute('aria-label'),
        text: el.innerText
    }))
);
console.table(ariaElements);

Рекомендации по семантике:

  • Использовать правильные роли (role=“button”, role=“navigation” и др.).
  • Проверять наличие текстовых альтернатив для изображений (alt).
  • Следить за логической последовательностью заголовков (h1–h6).

Навигация с клавиатуры

Screen readers часто комбинируются с клавиатурной навигацией. Puppeteer позволяет имитировать нажатия клавиш и перемещение фокуса по интерактивным элементам.

Пример теста клавиатурной навигации: 

await page.focus('#first-button');
await page.keyboard.press('Tab');  // переход к следующему элементу
await page.keyboard.press('Enter');  // активация элемента

Важные аспекты:

  • Проверка доступности всех интерактивных элементов через Tab.
  • Поддержка событий Enter и Space для кнопок и ссылок.
  • Возможность выявить элементы, которые недоступны при навигации с клавиатуры.

Использование скринридеров в тестах

Для интеграции настоящих screen readers Puppeteer взаимодействует с внешними инструментами: NVDA (Windows) и VoiceOver (macOS). Скринридеры могут считывать контент страницы в реальном времени, а Puppeteer позволяет анализировать DOM и отслеживать изменения.

Пример анализа текстовых обновлений: 

await page.evaluate(() => {
    const liveRegion = document.querySelector('#status');
    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => console.log(mutation.target.innerText));
    });
    observer.observe(liveRegion, { childList: true });
});

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

  • Использование MutationObserver позволяет отслеживать динамически изменяемые области (aria-live).
  • Проверка, что все обновления контента корректно озвучиваются скринридером.
  • Тестирование динамических элементов (модальные окна, уведомления).

Отчёты и автоматизация

Для комплексного контроля доступности формируются отчёты в формате JSON или HTML. Puppeteer позволяет автоматически сохранять результаты тестов и интегрировать их в CI/CD.

Пример генерации отчёта: 

const fs = require('fs');
fs.writeFileSync('axe-report.json', JSON.stringify(results, null, 2));

Практические рекомендации:

  • Автоматизировать проверку на каждом этапе сборки приложения.
  • Включать тесты ARIA-ролей, навигации клавиатурой и динамического контента.
  • Периодически вручную проверять совместимость с реальными скринридерами для подтверждения автоматических тестов.

Лучшие практики при тестировании screen reader совместимости

  1. Использование валидной семантики: корректные теги, роли и атрибуты aria-*.
  2. Клавиатурная навигация: все интерактивные элементы должны быть доступны с клавиатуры.
  3. Динамический контент: правильно настроенные live regions и оповещения.
  4. Регулярные аудиты: запуск axe-core на каждом релизе.
  5. Реальные устройства и скринридеры: тестирование на NVDA, JAWS, VoiceOver для подтверждения корректности автоматических проверок.

Эти подходы обеспечивают глубокую проверку доступности веб-приложений и позволяют выявлять проблемы, которые могут быть незаметны при визуальном тестировании, гарантируя совместимость с screen readers.

Оглавление