널리

접근성과 사용성에 중요한 역할을 하는 태그중 하나가 label태그 인데요. 로그인 과정등에서 쓰이면 좋은 사용성을 보장해줍니다.

<fieldset> 
<input id="naver" type="checkbox"> 
<label for="naver">NHN WS Team</label> 
</fieldset> 

위 코드처럼 NHN WS Team이란 글자를 label태그로 감싼후 checkbox의 id와 label 태그의 for값을 매칭시켜주면 아래의 예시와 같이 checkbox와 텍스트는 서로 연동되어져 동작하게 됩니다. (텍스트에 클릭을 해도 체크박스의 체크여부를 설정할수 있습니다)

NHN WS Team

헌데 NHN WS Team 이란 텍스트대신 image형태로 처리하게 되면 IE의 경우는 label본연의 기능이 동작하지 않습니다. (버그일까요?) IE사용자 분들은 아래 예시를 통해 확인해보실수 있습니다. (네이버 로고를 클릭해 보세요)

이럴 경우 간단한 Javascript를 통해서 label 태그의 기능을 사용할수 있습니다. (IE일경우만 동작하는 스크립트 입니다.)

<fieldset> 
<input id="naver2" type="checkbox"> 
<label for="naver2" onclick="if(navigator.appVersion.indexOf('MSIE') != -1){naver2.click()}">
<img src="http://wstatic.naver.com/w/n_c600.gif" alt="Naver" style="cursor:pointer">
</label> 
</fieldset> 

위 코드가 적용된 예시를 아래에서 확인해보시면 잘 동작되는 모습을 보실수 있습니다. (네이버 로고를 클릭해 보세요)

접근성 뿐만 아닌 일반사용자들에게 사용성도 높여주는 label태그를 많이 활용해 보자구요 :)

ps_
봄이 정말 힘겹게 오고있는것 같습니다. 화창한 날씨를 보고 싶은데 계속 흐린주말이네요. 힘들게 오는 봄이니 만큼 화창 하겠지요? 봄이 기다려지는 흐린 주말입니다. ^^