기본적으로 사용하는 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>
<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
[HTML5] IE10이하 익스플로러를 위한 대비책 (0) | 2013.08.01 |
---|---|
html 유효성검사시 주소표시줄의 공백문자 처리 (0) | 2011.07.22 |
웹접근성 자바스크립트를 이용한 페이지 이동 (0) | 2011.07.06 |
웸표준 코딩수정 사항 - 기본 (0) | 2011.07.06 |
웹접근성을 고려한 팝업창 코딩 (0) | 2011.07.06 |
댓글 영역