모든 사용자가 액세스할 수 있는 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 파일이나 인라인 템플릿에 접근성 오류가 표시된 팝업이 표시됩니다.