(원칙.1 인식의용이성) 항목.3 색에 무관한 콘텐츠 인식-정보통신접근성(웹접근성)

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

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

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

---

원칙.1 인식의용이성(Perceivable)

항목.3 (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

색을 배제하여도 인식할 수 있는 콘텐츠를 제공한 경우 준수한 것으로 인정

[3-1] 색상만으로 내용을 구분하거나 인식하도록 제공된 콘텐츠(그래프, 차트, 지도, 필수 입력항목 등)를 제공한 경우

 

위배사항	개선 가이드
	색상만으로 정보를 식별할 수 있도록 제공한 경우 색상이 아닌 패턴, 외곽선 등 다른 방법으로 해당 정보를 이해할 수 있도록 제공하여야 한다
	[ 안내문구와 각 금액정보가 색상만으로 연관된 경우 ] 각 금액을 각각 구분지을 수 있는 추가적인 정보를 제공해야 함 ( 숨김처리 제공 ) ex1) <span style="숨김처리">이용요금</span> <span>월 59,900원</span> ex2) <span style="숨김처리">부가세포함액</span> <span>(월 65,890원)</span> ( 숨김처리 스타일 ) ex) style="width:100%; height:1px; margin-top:-1px; opacity:0;" --> 초점이 시각적으로 보여야 함
현재 선택상태에 대한 정보가 제공되지 않은 경우	현재 보여지는 콘텐츠에 어느 탭의 콘텐츠인지 알 수 있도록 추가적인 정보를 제공해야 한다. ex) <a href="#" title="선택됨, 현재탭, 현재단계, 현재위치, 현재페이지 등 의미에 맞게 제공"
	[ 회원가입 등에서 * 만 제공한 경우 ] 개선방법1 : 입력 서식(테이블) 상단에 '* 표시는 필수 입력 항목입니다' 와 같이 제공하거나 개선방법2 : * 에 대한 추가정보를 숨김처리방식으로 제공해야 한다. ex) <label for="sample" class="required"><span class="hide">(필수입력)</span>성명</label>
	[ 페이징, 메뉴 등의 현재의 위치를 표시한 경우 ] 위치 정보를 나타내는 콘텐츠는 색상에만 의존하지 않고 모양, 패턴을 이용하여 인식 가능하도록 구현해야 한다
	[ 색상의 변화만으로 각 텍스트를 구분한 경우 ] 각 텍스트를 구분지을 수 있는 추가적인 정보를 제공해야 한다
필수 입력 항목을 색으로만 표시한 경우	색을 배제하고서라도 구분할 수 있도록, '*' 등을 색과 함께 제공해야 한다
차트에서 색각이상 사용자 관련하여 꼭 패턴을 넣어야 하나?	패턴이 아니더라도 색상 외의 정보가 제공되어 색각이상 사용자 등에게 데이터의 올바른 인식이 가능하면 됩니다. 데이터 레이블과 데이터 간의 가이드라인 / 데이터 영역에 직접적인 레이블 삽입 대체 수단(데이터 테이블)을 추가로 제공 (이 경우 차트 영역에 aria-hidden="true" 처리)