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 이상이어야 한다.
'IT' 카테고리의 다른 글
[웹접근성] Style Guide: page navigation (0) | 2021.05.12 |
---|---|
[웹접근성] Html Guide: Visual Image (0) | 2021.05.02 |
[웹접근성] 한국형 웹 콘텐츠 접근성 지침 2.1 / 6 ~ 16 (0) | 2020.05.14 |
[웹접근성] 한국형 웹 콘텐츠 접근성 지침 2.1 / 17 ~ 24 (0) | 2020.05.12 |
[웹기획] | 고객의 실수를 유도하는 설계(예시) (0) | 2020.05.11 |