'웹표준,접근성'에 해당되는 글 9건

  1. 2011.11.29 label 접근성
2011. 11. 29. 16:08

 

<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
Posted by silver0r