<label>
태그의 정의 및 사용법
<label>
태그는
사용자 인터페이스를 제공하는 컨트롤 요소들의 이름표(label, 레이블)를 나타내는 태그입니다.
이 태그는 컨트롤 요소들과 함께 사용하며, 가독성과 웹 접근성을 높이는 역할을 합니다.
사용자 인터페이스를 제공하는 컨트롤 요소들 (이하 '컨트롤 요소')
다음에 나열되는 컨트롤 요소들은 가독성과 웹 접근성을 고려해서 <label>
태그와 함께 사용해야 합니다. 이러한 요소들을 '레이블 가능(labelable) 요소'라고 말합니다.
다음에 나열되는 컨트롤 요소는 <label>
태그와 함께 사용할 필요가 없습니다.
<button>
,<input type="button">
,<input type="submit">
,<input type="reset">
: 이 요소의 텍스트가 자체적으로 이름표(label, 레이블)를 나타내는 역할을 하기 때문에<label>
태그가 필요하지 않습니다.
<label>
태그를 컨트롤 요소에 사용하면 좋은 이점
컨트롤 요소에 <label>
태그를 사용하지 않는다고 해서 틀린 문법은 아닙니다. 하지만, <label>
태그를 컨트롤 요소에 연결하는 것은 웹 접근성과 사용자 경험을 향상시키는 데 중요한 역할을 합니다.
- 웹 접근성을 위한 스크린 리더 지원:
<label>
태그의for
속성과 연결된 컨트롤 요소의id
를 매칭하여 매칭된 컨트롤 요소의 이름표라는 것을 명확히 파악하게 해줍니다. - 사용자 편의성 증대:
<label>
을 클릭하면 매칭된 컨트롤 요소가 포커스되거나 접근 가능하게 해줍니다.
<label>
과 컨트롤 요소의 연결
<label>
태그와 연결하여 매칭할 컨트롤 요소의 id
값을 <label>
태그의 for
속성의 값으로 지정하면 이 <label>
태그와 컨트롤 요소는 연결되어 매칭하게 됩니다.
이렇게 연결하면 <label>
의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.
이 방식 외에도, <label>
태그와 연결하여 매칭할 컨트롤 요소의 id
값을 <label>
태그의 for
속성의 값으로 지정하지 않고 다음과 같이 <label>
태그와 매칭할 컨트롤 요소를 연결할 수도 있습니다.
위의 두 방식 모두 명세서에서는 유효한 예제로 보여주고 있습니다.
<label>
과 컨트롤 요소의 연결할 수 없을 경우
컨트롤 요소는 웹 접근성을 고려할 때 사용자에게 무슨 목적의 행위를 해야 하는지에 대한 정보 제공 즉, 이름표가 반드시 필요합니다.
<label>
태그는 이러한 기능을 제공하지만, <label>
태그를 어쩔수 없이 사용할 수 없는 경우에는 다음과 같이 title
속성을 사용해서 레이블을 추가해야 합니다.
접근성 고려사항
앞서 설명한 바와 같이 <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 |