Skip to content
← Back to rules

jsx-a11y/anchor-has-content 정확성

An auto-fix is available for this rule.

해당 룰의 기능

앵커 요소가 내용을 가져야 하며, 그 내용이 화면 독자에게 접근 가능해야 한다는 것을 강제합니다.
접근 가능하다는 의미는 aria-hidden 속성을 사용하여 숨겨져 있지 않다는 것을 의미합니다.

다른 방법으로는 title 속성 또는 aria-label 속성을 사용할 수 있습니다.

왜 문제가 되는가?

내용이 없는 앵커 요소는 화면 독자를 이용해 이해를 돕는 사용자에게 혼란을 줄 수 있습니다.

예시

이 룰에 대한 올바른 코드 예시:

jsx
<a>앵커 콘텐츠!</a>
<a><TextWrapper /></a>
<a dangerouslySetInnerHTML={{ __html: 'foo' }} />
<a title='foo' />
<a aria-label='foo' />

이 룰에 대한 잘못된 코드 예시:

jsx
<a />
<a><TextWrapper aria-hidden /></a>

사용 방법

설정 파일이나 명령줄 인터페이스를 통해 이 룰을 활성화하려면 다음을 사용할 수 있습니다:

json
{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/anchor-has-content": "error"
  }
}
bash
oxlint --deny jsx-a11y/anchor-has-content --jsx-a11y-plugin

참고 자료