소개

접근성은 장애가 있는 사용자를 포함한 모든 사용자가 웹 애플리케이션과 효과적으로 상호 작용할 수 있도록 보장하는 웹 개발의 중요한 측면입니다. 자동화된 접근성 테스트는 개발 프로세스 초기에 접근성 문제를 식별하고 수정하는 데 도움이 됩니다. 이 게시물에서는 Cypress-axe와 같은 도구를 활용하여 Cypress를 사용하여 자동화된 접근성 테스트를 구현하여 애플리케이션을 더욱 포괄적으로 만드는 방법을 살펴보겠습니다.

접근성이 중요한 이유

1. 법률 준수: 애플리케이션이 미국 장애인법(ADA) 및 웹 콘텐츠 접근성 지침(WCAG)과 같은 법적 요구 사항을 충족하는지 확인합니다.
2. 사용자 환경: 장애가 있는 사용자를 포함한 모든 사용자의 전반적인 사용자 환경을 개선합니다.
3. 포괄성: 포용성과 다양성에 대한 의지를 보여줌으로써 더 많은 사람들이 애플리케이션에 액세스할 수 있도록 합니다.
4. SEO 이점: 검색 엔진이 접근 가능한 웹사이트를 선호하므로 검색 엔진 최적화가 향상됩니다.

Cypress에서 자동화된 접근성 테스트 설정

Cypress에서 자동화된 접근성 테스트를 수행하기 위해 Ax 접근성 엔진을 Cypress와 통합하는 cypress-axe 플러그인을 사용하겠습니다.

1단계: Cypress 및 cypress-axe 설치
먼저 프로젝트에 Cypress가 설치되어 있는지 확인하세요. 그렇지 않은 경우 다음 명령을 사용하여 설치할 수 있습니다:

npm install cypress --save-dev

다음으로 cypress-axe 플러그인을 설치합니다.

npm install cypress-axe --save-dev

2단계: cypress-axe 구성
cypress/support 디렉터리에 Command.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를 사용한 자동화된 접근성 테스트는 모든 사용자가 웹 애플리케이션에 액세스할 수 있는지 확인하는 강력한 방법입니다. 접근성 검사를 테스트 프로세스에 통합하면 문제를 조기에 식별하고 수정하여 더 나은 사용자 환경을 제공하고 접근성 표준을 준수할 수 있습니다. 이 가이드에 설명된 모범 사례를 따라 애플리케이션을 더욱 포괄적이고 접근 가능하게 만드세요.

즐거운 테스트를 진행하세요!