모든 사용자가 액세스할 수 있는 Angular 사이트를 만들고 싶으신가요? 이곳이 바로 그곳입니다.
앱을 접근 가능하게 만든다는 것은 특수 요구사항이 있는 사용자를 포함한 모든 사용자가 앱을 사용하고 콘텐츠를 이해할 수 있다는 의미입니다. 세계보건기구 보고서에 따르면 10억 명이 넘는 사람들(전 세계 인구의 약 15%)이 어떤 형태로든 장애를 가지고 있습니다. 따라서 모든 개발 프로젝트에서 접근성이 우선순위입니다.
이 게시물에서는 Angular 앱의 빌드 프로세스에 codelyzer's 접근성 검사를 추가하는 방법을 알아봅니다. 이 방법을 사용하면 코딩할 때 텍스트 편집기에서 직접 접근성 버그를 포착할 수 있습니다.
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 파일이나 인라인 템플릿에 접근성 오류가 표시된 팝업이 표시됩니다.
외부 템플릿을 포함한 전체 프로젝트에 대해 린팅을 실행하려면 ng lint 명령어를 사용합니다.
Codelyzer 보완
Lighthouse는 Angular 애플리케이션에서 접근성 관행을 적용하는 데 사용할 수 있는 또 다른 도구입니다. codelyzer와 Lighthouse의 주요 차이점은 검사가 실행되는 시점입니다. Codelyzer는 개발 시 애플리케이션을 실행하지 않고 정적으로 분석합니다. 즉, 개발 중에 텍스트 편집기나 터미널에서 직접 피드백을 받을 수 있습니다. 반면 Lighthouse는 실제로 애플리케이션을 실행하고 동적 분석을 사용하여 여러 검사를 실행합니다.
두 도구 모두 개발 흐름에서 유용하게 사용할 수 있습니다. Lighthouse는 실행하는 검사를 고려할 때 더 나은 커버리지를 제공하며, codelyzer를 사용하면 텍스트 편집기에서 지속적인 피드백을 받아 더 빠르게 반복할 수 있습니다.
지속적 통합에서 접근성 검사 적용
지속적 통합 (CI)에 정적 접근성 검사를 도입하면 개발 흐름을 크게 개선할 수 있습니다. Codelyzer를 사용하면 각 코드 수정 (예: 각 새 풀 요청)에 ng lint를 실행하여 특정 접근성 규칙이나 기타 사례를 쉽게 적용할 수 있습니다.
이렇게 하면 코드 검토를 진행하기 전에도 CI에서 접근성 위반이 있는지 알려줄 수 있습니다.
결론
Angular 앱의 접근성을 개선하려면 다음 단계를 따르세요.
- codelyzer에서 실험용 접근성 규칙을 사용 설정합니다.
- Angular CLI를 사용하여 전체 프로젝트에 걸쳐 접근성 린팅을 실행합니다.
- Codelyzer에서 보고한 모든 접근성 문제를 수정합니다.
- 런타임에 접근성 감사를 위해 Lighthouse를 사용하는 것이 좋습니다.