← Back to rules

jsx-a11y/aria-role 정확성

작동 방식

ARIA 역할을 가진 요소는 유효하고 추상적이지 않은 ARIA 역할을 사용해야 합니다. 역할 정의에 대한 참고 정보는 WAI-ARIA 웹사이트에서 확인할 수 있습니다.

왜 문제가 되는가?

이 성공 기준의 목적은 보조 기술(예: 화면 독자, 화면 확대기, 음성 인식 소프트웨어 등)이 콘텐츠 내 사용자 인터페이스 컨트롤(예: 버튼, 체크박스 등)의 정보를 수집하고 활성화(또는 설정)하며 상태를 최신 상태로 유지할 수 있도록 보장하는 것입니다. 이는 장애를 가진 사람들이 사용하는 도구들입니다.

접근 가능한 기술의 표준 컨트롤을 사용할 경우, 이러한 과정은 간단합니다. 사용자 인터페이스 요소가 사양에 따라 사용된다면 이 조건을 충족하게 됩니다.

그러나 사용자 정의 컨트롤을 만들거나, 코드 또는 스크립트로 인터페이스 요소의 역할과/또는 기능을 일반적인 것과 다르게 프로그래밍한 경우, 보조 기술에 중요한 정보를 제공하고 보조 기술이 해당 컨트롤을 제어할 수 있도록 하기 위해 추가 조치가 필요합니다. 사용자 인터페이스 컨트롤의 특히 중요한 상태 중 하나는 포커스 여부입니다. 컨트롤의 포커스 상태는 프로그래밍적으로 결정할 수 있으며, 포커스 변경에 대한 알림은 사용자 에이전트와 보조 기술로 전달됩니다. 기타 사용자 인터페이스 컨트롤 상태의 예로는 체크박스나 라디오 버튼이 선택되었는지 여부, 접힌 트리나 목록 노드가 펼쳐졌는지 여부 등을 들 수 있습니다.

예시

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

<div role="datepicker"></div> <!-- 잘못됨: "datepicker"는 ARIA 역할이 아님 -->
<div role="range"></div>      <!-- 잘못됨: "range"는 _추상적_ 인 ARIA 역할임 -->
<div role=""></div>           <!-- 잘못됨: 빈 ARIA 역할은 허용되지 않음 -->
<Foo role={role}></Foo>       <!-- 잘못됨: ignoreNonDOM이 false이거나 설정되지 않음 -->

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

<div role="button"></div>     <!-- 좋음: "button"은 유효한 ARIA 역할임 -->
<div role={role}></div>       <!-- 좋음: 역할은 변수이며 런타임까지 판단할 수 없음 -->
<div></div>                   <!-- 좋음: ARIA 역할 없음 -->
<Foo role={role}></Foo>       <!-- 좋음: ignoreNonDOM이 true로 설정됨 -->

구성

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

allowedInvalidRoles

type: string[]

기본값: []

ARIA 사양 외에 허용되어야 하는 사용자 정의 역할입니다.

ignoreNonDOM

type: boolean

기본값: false

개발자가 생성한 컴포넌트가 검사 대상이 되는지 여부를 결정합니다.

사용 방법

구성 파일 또는 명령줄을 통해 이 규칙을 활성화하려면 다음을 사용하세요:

구성 (.oxlintrc.json)

{
  "plugins": ["jsx-a11y"],
  "rules": {
    "jsx-a11y/aria-role": "error"
  }
}

명령줄

oxlint --deny jsx-a11y/aria-role --jsx-a11y-plugin

참고 자료

• 규칙 소스