코드쓰는사람

label 이라는 매우 편리한 태그가 존재함에도 불구하고 아직도 많은 사람들은 라디오 버튼이나 체크박스를 찍을때 박스를 정확히 찍도록 만들며, 혹은 스크립트 삽질로 같은 기능을 구현하는 경우가 있다.

label 태그를 써보자.
각각의 input 들은 label이라고 하는 태그를 통해서 접근할 수도 있다. label 태그를 이용하면 사용자는 label 안의 내용을 클릭해도 input 을 클릭한 효과를 얻을 수 있다(실제로 onclick 이벤트도 발생한다).

간단한 예제를 보자.

IE에서는 지원안되는 예제
IE, FF 둘 다 지원하는 예제
라벨이 없는 경우

세번째 라벨이 없는 경우의 값을 클릭할 때 사용자들은 원모양의 조그만 점에 커서를 집중시키기 위한 스트레스를 받아야 한다. 반면에 널찍한 텍스트를 클릭해도 된다면, 상대적으로 스트레스는 조금 덜할 것이다. 물론 label 태그에는 이미지도 사용가능하다(IE에서는 사용할 수 없다).

훨씬 사용하기가 낫다는 생각이 들지 않습니까?
게다가 accesskey 속성을 이용하면 로컬응용프로그램에서 보던 단축키 기능도 가능하다(Alt + 단축키).

바로가기(S)

이렇듯 많은 장점과 보다 편리한 접근성을 제공해주는 LABEL 태그지만 아직도 많은 사람들은 이 태그의 효용성을 잘 모르고 있다. 이제는 알았으니 사용자를 위한 작은 배려를 실천해보자.