jsx-a11y/alt-text 정확성
작동 방식
모든 대체 텍스트가 필요한 요소에 대해 사용자에게 의미 있는 정보를 제공하도록 강제합니다.
왜 문제가 되는가?
대체 텍스트는 스크린 리더 사용자를 위한 접근성의 핵심 요소이며, 요소의 내용과 기능을 이해할 수 있도록 도와줍니다. 부족하거나 부적절한 대체 텍스트는 보조 기술에 의존하는 사용자에게 콘텐츠에 접근할 수 없게 만듭니다.
예시
이 규칙에 대한 잘못된 코드 예시:
jsx
<img src="flower.jpg" />
<img src="flower.jpg" alt="" />
<object />
<area />이 규칙에 대한 올바른 코드 예시:
jsx
<img src="flower.jpg" alt="하얀 딜리아 꽃의 근접 사진" />
<img src="decorative.jpg" alt="" role="presentation" />
<object aria-label="인터랙티브 차트" />
<area alt="탐색 링크" />구성
이 규칙은 다음 속성을 가진 구성 객체를 수용합니다.
area
type: string[]
기본값: []
area 요소에서 대체 텍스트를 확인해야 할 사용자 정의 컴포넌트입니다.
img
type: string[]
기본값: []
img 요소에서 대체 텍스트를 확인해야 할 사용자 정의 컴포넌트입니다.
input[type="image"]
type: string[]
기본값: []
input[type="image"] 요소에서 대체 텍스트를 확인해야 할 사용자 정의 컴포넌트입니다.
object
type: string[]
기본값: []
object 요소에서 대체 텍스트를 확인해야 할 사용자 정의 컴포넌트입니다.
사용 방법
구성 파일 또는 명령줄 인터페이스를 통해 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:
json
{
"plugins": ["jsx-a11y"],
"rules": {
"jsx-a11y/alt-text": "error"
}
}bash
oxlint --deny jsx-a11y/alt-text --jsx-a11y-plugin