본문 바로가기
IT

[웹접근성] 한국형 웹 콘텐츠 접근성 지침 2.1 / 1 ~ 5

by SOGNOD 2020. 5. 15.
반응형
1 적절한 대체 텍스트 제공
텍스트 아닌 콘텐츠는 그 의 미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

대체 텍스트를 제공하지 않은 경우
대체 텍스트를 제공하였으나 불충분하게 제공한 경우
대체 텍스트를 제공하였으나 부적절하게 제공한 경우
ex)
해당 이미지와 동등한 의미를 가진 대체 텍스트를 제공해야 한다.

<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->

2 자막 제공
멀티미디어 콘텐츠에는 자막, 대본 또는 수 화를 제공해야 한다.

<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->

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

색상만으로 내용을 분별하도록 제공된 콘텐츠가 있는 경우
필수 입력 항목을 색으로만 표시한 경우
ex)
[ 그래프, 차트, 지도 등의 경우 ] 색상이 아닌 패턴, 외곽선 등 다른 방법으로 해당 정보를 이해할 수 있도록 제공하여야 한다.
[ 안내문구와 각 금액정보가 색상만으로 연관된 경우 ] 각 금액을 각각 구분지을 수 있는 추가적인 정보를 제공해야 함 ( 숨김처리 제공 ) 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="현재탭, 현재단계, 현재위치, 현재페이지 등 의미에 맞게 제공">8월</a>
[ 회원가입 등에서 * 만 제공한 경우 ] 개선방법1 : 입력 서식(테이블) 상단에 '* 표시는 필수 입력 항목입니다' 와 같이 제공하거나 개선방법2 : * 에 대한 추가정보를 숨김처리방식으로 제공해야 한다. ex) <label for="sample" class="required"><span class="hide">(필수입력)</span>성명</label>
<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->

4 명확한 지시사항 제공
지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

색, 크기, 모양, 방향 등으로만 정보를 제공한 경우
ex)
지시사항 정보는 색, 크기, 모양, 방향, 위치 등의 특정 감각에 의존하지 않고도 용도나 목적을 이해할 수 있도록 제공해야 한다 ex) "아래의 경우에 해당시" → "다음의 경우에 해당 시", "다음 내용에 해당 하는 경우"

<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->

5 텍스트 콘텐츠의 명도 대비
텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

텍스트색과 배경색 간의 명도 대비 차이가 3:1 미만인 경우
ex)
텍스트색과 배경색 간의 명도 대비 차이는 3:1 이상이어야 한다.

반응형