(원칙.3 이해의 용이성) 항목.21 레이블 제공 - 정보통신접근성(웹접근성)

한국형 웹 콘텐츠 접근성 지침 2.1 
Korean Web Content Accessibility Guidelines 2.1

웹 접근성 품질인증제도란?

• 장애인·고령자 등의 정보 접근 및 이용 편의를 증진하기 위하여 웹 접근성 표준을 준수한 사이트에 대해 품질을 인증 하고 인증마크를 부여
  * 웹접근성 준수는 필수지만 품질 인증마크는 선택 입니다.
• 관련 법령에 의거 과학기술정보통신부가 지정한 웹 접근성 품질 인증기관을 통해 심사 및 인증
  * ｢지능정보화기본법｣ 제47조, 제48조 등

---

원칙 3. 이해의 용이성(Understandable)

 

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

입력 서식에 대응하는 레이블을 제공한 경우 준수한 것으로 인정

 

[21-1] <input>, <textarea>, <select> 요소에 1:1 대응하는 <label>요소 또는 title 속성을 제공하지 않거나 설명이 적절하지 않은 경우

=> 각 입력 서식에 1:1로 대응하는 레이블을 제공하지 않은 경우

     사용자 입력에는 대응하는 레이블을 제 공해야 한다.

 

=> 각 입력 서식의 레이블이 부적절하게 제공된 경우

     (동작하지 않는 서식)

     - 서식(링크나 버튼) 더블탭 시 동작하지 않으며(iOS),

     - 서식임을 알 수 없는 경우(iOS, AOS공통)

 

=> (서식 제공 방법 부적절) 특정 옵션을 선택 후 선택한 옵션이 서식(혹은 선택된 버튼)임을 알 수 없습니다.

     기본서식을 제공하거나 선택된 라디오버튼임(iOS의 경우 선택된 버튼임을)을 인식 가능하도록 구현해야 합니다

 

[21-2] <lable> 텍스트가 존재함에도 불구하고 <label> 생략 후 title 속성만 사용한 경우

=> 화면상에 연결할 레이블이 표현되는 경우는 반드시 <label>로 연결하는 것을 권장 (이 문구가 정통부 공식표현)     

     <label> 을 사용 했음에도 불구하고 label 에 텍스트를 주지 않고 input 에 title 만 제공하는 경우로

     퍼블에서 Customize 한 <label> 을 제공하였으나, 개발에서는 <input> 태그만 컨트롤 할때 주의가 필요 합니다.

 

[21-3] <input>의 id와 <label>의 for가 다르거나, 페이지 안에 같은 id가 있는 경우

=> 입력 서식의 id 값과 <label>의 for 값은 동일해야 한다

위배사항	개선 가이드
<input type="image | hidden | submit | button | reset">을 제외한 모든 <input>, <textarea>, <select> 요소에 1:1로 대응하는 <label> 요소 또는 title 속성을 제공하지 않은 경우	입력 서식에는 1:1로 대응하는 <label> 요소나 title 속성을 제공해야 한다
<input type="image | hidden | submit | button | reset">을 제외한 모든 <input>, <textarea>, <select> 요소에 1:1로 대응하는 <label> 요소 또는 title 속성이 부적절하거나 불충분한 경우	적절한 <label> 요소나 title 속성을 제공해야 한다
페이지 안에 같은 입력서식 id가 있는 경우	입력 서식의 id 값은 중복 사용하지 않아야 한다
<select> 요소의 첫 번째 <option>이 레이블 역할을 대신하는 경우	<select> 요소에 <label>이나 title를 제공해야 한다
레이블에 이미지를 제공하여 일부 스크린리더에서 인식할 수 없는 경우	<img>대신 텍스트로 제공하거나 매칭되는 <input>의 title값을 적절하게 제공해야 한다.
버튼에 이미지를 제공하여 스크린리더에서 인식하지 못하는 문제가 발생하는 경우	<img>대신 텍스트로 제공하거나 <button>의 title값을 적절하게 제공해야 한다.