[유용정보] label 요소를 checkbox 나 radio 에 사용하면 클릭에 편의성 제공가능

서식(form)의 입력 요소(input)에 레이블을 지정하는 태그이다. 레이블과 입력 요소의 연결은 크게 명시적(explicit) 연결과 암시적(implicit) 연결로 나뉜다. 명시적 연결은 레이블 요소의 포(for)속성과 입력 요소의 아이디(id)요소를 같게하여 명시적으로 연결을 지칭하는 방법이다. 그리고, 암시적 연결은 레이블과 입력 요소를 하나의 레이블 요소로 감싸서 레이블 요소 안의 레이블과 입력 요소를 연결해주는 방법이다.

명시적 연결<label for="user-id">아이디</label>
<input type="text" id="user-id" />
암시적 연결<label>
    아이디
    <input type="text" />
</label>
명시적 연결은 서식을 표 요소로 제작하는 경우와 같이 레이블과 입력 요소 사이에 다른 HTML 요소가 포함될 경우 많이 사용한다.

레이블 요소를 이용해서 입력 요소와 레이블을 연결해주면 입력 요소에 어떠한 내용을 입력해야 하는지 명확해 지기 때문에 접근성이 향상되게 된다. 또한, 운영체제나 브라우저에서 연결된 레이블을 클릭할 경우 입력 요소가 같이 클릭되는 기능을 제공하고 있어서 사용성도 올라가게 된다. 라디오 버튼이나 체크박스와 같이 클릭 영역이 작은 경우에도 레이블을 클릭하면 라디오 버튼이나 체크박스를 클릭한 것과 동일한 효과가 나타나게 된다.

암시적 연결을 사용할 경우 일부 보조기기들은 연결을 인식하지 못하기 때문에 보조기기들이 이를 지원할 때 까지 명시적 연결을 사용하는 것이 더 권장된다.