더북(TheBook)

3.6.3 label 태그

label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용합니다. label 태그를 잘 사용하면 label 태그만 클릭해도 상호작용 요소를 선택할 수 있습니다. 그리고 시각 장애인이 웹을 탐색할 때 사용하는 보조 도구인 스크린 리더기가 label 태그로 연결된 상호작용 요소를 쉽게 식별할 수 있어서 웹 접근성 향상을 위해서도 필수로 사용하길 권장합니다.

Note 웹 접근성이란?

웹의 기본 이념은 모든 사람이 차별 없이 동일한 사용자 경험을 하는 데 그 목적이 있습니다. 요컨대, 웹을 이용할 때 장애인이나 고령자가 비장애인이나 젊은 세대와 차별 없이 동등하게 웹에 접근할 수 있고 이용할 수 있도록 보장하는 것을 말합니다.

label 태그는 사용하는 방법에 따라 암묵적인 방법과 명시적인 방법으로 구분합니다. 암묵적인 방법은 label 태그에 상호작용 요소를 포함하는 방법으로, label 태그를 다음과 같이 사용합니다.

03/06/label.html

<label>
  아이디
  <input type="text"> 
</label>

 

상호작용 요소

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.