접근성 테스트

접근성 테스트 (Accessibility testing)

애플리케이션이 웹 인터페이스를 제공한다면, GitLab CI/CD를 이용해 대기 중인 코드 변경이 접근성에 어떤 영향을 주는지 확인할 수 있어요. 접근성은 웹사이트를 모든 사람이 편리하게 이용할 수 있도록 하는 기준인데요, 이를 CI 파이프라인에 넣어두면 배포하기 전에 미리 걸러낼 수 있어요.

출처: 문서

본문

웹사이트의 접근성을 측정하는 데는 Pa11y라는 무료 오픈소스 도구를 많이 써요. GitLab은 이 Pa11y를 CI/CD job template에 통합해 두었는데요, a11y job이 정의된 웹페이지들을 분석해서 접근성 위반(violations), 경고(warnings), 그리고 주의(notices)를 accessibility라는 파일에 기록해 줍니다. Pa11y는 WCAG 2.1 규칙을 기준으로 동작해요.

접근성 MR 위젯 (Accessibility merge request widget)

접근성 검사가 실행되면 GitLab이 병합 요청(MR) 위젯 영역에 Accessibility Report를 표시해 줍니다.

접근성 테스트 구성하기 (Configure accessibility testing)

GitLab CI/CD에서 Pa11y를 실행하려면 GitLab Accessibility Docker image를 사용하면 돼요. a11y job을 정의하는 순서는 이렇습니다.

  1. GitLab 설치에 포함된 Accessibility.gitlab-ci.yml template을 include로 가져옵니다.
  2. .gitlab-ci.yml 파일에 다음 구성을 추가합니다.
stages:
  - accessibility

variables:
  a11y_urls: "https://about.gitlab.com https://gitlab.com/users/sign_in"

include:
  - template: "Verify/Accessibility.gitlab-ci.yml"
  1. a11y_urls 변수를 수정해서 Pa11y로 테스트할 웹페이지의 URL 목록을 지정합니다.

a11y job이 파이프라인에서 만들어내는 산출물은 두 가지예요.

  • a11y_urls 변수에 나열한 URL 각각에 대한 HTML 리포트 하나씩.
  • 수집된 리포트 데이터를 담은 파일 하나. 이 파일의 이름은 gl-accessibility.json이에요.

이렇게 생성된 job artifacts는 브라우저에서 직접 열어볼 수 있어요.

[!NOTE] 템플릿이 제공하는 job 정의는 Kubernetes를 지원하지 않아요.

Pa11y에 CI 설정을 통해 아웃소싱할 수 있는 구성 옵션은 따로 없어요. 구성을 바꾸려면 템플릿을 복사해서 CI 파일 안에서 직접 수정하는 방식으로 해야 합니다.

더 알아보기

접근성 검사는 CI 파이프라인의 한 단계일 뿐이에요. 브라우저 성능 테스트나 부하 테스트처럼 다른 검증 단계도 함께 붙여서 품질을 챙겨볼 수 있어요. Pa11y 설정을 프로젝트 규모에 맞게 조정하면서, 리포트에 나타난 위반 항목을 팀과 함께 우선순위를 정해 수정해 나가면 좋아요.