정의 및 사용 방법
<label> 태그는
사용자 인터페이스를 제공하는 컨트롤 요소들의 레이블(label, 이름표)을 나타냅니다.
이 태그는 컨트롤 요소의 이름표를 제공하여 사용자에게 컨트롤 요소에 대한 가독성 및 웹 접근성을 높이는 역할을 합니다.
기본 예제
관련 속성
<embed> 태그는 모든 글로벌 속성을 사용할 수 있으며,
이 태그에 특화된 for 속성이 있습니다.
for 속성
for 속성은 해당 레이블이 어떤 컨트롤 요소와 연결되는지를 값으로 지정합니다.
즉, for 속성의 값은 연결할 컨트롤 요소의 id 값과 동일해야 합니다.
사용자 인터페이스를 제공하는 컨트롤 요소들 (이하 '컨트롤 요소')
다음에 나열되는 컨트롤 요소들은 가독성과 웹 접근성을 고려해서 <label> 태그와 함께 사용해야 합니다. 이러한 요소들을 레이블 가능 요소(labelable) 라고 말합니다.
다음에 나열되는 컨트롤 요소는 버튼 모양으로 표시되며 <label> 태그와 함께 사용할 필요가 없습니다.
이 요소들의 텍스트가 자체적으로 이름표(label, 레이블)를 나타내는 역할을 하기 때문에 <label> 태그가 필요하지 않습니다.
<label> 태그를 컨트롤 요소에 사용하면 좋은 이점
컨트롤 요소에 <label> 태그를 사용하지 않는다고 해서 틀린 문법은 아닙니다. 하지만, <label> 태그를 컨트롤 요소에 연결하는 것은 웹 접근성과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.
- 웹 접근성을 위한 스크린 리더 지원:
<label>태그의for속성과 연결된 컨트롤 요소의id를 매칭하여 매칭된 컨트롤 요소의 이름표라는 것을 명확히 파악하게 해줍니다. - 사용자 편의성 증대:
<label>을 클릭하면 매칭된 컨트롤 요소가 포커스되거나 접근 가능하게 해줍니다.
<label>과 컨트롤 요소의 연결
방법 1: for 속성 사용하기
<label> 태그와 연결하여 매칭할 컨트롤 요소의 id 값을 <label> 태그의 for 속성의 값으로 지정하면 이 <label> 태그와 컨트롤 요소는 연결되어 매칭하게 됩니다.
이렇게 연결하면 <label>의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.
방법 2: 컨트롤 요소를 감싸기
<label> 태그와 연결하여 매칭할 컨트롤 요소의 id 값을 <label> 태그의 for 속성의 값으로 지정하지 않고 다음과 같이 <label> 태그와 매칭할 컨트롤 요소를 연결할 수도 있습니다.
위의 두 방식 모두 명세서에서는 유효한 예제로 보여주고 있습니다.
<label>과 컨트롤 요소의 연결할 수 없을 경우
컨트롤 요소는 웹 접근성을 고려할 때 사용자에게 무슨 목적의 행위를 해야 하는지에 대한 정보 제공 즉, 이름표가 반드시 필요합니다.
<label> 태그는 이러한 기능을 제공하지만, <label> 태그를 어쩔수 없이 사용할 수 없는 경우에는 다음과 같이 title 속성을 사용해서 레이블을 추가해야 합니다.
부연설명
title 속성은 이 속성이 있는 요소에 대한 지침 또는 설명 등의 참고할 만한 정보를 나타냅니다.
일부 데스트탑 브라우저에서는 툴팁(tooltip)으로 표시합니다.
접근성 고려 사항
앞서 설명한 바와 같이 <label> 태그는 사용자에게 가독성과 웹 접근성을 높이는 역할을 합니다. 스타일을 적용하지 않았을 경우 시각적 스타일링에도 별 차이가 있지 않습니다.
대부분의 브라우저는 <label> 태그의 CSS 속성인 cursor의 기본 값이 default로 설정되어 있습니다.
<label> 태그를 사용할 때에는 접근성에 주의해야 하며 관련된 몇 가지 고려해야 할 사항이 있습니다.
<label> 태그 안에 인터렉티브 요소 배치 금지
<label> 태그 안에 <a>나 <button>과 같은 인터렉티브 요소를 배치하지 마세요.
그렇게 하면 사용자에게 <label>과 관련된 컨트롤 요소에 접근하는데 방해가 됩니다.
버튼 요소의 이름표로 사용 금지
<button>, <input type="button">, <input type="submit">, <input type="reset"> 들과 같은 버튼 요소는 이 요소의 텍스트가 자체적으로 이름표(label, 레이블)를 나타내는 역할을 하기 때문에 <label> 태그가 필요하지 않습니다. 그렇게 하면 웹 접근성을 위한 스크린 리더나 보조 기술에 방해가 될 수 있습니다.
<label>과 연결되는 컨트롤 요소가 없을 경우
<label> 태그는 사용자 인터페이스를 제공하는 컨트롤 요소들의 이름표(label, 레이블)를 나타내는 태그입니다. 따라서, 다음과 같은 경우에는 잘못된 마크업입니다.
<label>태그가 연결할 컨트롤 요소 없이 단독으로 사용되는 경우<label>태그가 연결할 컨트롤 요소가 일대일로 연결되어 있지 않고 두 개 이상의 컨트롤 요소에 연결되어 있는 경우<label>태그가 연결된 요소가 레이블 가능 요소(labelable)가 아닐 경우
기술적인 문법 요약
브라우저 호환성
| 태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<label>
|
1 | 12 | 1 | 4 |
명세서
| 명세서 사양 | |
|---|---|
<label>
|
HTML Standard #the-label-element |