Основы веб-доступности

Понятие веб-доступности

Веб-доступность (accessibility, сокращённо a11y) — это способность веб-приложений и сайтов быть удобными и функциональными для всех пользователей, включая людей с ограниченными возможностями. Основная цель доступности — предоставить равные возможности взаимодействия с интерфейсом вне зависимости от физических или когнитивных ограничений.

В контексте тестирования это означает проверку элементов интерфейса на соответствие стандартам доступности, корректную работу вспомогательных технологий (экранных читалок, клавиатурной навигации, увеличения шрифта) и правильное использование семантических HTML-элементов.

Основные стандарты и рекомендации

Для проверки доступности чаще всего ориентируются на WCAG (Web Content Accessibility Guidelines), последние версии которых структурированы по четырём принципам:

  • Perceivable (Воспринимаемость): контент должен быть доступен для восприятия всеми сенсорными каналами. Примеры: альтернативный текст для изображений, субтитры для видео.
  • Operable (Управляемость): пользователи должны иметь возможность взаимодействовать с элементами интерфейса через различные методы, включая клавиатуру.
  • Understandable (Понимаемость): контент и интерфейс должны быть логичными, предсказуемыми и понятными.
  • Robust (Надёжность): веб-приложение должно корректно работать с современными и будущими вспомогательными технологиями.

Интеграция доступности в Playwright

Playwright предоставляет возможности для автоматизированного тестирования доступности с помощью axe-core или встроенных методов анализа страниц. Основной подход — проверка доступности после загрузки страницы или динамического обновления интерфейса.

Подключение axe-core
  1. Установка библиотеки:
npm install @axe-core/playwright
  1. Использование в тестах:
const { injectAxe, checkA11y } = require('@axe-core/playwright');

test('Проверка доступности главной страницы', async ({ page }) => {
    await page.goto('https://example.com');
    
    // Внедрение axe-core на страницу
    await injectAxe(page);
    
    // Проверка доступности всей страницы
    await checkA11y(page, null, {
        detailedReport: true,
        detailedReportOptions: { html: true }
    });
});

Ключевые параметры checkA11y позволяют:

  • detailedReport: true — получать детальный отчёт с описанием всех нарушений.
  • detailedReportOptions.html — включить HTML-отчёт для визуального анализа.
Проверка отдельных компонентов

Playwright позволяет проверять доступность отдельных элементов, а не всей страницы:

const button = await page.$('button#submit');
await checkA11y(page, { include: [button] });

Такой подход особенно полезен для динамических компонентов, модальных окон или виджетов, которые появляются после действий пользователя.

Проверка ARIA-атрибутов

ARIA (Accessible Rich Internet Applications) — это набор атрибутов, расширяющих семантику HTML-элементов. В Playwright можно проверять корректность использования ARIA:

  • role — указывает назначение элемента.
  • aria-label и aria-labelledby — обеспечивают читаемые названия для экранных читалок.
  • aria-hidden — скрывает элементы от вспомогательных технологий.

Пример проверки наличия ARIA-атрибутов:

test('Кнопка имеет корректные ARIA-атрибуты', async ({ page }) => {
    const button = await page.$('button#submit');
    const role = await button.getAttribute('role');
    const label = await button.getAttribute('aria-label');
    
    expect(role).toBe('button');
    expect(label).not.toBeNull();
});

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

Доступность включает в себя управление с клавиатуры. В Playwright это можно тестировать через эмуляцию нажатий клавиш:

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

Важно проверять, что порядок табуляции логичен, фокус видим и элементы активируются ожидаемым образом.

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

Высокий контраст текста и элементов интерфейса критичен для пользователей с нарушениями зрения. Playwright не имеет встроенного анализа контрастности, но можно интегрировать сторонние инструменты или использовать axe-core, который включает правила проверки контрастности (color-contrast):

await checkA11y(page, null, {
    rules: {
        'color-contrast': { enabled: true }
    }
});

Локализация тестов доступности

Для многоязычных сайтов важно проверять, чтобы все ARIA-метки, альтернативные тексты и подсказки соответствовали языку интерфейса. Это предотвращает ситуации, когда экранная читалка озвучивает текст на неправильном языке.

Отчётность и CI/CD

Результаты тестов доступности рекомендуется интегрировать в CI/CD. Playwright с axe-core позволяет формировать JSON-отчёты, которые можно анализировать автоматически:

await checkA11y(page, null, { reportLevels: ['violations'] });

Можно настроить автоматическое падение сборки при критических нарушениях (critical), что гарантирует постоянное соблюдение стандартов доступности.

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

  • Использовать семантические HTML-элементы: <button>, <header>, <nav> вместо <div> с обработчиками событий.
  • Проверять доступность всех динамических компонентов после их появления.
  • Всегда предоставлять альтернативный текст для изображений и видео.
  • Проверять видимость фокуса и порядок навигации клавишами.
  • Интегрировать тесты доступности в автоматизированную сборку, чтобы нарушения не попадали в продакшн.

Внедрение этих практик в Playwright позволяет создать надежную систему автоматизированного контроля доступности, повышая качество продукта и удовлетворяя требования современных стандартов WCAG.

Оглавление