← Back to rules

jsx-a11y/label-has-associated-control 정확성

작동 방식

<label> 태그가 텍스트 레이블과 관련된 컨트롤을 가짐을 강제합니다.

왜 문제인가요?

폼 레이블이 올바르게 폼 컨트롤(예: <input>)과 연결되지 않았거나, 접근 가능한 텍스트를 포함하지 않으면 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 접근성이 저하됩니다. 사용자가 폼 컨트롤의 목적을 충분히 이해할 수 없게 됩니다.

예시

이 규칙에 부적절한 코드 예시:

function Foo(props) {
    return <label {...props} />
}

<input type="text" />
<label>Surname</label>

이 규칙에 적절한 코드 예시:

function Foo(props) {
  const { htmlFor, ...otherProps } = props;

  return <label htmlFor={htmlFor} {...otherProps} />;
}

<label>
  <input type="text" />
  Surname
</label>;

구성

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

assert

type: "htmlFor" | "nesting" | "both" | "either"

기본값: "either"

레이블과 컨트롤 사이에 요구되는 연결 유형.

controlComponents

type: string[]

기본값: []

폼 컨트롤로 취급할 사용자 정의 JSX 컴포넌트.

depth

type: integer

기본값: 2

중첩된 컨트롤을 검색할 최대 깊이.

labelAttributes

type: string[]

기본값: ["alt", "aria-label", "aria-labelledby"]

접근 가능한 레이블 텍스트를 확인할 속성.

labelComponents

type: string[]

기본값: ["label"]

레이블로 취급할 사용자 정의 JSX 컴포넌트.

사용 방법

구성 파일 또는 명령줄 인터페이스에서 이 규칙을 활성화하려면 다음을 사용하세요:

구성 파일 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/label-has-associated-control": "error"
  }
}

CLI

oxlint --deny jsx-a11y/label-has-associated-control --jsx-a11y-plugin

참고 문서

• 규칙 소스