🌟 eslint-plugin-jsx-a11y란 무엇인가?

Source: Dev.to

eslint‑plugin‑jsx‑a11y란?

ESLint 플러그인으로, JSX 코드를 정적 분석하여 접근성 규칙 집합을 식별하고 적용합니다. 브라우저에서 코드가 렌더링되기 전에 잠재적인 문제를 감지하는 데 도움을 줍니다.

왜 중요한가?

이 플러그인은 장애가 있는 사용자를 배제할 수 있는 일반적인 접근성 오류를 예방합니다. a11y를 린팅 흐름에 통합함으로써 다음을 보장합니다:

• 예방적 개발 – 코드를 작성하는 순간 문제를 수정하므로, 나중에 고치는 것보다 훨씬 효율적입니다.
• 지속적인 교육 – 가이드 역할을 하며 React/JSX 요소에 대한 접근성 모범 사례를 가르칩니다.
• 준수 – WCAG(웹 콘텐츠 접근성 가이드라인)와 같은 중요한 접근성 지침을 따르도록 코드를 돕습니다.

감지하는 문제 예시

• img without alt – alt 속성이 없는 이미지가 있을 때 경고합니다(스크린 리더에 필수).
• onClick without onKeyPress/onKeyDown – onClick을 사용하는 인터랙티브 요소가 키보드로도 작동하도록 확인합니다.
• 라벨이 연결되지 않은 폼 컨트롤 – 입력 요소와 <label>( htmlFor 사용)이 올바르게 연결되었는지 보장합니다.
• ARIA 속성 오용 – aria- 속성의 문법 및 사용을 검증합니다.
• 내용이 보이지 않는 링크 (<a>) – 링크에 텍스트나 ARIA 설명이 있는지 확인합니다.

다른 도구와의 보완

eslint-plugin-jsx-a11y는 소스 코드(JSX)를 정적 분석한다는 점을 기억해야 합니다. 페이지에 최종적으로 렌더링된 HTML을 테스트하지는 않습니다.

따라서 런타임 접근성 테스트 도구와 함께 사용하는 경우가 많습니다:

• react‑axe (or @axe‑core/react) – 최종 DOM을 감사합니다.
• jest‑axe – 렌더링 후 접근성 단위 테스트에 사용합니다.

요약: eslint-plugin-jsx-a11y는 React 개발 과정에서 접근성을 핵심 요소로 만들기 위한 첫 번째 방어선입니다.