← Back to rules

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

작동 방식

제목 요소 (h1, h2 등)가 내용을 가져야 하며, 해당 내용이 스크린 리더에서 접근 가능해야 한다는 규칙을 강제합니다.
접근 가능하다는 것은 aria-hidden 속성을 사용하여 숨겨지지 않았다는 의미입니다.

왜 문제가 되는가?

스크린 리더는 제목 태그의 존재를 사용자에게 알립니다.
제목이 비어 있거나 텍스트에 접근할 수 없다면, 사용자를 혼란스럽게 만들거나 심지어 페이지의 구조 정보에 접근하는 것을 막을 수도 있습니다.

예시

이 규칙에 잘못된 코드 예시:

<h1 />

이 규칙에 올바른 코드 예시:

<h1>Foo</h1>

구성

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

components

type: string[]

기본값: null

표준의 h1-h6 요소 외에도 제목 요소로 취급할 추가 사용자 정의 컴포넌트 이름입니다.
이러한 컴포넌트도 표준 요소와 함께 검증됩니다.

사용 방법

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

구성 파일 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/heading-has-content": "error"
  }
}

CLI

oxlint --deny jsx-a11y/heading-has-content --jsx-a11y-plugin

참고 자료

• 규칙 소스