<label>요소는 폼양식의 요소를 설명하는 텍스트로써 모든 양식 요소는 항상 label과 명시적인 방법으로 1:1 대응해야 한다.
label 텍스트를 제공하면 화면 낭독기를 사용하는 사용자는 특정 폼양식 요소에 대하여 문맥의 도움 없이 독립적으로 접근 하더라도
label 설명을 전달 받을 수 있다.
<label for="userId">아이디 *</label>
<input id="userId" type="text" size="30" value="" />
허나 label 텍스트를 생략하거나 레이블과 맵핑되야 할 두 개 이상의 <input /> 요소에 하나의 설명만을 제공해야 할 때는
<label>...</label> 요소 대신 title 속성을 사용할 수 있습니다.
이 때는
<label for="userOzipcode1">주소 *</label>
<input id="userOzipcode1" type="text" size="15" value="" title="우편번호 앞 세자리" readonly="">
-
<input id="userOzipcode2" type="text" size="15" value="" title="우편번호 뒤 세자리" readonly="">
식으로 앞에 것만 label과 매핑하고 둘 다 title을 사용하여 해당 텍스트에 대한 설명을 적어주면 된다.
label 텍스트가 존재함에도 불구하고 label을 사용하지 않고 title속성을 사용하는 것은 바람직 하지 않으며
현재 웹접근성연구소(http://www.wah.or.kr/)에 따르면 label이 없는 폼양식일 경우(디자인 상, 그 외 등등)
label 텍스트를 적지 않고 title을 적어줘도 무방하다고 한다.
<input type="text" title="통합 검색어" />
그리고 <input type="image" /> 를 사용할 경우 해당 이미지에 대한 alt와 title을 명시해주는 것을 권고한다.
<input type="image" src="..." alt="검색" title="검색어에 대한 통합 검색 결과 보기" />
허나 이 때 스크린리더기가 alt와 title 모두 읽을 것 같아 직접 사용하는 장애인들의 경우 더 헤깔릴 수 있다고 보지만
일단은 웹접근성연구소에서의 지침이라 이에 대한 부분은 스킵한다.
'웹표준,접근성' 카테고리의 다른 글
error 이미지 처리 (0) | 2014.02.03 |
---|---|
웹접근성연구소-웹접근성 심사 (0) | 2011.11.29 |
img태그의 longdesc사용법 (4) | 2011.10.12 |
css 말줄임 처리 (0) | 2011.08.25 |
N-MET 마크업 개발 도구 (0) | 2011.08.25 |