Accessibility 본문

9.1 레이블 제공

입력 서식에는 대응하는 레이블을 제공해야 한다.

필요성

장애인들에게는 서식에 자료를 입력하는 것이 그냥 주어진 내용을 읽는 것보다 훨씬 어려운 일에 속하며 많은 시간을 요구한다. 레이블을 제공하여 정확한 입력 값을 유도하고, 서식을 올바르게 작성할 수 있도록 해야한다.

대상

  • 지체장애
  • 전맹
  • 저시력
  • 비장애인

적용기술

입력 서식(<input>, <textarea>, <select> 요소 등)에 대응하는 레이블(<label> 요소, title 속성)을 제공해야 한다.

검사방법 및 QA 지표 산정방법

자동 검사방법

<input>, <textarea>, <select> 요소 등에 <label> 요소, title 속성 유무 체크

수동 검사방법
  • 입력 서식에 레이블이 올바르게 연결되어 있는지 체크
  • 레이블값이 해당 서식을 적절한 내용으로 표현했는지 체크
  • 입력 서식에 중복 레이블을 제공하지 않았는지 체크
오류수(건)
  • 입력 서식(<input>, <textarea>, <select> 요소 등)에 레이블(<label> 요소, title 속성)이 올바르게 연결되어 있지 않은 요소 수
  • 레이블 값이 해당 서식을 적절한 내용으로 표현하지 않은 요소 수
  • 입력 서식에 중복 레이블을 제공하는 요소 수

사례

오류사례

레이블 미제공, span으로 대신 사용함

오류사례이미지
<form ...>
	<span>닉네임</span>
	...
	<input id="nickname" name="nickname" type="text" value="박지현" />
</form>
개선방법

우수사례처럼 레이블을 넣어 id와 연결시켜놓음

<form ...>
	...
	<label for="nickname">닉네임</label>
	<input id="nickname" name="nickname" type="text" value="박지현" />
	...
</form>

참고 URL : http://m.y.daum.net/user/sign

우수사례

id와 레이블이 적절히 연결되어 있음

우수사례이미지
<label for="to" ...>받는이</label>
<input id="to" type="text" class="txt" ... />
...
<select id="gender" ...>...</select>