본문 바로가기
웹 접근성

label 접근성

by @hohoya33 2013년 07월 11일

<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 모두 읽을 것 같아 직접 사용하는 장애인들의 경우 더 헤깔릴 수 있다고 보지만


일단은 웹접근성연구소에서의 지침이라 이에 대한 부분은 스킵한다.

개의 댓글