HTML <label> 태그 – 올바른 이해와 사용 방법

`<label>` 태그의 정의 및 사용법

<label> 태그는
사용자 인터페이스를 제공하는 컨트롤 요소들의 레이블(label, 이름표)를 나타냅니다.
이 태그는 컨트롤 요소들과 함께 사용하며, 가독성과 웹 접근성을 높이는 역할을 합니다.

사용자 인터페이스를 제공하는 컨트롤 요소들 (이하 '컨트롤 요소')

다음에 나열되는 컨트롤 요소들은 가독성과 웹 접근성을 고려해서 <label> 태그와 함께 사용해야 합니다. 이러한 요소들을 레이블 가능 요소(labelable) 라고 말합니다.

<input>: type 속성의 값이 hidden, button, reset, submit이 아닌 경우
<textarea>
<select>
<meter>
<progress>
<output>

다음에 나열되는 컨트롤 요소는 <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> 태그와 컨트롤 요소는 연결되어 매칭하게 됩니다.

HTML

<!--
    # 매칭할 컨트롤 요소의 id 값인 "user-checking"을
    # label 태그의 for 속성의 값으로 지정했습니다.
-->
<label for="user-checking">저를 클릭하세요.</label>
<input type="checkbox" id="user-checking">

이렇게 연결하면 <label>의 텍스트("저를 클릭하세요.")를 클릭하면 연결된 체크박스가 포커스됩니다.

이 방식 외에도, <label> 태그와 연결하여 매칭할 컨트롤 요소의 id 값을 <label> 태그의 for 속성의 값으로 지정하지 않고 다음과 같이 <label> 태그와 매칭할 컨트롤 요소를 연결할 수도 있습니다.

위의 두 방식 모두 명세서에서는 유효한 예제로 보여주고 있습니다.

`<label>`과 컨트롤 요소의 연결할 수 없을 경우

컨트롤 요소는 웹 접근성을 고려할 때 사용자에게 무슨 목적의 행위를 해야 하는지에 대한 정보 제공 즉, 이름표가 반드시 필요합니다.
<label> 태그는 이러한 기능을 제공하지만, <label> 태그를 어쩔수 없이 사용할 수 없는 경우에는 다음과 같이 title 속성을 사용해서 레이블을 추가해야 합니다.

부연설명
title 속성은 이 속성이 있는 요소에 대한 지침 또는 설명 등의 참고할 만한 정보를 나타냅니다.
일부 데스트탑 브라우저에서는 툴팁(tooltip)으로 표시합니다.

접근성 고려사항

앞서 설명한 바와 같이 <label> 태그는 사용자에게 가독성과 웹 접근성을 높이는 역할을 합니다. 스타일을 적용하지 않았을 경우 시각적 스타일링에도 별 차이가 있지 않습니다.

대부분의 브라우저는 <label> 태그의 CSS 속성인 cursor의 기본 값이 default로 설정되어 있습니다.

<label> 태그를 사용할 때에는 접근성에 주의해야 하며 관련된 몇 가지 고려해야 할 사항이 있습니다.

`<label>` 태그 안에 인터렉티브 요소 배치 금지

<label> 태그 안에 <a>나 <button>과 같은 인터렉티브 요소를 배치하지 마세요.
그렇게 하면 사용자에게 <label>과 관련된 컨트롤 요소에 접근하는데 방해가 됩니다.

HTML 이렇게 하지 마세요!

<label>
    <input type="checkbox" name="privacy">
    <a href="privacy.html">개인정보처리방침</a>에 동의합니다.
</label>

HTML 이렇게 하세요!

<label>
    <input type="checkbox" name="privacy">
    개인정보처리방침에 동의합니다.
</label>
<p><a href="privacy.html">개인정보처리방침 보기</a></p>

버튼 요소의 이름표로 사용 금지

<button>, <input type="button">, <input type="submit">, <input type="reset"> 들과 같은 버튼 요소는 이 요소의 텍스트가 자체적으로 이름표(label, 레이블)를 나타내는 역할을 하기 때문에 <label> 태그가 필요하지 않습니다. 그렇게 하면 웹 접근성을 위한 스크린 리더나 보조 기술에 방해가 될 수 있습니다.