누구나 Angular 사이트에 액세스할 수 있도록 하고 싶으신가요? 여기가 딱 맞아!
접근성 높은 앱을 만든다는 것은 특별한 도움이 필요한 사용자를 포함한 모든 사용자가 앱을 사용하고 콘텐츠를 이해할 수 있게 된다는 의미입니다. 세계 보건 보고서에 따르면 전 세계 인구의 약 15% 인 10억 명 이상의 사람들이 장애를 가지고 있습니다. 따라서 접근성은 모든 개발 프로젝트에서 우선순위입니다.
이 게시물에서는 codelyzer의 접근성 확인을 Angular 앱의 빌드 프로세스에 추가하는 방법을 알아봅니다. 이 방법을 사용하면 코딩할 때 텍스트 편집기에서 직접 접근성 버그를 잡아낼 수 있습니다.
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 파일 또는 인라인 템플릿의 접근성 오류를 보여주는 팝업이 표시됩니다.
<ph type="x-smartling-placeholder">
외부 템플릿을 포함하여 전체 프로젝트에서 린트 작업을 수행하려면 ng lint 명령어를 사용합니다.
Codelyzer 보충
Lighthouse는 Angular 애플리케이션에서 접근성 권장사항을 적용하는 데 사용할 수 있는 또 다른 도구입니다. Codelyzer와 Lighthouse의 주요 차이점은 검사가 수행되는 시점입니다. Codelyzer는 애플리케이션을 실행하지 않고 개발 시 정적으로 분석합니다. 즉, 개발 중에는 텍스트 편집기나 터미널을 통해 직접 피드백을 받을 수 있습니다. 반면, Lighthouse는 실제로 애플리케이션을 실행하고 동적 분석을 사용하여 여러 검사를 수행합니다.
두 도구 모두 개발 흐름에서 유용하게 사용될 수 있습니다. Lighthouse는 검사 수행을 고려할 때 적용 범위가 더 넓으며, Codelyzer를 사용하면 텍스트 편집기에서 지속적인 피드백을 받아 더 빠르게 반복할 수 있습니다.
지속적 통합에서 접근성 검사 적용
지속적 통합 (CI)에 정적 접근성 검사를 도입하면 개발 흐름을 크게 개선할 수 있습니다. Codelyzer를 사용하면 각 코드 수정 시 (예: 새 pull 요청마다) ng lint를 실행하여 특정 접근성 규칙이나 기타 권장사항을 쉽게 적용할 수 있습니다.
이렇게 하면 코드 검토를 진행하기 전에도 CI에서 접근성 위반이 있는지 알려줄 수 있습니다.
결론
Angular 앱의 접근성을 개선하는 방법은 다음과 같습니다.
- Codelyzer에서 실험용 접근성 규칙을 사용 설정합니다.
- Angular CLI를 사용하여 전체 프로젝트에서 접근성 린트를 실행합니다.
- Codelyzer에서 보고된 모든 접근성 문제를 수정합니다.
- 런타임 시 접근성 감사에 Lighthouse를 사용해 보세요.