codelyzer로 Angular 앱의 접근성 검사

모든 사용자가 Angular 사이트에 액세스할 수 있도록 하고 싶으신가요? 여기가 바로 정답입니다.

Minko Gechev
Zama Khan Mohammed
Zama Khan Mohammed
X GitHub 홈페이지

접근성 높은 앱을 만든다는 것은 특수 아동을 비롯한 모든 사용자가 앱을 사용하고 그 내용을 이해할 수 있게 된다는 의미입니다. 세계보건 보고서에 따르면 10억 명 이상(전 세계 인구의 약 15%)이 어떤 형태로든 장애를 갖고 있습니다. 따라서 모든 개발 프로젝트에서는 접근성이 우선순위입니다.

이 게시물에서는 Angular 앱의 빌드 프로세스에 codelyzer의 접근성 검사를 추가하는 방법을 알아봅니다. 이 접근 방식을 사용하면 코딩하는 동안 텍스트 편집기에서 직접 접근성 버그를 포착할 수 있습니다.

codelyzer를 사용하여 액세스할 수 없는 요소 감지

codelyzer는 TSLint 위에 위치하는 도구로, Angular TypeScript 프로젝트가 일련의 린트 작업 규칙을 따르는지 확인합니다. Angular 명령줄 인터페이스 (CLI)로 설정된 프로젝트에는 기본적으로 codelyzer가 포함됩니다.

codelyzer에는 Angular 애플리케이션이 권장사항을 따르는지 확인하기 위한 50개 이상의 규칙이 있습니다. 이 중 접근성 기준 시행을 위한 규칙이 10개 정도 있습니다. Codelyzer에서 제공하는 다양한 접근성 검사와 그 근거를 알아보려면 Codelyzer의 새로운 접근성 규칙 도움말을 참고하세요.

현재 모든 접근성 규칙은 실험적이며 기본적으로 사용 중지되어 있습니다. TSLint 구성 파일 (tslint.json)에 추가하여 사용 설정할 수 있습니다.

{
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    ...,
    "template-accessibility-alt-text": true,
    "template-accessibility-elements-content": true,
    "template-accessibility-label-for": true,
    "template-accessibility-tabindex-no-positive": true,
    "template-accessibility-table-scope": true,
    "template-accessibility-valid-aria": true,
    "template-click-events-have-key-events": true,
    "template-mouse-events-have-key-events": true,
    "template-no-autofocus": true,
    "template-no-distracting-elements": true
  }
}

TSLint는 널리 사용되는 모든 텍스트 편집기 및 IDE와 호환됩니다. VSCode와 함께 사용하려면 TSLint 플러그인을 설치합니다. WebStorm에서는 TSLint가 기본적으로 사용 설정됩니다. 다른 편집기의 경우 TSLint README를 확인하세요.

codelyzer의 접근성 검사가 설정되면 코딩할 때 TypeScript 파일 또는 인라인 템플릿의 접근성 오류를 보여주는 팝업이 표시됩니다.

텍스트 편집기의 Codelyzer 팝업 스크린샷
양식 요소 라벨 지정 오류를 보여주는 codelyzer 팝업

전체 프로젝트 (외부 템플릿 포함)에 대해 린트를 실행하려면 ng lint 명령어를 사용합니다.

Angular CLI를 사용한 린트

codelyzer 보충

Lighthouse는 Angular 애플리케이션에서 접근성 방식을 적용하는 데 사용할 수 있는 또 다른 도구입니다. codelyzer와 Lighthouse의 주요 차이점은 검사가 실행되는 시점입니다. Codelyzer는 개발 단계에서 애플리케이션을 실행하지 않고 정적으로 분석합니다. 즉, 개발 중에 텍스트 편집기 또는 터미널에서 직접 피드백을 받을 수 있습니다. 반면에 Lighthouse는 실제로 애플리케이션을 실행하고 동적 분석을 사용하여 여러 검사를 수행합니다.

두 도구 모두 개발 흐름에서 유용하게 사용될 수 있습니다. Lighthouse는 검사가 수행되므로 적용 범위가 더 넓으며, Codelyzer를 사용하면 텍스트 편집기에서 꾸준한 피드백을 받아 더 빠르게 반복할 수 있습니다.

지속적 통합에서 접근성 검사 시행

지속적 통합 (CI)에 정적 접근성 검사를 도입하면 개발 흐름을 크게 개선할 수 있습니다. codelyzer를 사용하면 각 코드 수정 (예: 새로운 pull 요청)에서 ng lint를 실행하여 특정 접근성 규칙이나 기타 관행을 쉽게 적용할 수 있습니다.

이렇게 하면 코드 검토를 진행하기 전에도 CI에서 접근성 위반이 있는지 알려줄 수 있습니다.

결론

Angular 앱의 접근성을 개선하려면 다음과 같이 하세요.

  1. Codelyzer에서 실험용 접근성 규칙을 사용 설정합니다.
  2. Angular CLI를 사용하여 전체 프로젝트에서 접근성 린트를 수행합니다.
  3. codelyzer에서 보고된 모든 접근성 문제를 수정했습니다.
  4. 런타임 시 접근성 감사에 Lighthouse를 사용하는 것이 좋습니다.