ESLint 접근성 검사

React 앱에서 아래와 같이 사용된 앵커 코드는 모두 접근성 문제를 일으키는 잘못된 예입니다. 앵커 요소의 역할은 href 속성을 통해 특정 페이지 또는 현재 페이지의 특정 위치로 이동하는 것입니다. 하지만 아래 방법은 모두 역할을 무시하고 JavaScript로만 제어하는 잘못된 것들입니다.

<a href="javascript:void(0)" onClick={handleClick} >액션</a>
<a href="#" onClick={handleClick} >액션</a>
<a onClick={handleClick} >액션</a>

위와 같이 JavaScript로만 컨트롤 하는 경우 앵커가 아닌, 버튼 요소를 사용해야 합니다.

<button type="button" onClick={handleClick} >액션</button>

하지만 a 요소를 사용했음에도 버튼 역할(role="button")을 수행하도록 구성할 수 있습니다. 이런 경우 href 속성은 키보드 포커스 역할을 수행하는 목적으로 사용되므로 값이 중요하지 않습니다. (tabIndex 속성 대체 가능) 그럼에도 접근성 검사는 이를 현재 판별할 수 없어 사용자가 직접 오류가 아님을 알려줘야 합니다.

eslint-plugin-jsx-a11y 의 anchor-is-valid 접근성 오류 검사를 회피하려면 다음과 같이 인라인 비활성화 주석을 작성 추가합니다.

/* eslint-disable jsx-a11y/anchor-is-valid  */