접근성을 위한 린트와 CI 게이트

테스트는 코드를 작성한 후 실행되지만, 린터는 입력하는 동안 문제를 표시합니다. 문제를 일찍 발견할수록 수정 비용이 줄어듭니다.

React 프로젝트에서는 eslint-plugin-jsx-a11y ESLint 플러그인이 편집기에서 바로 JSX의 일반적인 접근성 실수를 확인합니다.

jsx-a11y는 대체 텍스트 속성이 없는 이미지, href가 없는 앵커, 또는 상호 작용할 수 없는 요소에 설정된 클릭 처리기 등을 발견합니다.

대체 텍스트 속성을 추가하면 경고가 사라집니다. 수정은 아주 간단하며, 코드가 실제로 배포되기 전에 문제를 발견한 것입니다.

린터는 렌더링된 페이지가 아니라 소스 코드를 읽습니다. 대비나 포커스 순서를 측정할 수 없으므로 axe 스캔을 보완할 뿐 대체하지는 못합니다.

CI 게이트는 코드가 병합되기 전에 반드시 통과해야 하는 확인 절차입니다. 접근성 테스트가 실패하면 풀 리퀘스트가 그대로 차단됩니다.

게이트가 없으면 실패한 감사 결과는 모두가 무시하는 경고에 불과합니다. 게이트는 접근성을 정중한 제안이 아니라 요구 사항으로 만듭니다.

CI 워크플로는 종속 항목을 설치한 다음 린트 및 테스트 명령을 실행합니다. 0이 아닌 종료 코드가 반환되면 작업이 자동으로 실패합니다.

빌드가 빨간색으로 표시되면 작성자는 로그에서 실패한 정확한 규칙과 요소를 확인합니다. 피드백 순환은 몇 주가 아니라 몇 분 안에 완료됩니다.

잘못된 이유로 중단되는 게이트는 비활성화됩니다. 팀이 빨간색 빌드를 실제 문제로 신뢰할 수 있도록 테스트를 안정적이고 적절한 범위로 유지하십시오.

가장 강력한 설정은 린트를 코딩 중에 실행하고, 테스트에서 axe를 사용하며, 병합 시 CI 게이트를 적용하는 방식으로 여러 계층을 쌓는 것입니다. 각 계층이 다른 계층이 놓치는 문제를 발견합니다.

코딩하면서 린트를 실행하고, 테스트에서 axe를 실행하며, CI에서 병합을 게이트로 관리하십시오. 이러한 안전장치를 함께 적용하면 접근성 회귀가 배포되는 일을 막을 수 있습니다. 🚦