← Back to rules

jsx-a11y/anchor-is-valid 정확성

작동 방식

형식적으로 정의된 HTML <a> 요소는 href 속성이 유효한 경우 하이퍼링크를 나타냅니다.
즉, 하나의 HTML 문서와 다른 문서 사이, 또는 동일한 문서 내의 한 위치와 다른 위치 사이의 링크입니다.

이전에는 앵커 요소에 로직을 연결하는 것이 가능했지만, JSX 라이브러리의 등장 이후에는 어떤 HTML 요소든(앵커 포함) 로직을 쉽게 연결할 수 있게 되었습니다.

이 규칙은 사용자가 앵커 클릭 시 로직을 실행하는 것을 방지하고, 앵커 요소에 제공된 href가 올바른지 확인하기 위해 설계되었습니다. 만약 앵커에 로직이 연결되어 있다면, 사용자가 의도한 바는 아마도 button일 가능성이 높으므로 해당 요소를 button으로 전환하도록 제안합니다.

어떤 링크를 위한 네비게이션에는 <a></a> 요소를 사용해야 하며, 사용자 상호작용을 위한 것은 <button></button>을 사용해야 합니다.

다음과 같은 예시를 고려해 보세요:

<>
  <a href="javascript:void(0)" onClick={foo}>
    작업 수행
  </a>
  <a href="#" onClick={foo}>
    작업 수행
  </a>
  <a onClick={foo}>작업 수행</a>
</>

이 모든 앵커 구현은 요소가 순수하게 자바스크립트 코드를 실행하기 위해만 사용되고 있음을 시사합니다. 위의 모든 경우는 다음처럼 교체되어야 합니다:

<button onClick={foo}>작업 수행</button>

왜 문제인가요?

앵커에 로직이 없고 올바른 href 속성이 있어야 하는 이유는 많은 이유가 있습니다:

• 사용자의 탐색 흐름을 방해할 수 있습니다. 예를 들어, 사용자가 링크를 새 탭에서 열고 싶지만, 기본 "클릭" 동작이 차단되는 경우
• 잘못된 링크의 원인이 될 수 있으며, 크롤러가 웹사이트를 탐색할 수 없게 되어 검색 엔진 최적화(서치 엔진 최적화) 점수가 저하될 수 있습니다

예시

이 규칙에 대한 유효한 코드 예시:

<>
  <a href={`https://www.javascript.com`}>여기로 이동</a>
  <a href={somewhere}>여기로 이동</a>
  <a {...spread}>여기로 이동</a>
</>

이 규칙에 대한 무효한 코드 예시:

<>
  <a href={null}>여기로 이동</a>
  <a href={undefined}>여기로 이동</a>
  <a href>여기로 이동</a>
  <a href="javascript:void(0)">여기로 이동</a>
  <a href="https://example.com" onClick={something}>
    여기로 이동
  </a>
</>

참고 자료

• WCAG 2.1.1

구성

이 규칙은 다음과 같은 속성을 가진 구성 객체를 수용합니다:

validHrefs

type: string[]

기본값: []

유효한 href 값 목록입니다.

사용 방법

이 규칙을 설정 파일이나 명령줄 인터페이스를 통해 활성화하려면 다음을 사용하세요:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/anchor-is-valid": "error"
  }
}

CLI

oxlint --deny jsx-a11y/anchor-is-valid --jsx-a11y-plugin

참고 자료

• 규칙 소스