Accessibility 본문

3.4.1 레이블 제공

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

필요성

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

대상

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

적용기술

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

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

  • 자동 검사 방법 : 접근성 검사 도구를 통한 검사 방법
  • 수동 검사 방법 : 직접 수동으로 확인하는 검사 방법
  • 발견수(건) : 해당 콘텐츠 발견 수
  • 준수수(건) : 준수한 콘텐츠 수
  • 오류수(건) : 오류 콘텐츠(요소 또는 영역) 수
자동 검사방법

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

발견수(건)

<input>, <textarea>, <select> 요소 수

준수수(건)

<label> 요소, title 속성이 제공 되어 있는 <input>, <textarea>, <select> 요소 수

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

사례

오류사례

레이블 미제공

레이블 제공 오류사례이미지
<form ...>
	<input ...>
	<span ...>㎡</span>
	...
	<input ...>
	<span ...>평</span>
</form>
개선방법

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

<form ...>
	<input ...id="idA">
	<label...for="idA">㎡</label>
	...
	<input ...id="idB">
	<label ... for="idB">평</label>
</form>

참고 URL : http://realestate.daum.net/maemul/area/1360000/A1A3A4/*/summary

우수사례

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

레이블 제공 우수사례이미지
<label for="nickname" ...>닉네임</label><input ... id="nickname" />
	<label for="gender" ...>성별</label>
	...
	<select id="gender" ...>...</select>

참고 URL : http://sgame.daum.net/main/SearchFriend.html