ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label)

ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label)

 

javascript

React 프로젝트에서 자주 마주치는 ESLint 오류 중 하나인 "A control must be associated with a text label.(jsx-a11y/control-has-associated-label)"에 대해 알아보고, 이를 해결하는 방법을 공유하려고 합니다.

오류의 의미

이 오류는 웹 접근성(Web Accessibility)과 관련이 있습니다. 간단히 말해, 사용자 인터페이스의 컨트롤(예: 버튼, 입력 필드)에 연관된 텍스트 레이블이 없을 때 발생합니다. 텍스트 레이블은 스크린 리더 사용자를 포함한 모든 사용자가 해당 컨트롤의 목적을 이해하는 데 중요합니다.

왜 중요한가?

1. 접근성: 시각 장애가 있는 사용자가 스크린 리더로 웹사이트를 탐색할 때 각 컨트롤의 기능을 이해하는 데 도움을 줍니다.
2. 사용성: 모든 사용자에게 더 명확하고 이해하기 쉬운 인터페이스를 제공합니다.
3. SEO: 검색 엔진이 페이지의 구조와 내용을 더 잘 이해하도록 돕습니다.

해결 방법

이 오류를 해결하는 여러 가지 방법이 있습니다. 상황에 따라 가장 적절한 방법을 선택하세요.

1. aria-label 속성 사용

가장 간단한 방법 중 하나는 aria-label 속성을 사용하는 것입니다.

<button aria-label="제출">📤</button>

반응형

2. aria-labelledby 속성 사용

다른 요소를 레이블로 참조하고 싶다면 aria-labelledby를 사용할 수 있습니다.

<span id="submitLabel">제출</span>
<button aria-labelledby="submitLabel">📤</button>

 

3. 가시적인 텍스트 레이블 추가

가장 직관적인 방법은 가시적인 텍스트 레이블을 추가하는 것입니다.

<button>
  <span>제출</span>
  <span aria-hidden="true">📤</span>
</button>

 

4. label 요소 사용 (주로 폼 요소에)

폼 요소의 경우, label 요소를 사용하는 것이 좋습니다.

<label>
  이메일:
  <input type="email" />
</label>

 

5. title 속성 사용 (마지막 수단으로)

다른 방법을 사용할 수 없는 경우, title 속성을 사용할 수 있습니다.

<button title="제출">📤</button>

 

주의사항

ESLint 규칙을 비활성화하는 것은 권장하지 않습니다. 이는 문제를 해결하는 것이 아니라 숨기는 것에 불과합니다. 하지만 꼭 필요한 경우, 다음과 같이 할 수 있습니다:

{
  "rules": {
    "jsx-a11y/control-has-associated-label": "off"
  }
}

결론

"jsx-a11y/control-has-associated-label" 오류는 단순한 불편함이 아닌, 웹 접근성 향상을 위한 중요한 지침입니다.