Введение

Доступность — это важнейший аспект веб-разработки, гарантирующий, что все пользователи, включая людей с ограниченными возможностями, смогут эффективно взаимодействовать с вашими веб-приложениями. Автоматизированное тестирование доступности помогает выявлять и устранять проблемы доступности на ранних этапах процесса разработки. В этом посте мы рассмотрим, как реализовать автоматическое тестирование доступности с помощью Cypress, используя такие инструменты, как cypress-axe, чтобы сделать ваши приложения более инклюзивными.

Почему доступность имеет значение

1. Соответствие юридическим требованиям: гарантирует, что ваше приложение соответствует законодательным требованиям, таким как Закон об американцах с ограниченными возможностями (ADA) и Рекомендации по обеспечению доступности веб-контента (WCAG).
2. Пользовательский опыт: Улучшает общий пользовательский опыт для всех пользователей, включая людей с ограниченными возможностями.
3. Инклюзивность: Демонстрирует приверженность инклюзивности и разнообразию, делая ваше приложение доступным для более широкой аудитории.
4. Преимущества SEO: Улучшает поисковую оптимизацию, поскольку поисковые системы отдают предпочтение доступным веб-сайтам.

Настройка автоматического тестирования доступности в Cypress

Чтобы выполнить автоматическое тестирование специальных возможностей в Cypress, мы будем использовать плагин cypress-axe, который интегрирует механизм специальных возможностей Axe с Cypress.

Шаг 1. Установите Cypress и Cypress-axe
Сначала убедитесь, что в вашем проекте установлен Cypress. Если нет, вы можете установить его с помощью следующей команды:

npm install cypress --save-dev

Далее установите плагин cypress-axe:

npm install cypress-axe --save-dev

Шаг 2: Настройте кипарис-топор
Создайте новый файл в каталоге cypress/support с именем messages.js и добавьте следующий код для импорта и настройки cypress-axe:

import 'cypress-axe';

Cypress.Commands.add('injectAxe', () => {
    cy.window({ log: false }).then(window => {
        let axe = require('axe-core');
        window.eval(axe.source);
    });
});

Cypress.Commands.add('checkA11y', (selector = null, options = null, violationCallback = null, skipFailures = false) => {
    cy.window({ log: false }).then(window => {
        let document = window.document;
        return axe.run(document, options).then(({ violations }) => {
            if (violations.length) {
                cy.wrap(violations, { log: false }).each(violation => {
                    let nodes = Cypress._.get(violation, 'nodes', []);
                    Cypress._.each(nodes, node => {
                        let target = Cypress._.get(node, 'target', []);
                        if (target.length) {
                            Cypress._.each(target, target => {
                                cy.wrap(target, { log: false }).then($target => {
                                    if (!skipFailures) {
                                        Cypress.log({
                                            name: 'a11y error!',
                                            message: violation.help,
                                            consoleProps: () => violation
                                        });

                                        violationCallback && violationCallback(violation);
                                    }
                                });
                            });
                        }
                    });
                });
            }
        });
    });
});

Шаг 3. Создайте тесты доступности
Теперь давайте создадим тест Cypress для проверки доступности веб-страницы. Создайте новый файл в каталоге cypress/e2e с именем accessibility.spec.js и добавьте следующий код:

describe('Automated Accessibility Testing with Cypress', () => {
    beforeEach(() => {
        cy.visit('/');
        cy.injectAxe();
    });

    it('should have no detectable accessibility violations on load', () => {
        cy.checkA11y();
    });

    it('should have no detectable accessibility violations on specific elements', () => {
        cy.checkA11y('header');
        cy.checkA11y('main');
        cy.checkA11y('footer');
    });
});

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

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

Вы можете настроить проверки доступности, предоставив параметры и настроив правила. Например, вы можете игнорировать определенные правила или запускать только определенные проверки.

Пример: игнорирование определенных правил

cy.checkA11y(null, {
    rules: {
        'color-contrast': { enabled: false }
    }
});

Пример: выполнение определенных проверок

cy.checkA11y(null, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    }
});

Обработка нарушений доступности

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

cy.checkA11y(null, null, (violations) => {
    violations.forEach((violation) => {
        cy.log(`${violation.id} - ${violation.description}`);
        violation.nodes.forEach((node) => {
            cy.log(`Node: ${node.target}`);
        });
    });
});

Лучшие практики тестирования доступности

1. Интегрируйте на раннем этапе: Интегрируйте тестирование доступности на ранних этапах процесса разработки, чтобы быстрее выявлять проблемы.
2. Регулярно тестируйте: Регулярно запускайте тесты доступности в рамках конвейера CI/CD, чтобы обеспечить постоянное соответствие требованиям.
3. Обучите свою команду: Обучите свою команду разработчиков лучшим практикам и рекомендациям по обеспечению специальных возможностей.
4. Используйте ручное тестирование: Объедините автоматическое и ручное тестирование, чтобы охватить все аспекты доступности, поскольку автоматизированные инструменты могут не уловить все.

Заключение

Автоматическое тестирование доступности с помощью Cypress и cypress-axe — это мощный способ гарантировать доступность ваших веб-приложений для всех пользователей. Интегрируя проверки доступности в процесс тестирования, вы можете выявлять и устранять проблемы на ранней стадии, обеспечивая лучший пользовательский опыт и обеспечивая соответствие стандартам доступности. Следуйте рекомендациям, изложенным в этом руководстве, чтобы сделать ваши приложения более инклюзивными и доступными.

Удачного тестирования!