Completion 0%

Education > PC/모바일 웹 접근성 체크리스트

8.2.1 폼 콘트롤 요소에는 적절한 label을 제공하며, 폼 콘트롤 요소의 id값과 <label>의 for값을 동일하게 제공하는가?

장애 유형

장애 유형
전맹, 저시력
오류 설명
  • 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등은 폼콘트롤요소의 id값과 label의 for값이 연결되어 있는 경우 폼요소 선택 시에 연계된 label을 읽어줌으로써 폼 콘트롤 요소를 인식할 수 있음.
  • <label>은 눈에 보이지 않게 제공할 수 있고, 폼 콘트롤 요소에 title로도 제공 가능함.

오류 유형

폼 콘트롤 요소의 id값과 label의 for값이 일치하지 않음

오류 예시
<input> 의 id값은 "query" 인데 label의 for값이 "iput_kwd"로 서로 일치 하지 않음.
참고 이미지
폼 콘트롤 요소의 id값과 label의 for값이 일치하지 않는 예
해결 방법
<input> 의 id값과 label의 for값이 일치해야 함.

폼 콘트롤 요소에 매칭할 레이블이 존재하는대도 title만 제공한 경우

오류 예시
<selectbox>와 매칭할 대체 텍스트 '메일함 기준시간' 이 앞쪽에 존재하는대도 title만 제공하였음.
참고 이미지
폼 콘트롤 요소에 매칭할 대체 텍스트가 존재하는대도 title만 제공한 예
해결 방법
매칭할 대체 텍스트가 있는 경우에는 반드시 <label>을 제공해야 함

모바일 환경에서 폼 콘트롤 요소의 id값과 label의 for값이 일치하지 않음

오류 예시
<input> 의 id값은 "chk_agree" 인데 label의 for값이 "chk_agree3"으로 서로 일치 하지 않음.
참고 이미지
해결 방법
<input> 의 id값과 label의 for값이 일치해야 함.

주의 사항

UI상 label이 들어갈 공간이 협소하여 title로 제공할 경우에는 오류 아님.

오류 아님 예
UI상 주민등록뒷자리 인풋박스에 해당하는 label이 들어갈 공간이 협소하여 title로만 제공을 하였음.
참고 이미지
UI상 label이 들어갈 공간이 협소하여 title로 제공한 예

평가 방법

  • 폼 콘트롤 요소가 없을 경우 해당 없음 처리

폼 콘트롤 요소에 레이블이 바르게 선언되었는지 확인

평가 도구
N-WAX
평가 방법
'8.2.1 레이블 사용' 항목에서 각 폼 콘트롤 요소의 레이블이 제대로 제공되고 있는지 확인.
[Case.1] 레이블이 폼 콘트롤과 연결되어 있는 경우, 하얀색 셀로 표시되며 레이블 내용 확인 후 통과 여부 결정.
[Case.2] 레이블이 폼 콘트롤과 연결되지 않고 폼 콘트롤의 title이 제공된 경우, 노란색 셀로 표시되며 레이블이 사용하기 어려운 조건이었는지 확인 후 통과 여부 결정.
[Case.3] 레이블이 폼 콘트롤과 연결되지 않고 폼 콘트롤의 title 속성도 제공되지 않은 경우, 빨간색 셀로 표시되며 오류 처리

모바일 환경에서 폼 콘트롤 요소에 레이블이 바르게 선언되었는지 확인

평가 도구
User Agent Switcher(파이어폭스 부가기능), N-WAX
평가 방법
Firefox 도구 메뉴 User Agent Switcher 의 Defalut User Agent 설정으로 원하는 모바일 기기 환경을 선택한 후, N-WAX를 활용해 PC환경에서의 평가와 동일하게 진행함

평가 도구 전체 설치 방법