상세 컨텐츠

본문 제목

웹표준 코딩법

웹표준·접근성

by 김일국 2011. 7. 21. 21:09

본문

기본적으로 사용하는 input 요소와 label을 짝을 이룹니다.

<label for="valA" id="labA"> A : </label>
<input type="text" name="valA" id="valA" value="" title="A의 값을 입력하세요.">

체크박스와 라디오의 경우 input 요소 뒤에 label이 위치해야 합니다.
<input type="checkbox" name="valB" id="valB" value="" title="B 선택">
<label for="valB" id="labB"> B </label>


하지만,
시각적인 디자인이 label을 수용할 수 없을 때 혹은 label로 식별되는 텍스트가 스크린에 없을 때 혹은 label을 표시하는 것이 혼란스러울 수 있는 곳에서는 title 만으로 폼 컨트롤을 식별하게 됩니다.

검색의 경우
<label for="searchTerm" id="labSearch"> Search for : </label>

<select id="scope" title="검색범위">
    <option>subject</option>
    <option>actor</option>
    <option>writer</option>
    <option>content</option>
</select>
<input id="searchTerm" name="searchTerm" title="검색어를 입력하세요"/>

전화번호의 경우
<fieldset>
<legend>전화번호</legend>
<input id="areaCode" name="areaCode" title="지역번호" type="text" size="3" value="" >
<input id="exchange" name="exchange" title="국번" type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="전화번호" type="text" size="4" value="" >
</fieldset>

참고자료
http://www.wah.or.kr/TR/WCAG20-TECHS/html.html#H65


그 외 label을 쓰지 않는 경우
- 전송과 초기화 버튼 (input type="submit" 또는 input type="reset")
- 이미지 버튼 (input type="image")
- 숨겨진 입력필드 (input type="hidden")
- 스크립트 버튼 (input type="button")

참고자료
http://www.wah.or.kr/TR/WCAG20-TECHS/html.html#H44

관련글 더보기

댓글 영역