웹접근성 가이드 : 인식의 용이성

0. 시작하는 글

: 웹 접근성 관련 인식의 용이성에 관한 내용이다.

- 인식의 용이성은 콘텐츠를 쉽게 인식하자는 취지.

검사항목 1. 적절한 텍스트 제공 : 의미 용도 인식 가능하도록 대체 텍스트 제공

검사항목 2. 자막제공 : 멀티미디어 콘텐츠에는 자막, 대본 또는 수화 제공해야 함

검사항목 3. 색에 무관한 콘텐츠 인식 : 콘텐츠 색에 관계 없이 인식 될 수 있음

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

검사항목 5. 콘텐츠 명도 대비 : 텍스트 콘텐츠와 배경 간의 명도 대비 4.5 대 1이상

검사항목 6. 자동 재생 금지 : 자동으로 재생되는 배경음 사용되지 않아야 함

검사항목7. 콘텐츠 간의 구분 : 이웃한 콘텐츠는 구별되야 함

1. 대체텍스트

1) 대체 텍스트 개념 : 텍스트가 아닌 이미지, 이모티콘, 문자, 영상, 음성 콘텐츠 등에 대해 텍스트로 대체하는 것을 의미

2) 대체 텍스트 제공 방법

 - 이미지 -> 대체 텍스트 제공

  ex) <img src="xxxx" alt="이 이미지는 테스트 용입니다"/>

- 주로 alt속성을 이용하여 내용을 명시하고, 내용이 길어질 경우 longdesc속성을 이용

(오류유형)

- 불충분한 대체 텍스트 제공한 경우 

 -> 중요정보를 잘 넣어야 함 - 아래처럼 이미지 설명이 충분이 되어야 함

 ex) <img src="xxxx" alt="2017 자선축구경기, 서울대학교주최 일시 : 2017. 3.1(월) ~ 3(수) 10시~17시, 장소: 잠실 종합운동장 사이트 바로가기" />

- 오타로 표기되면 안됨

-  <input type="image">에 대체 텍스트를 미 제공한 경우 -> 단순 버튼에도 대체텍스트명이 필요

  ex) <input type="image" arc="xxxx" alt="검색"/>

- 이미지의 대체 텍스트 미제공한 경우

 -> 해당 이미지에 구체적 묘사보다는 해당이미지의 주제, 목적 정도를 이해할 수 있도록 제공하는 게 좋음

ex) <img src="xxx" alt="백화점 세일기간 길게 줄선 전경" />

- 불릿 이미지 대체 텍스트 제공되어야함

 : 의미 없어도 화면 난독기가 불릿 이미지를 읽을 때 사용자들에게 혼란을 줌

ex) <ul>

<li><a href="#"> <img src="XXX" alt=""/>

 

# 이모티콘 같은 경우 대처방법

a) 이모티콘의 내용을 텍스트와 함께 표기

ex) OTL(좌절금지 이모티콘)

b) 이미지 변환하고, 대체텍스트 제공

ex) <img src="emoticon" alt="좌절금지 이모티콘"/>

c) 줄임말에 사용되는 abbr 태그 활용

ex) <abbr title="좌절금지 이모티콘"> OTL </abbr>

- 의미없는 이미지에 대한 대체 텍스트 제공한 경우

: 필요없는 이미지는 설명이 없어도 됨 - 빈값을 제공하여 화면낭독기 사용자들의 불필요한 시간을 줄임

ex) <img src="xxx" alt=""/>

- 여러개로 분리한 이미지 조각의 대체 텍스트 제공

: 나눠진 이미지들 중 한개에만 코드를 몰아주기

ex) 1번째 img 태그에 alt내용을 다 몰아주고, 2,3번째는 빈alt로 놔둠

# 종합적으로 대체 텍스트 이미지는 alt속성값을 이용해서 제공 / 이미지 내용 복잡하거나 길어진 경우 longdesc 속성을 이용하여 별도 파일 제공

3) 대체 텍스트와 멀티미디어 대체수단의 취지와 내용

(1) 멀티미디어 콘텐츠 개념 : 음성을 포함하는 영상, 음성으로만 제공되는 콘텐츠

-> 청각장애인을 위해 시각적인 정보 혹은 수화로 대체 되어야 함

-> 비장애인에도 시끄러운 환경에서 명확한 이해 제공

- 동기화된 자막이 원칙이지만, 동기화까지는 아니여도 한화면에서 정확히 내용을 전달하면 됨

- 즉시성이 필요한 경우, 실시간 수화를 제공하거나 자막을 제공

- 실시간으로 제공하는 CCTV 같은 영상은 대체텍스트를 제공하지 않음

4) 평가포인트

- 대체텍스트 요소들 확인

- img요소 외 alt속성을 제공하는 요소는 area, input type="image"가 있음

2. 대체 텍스트와 멀티미디어 대체수단 제공방법

1) 준수 기준 : 멀티미디어 콘텐츠를 동등하게 인식할 수 있도록 제작하기 위해서 자막, 대본 또는 수화를 제공한 경우 준수한 것으로 인정

2) 오류 유형

- 자막, 대본 수화 중 하나 이상 대체 수단을 제공하지 않는 것

- 내용 전체를 충분히 설명하지 않고 요약정보나 제목만 제공 (정보의 차별)

- 텍스트만 제공하는 영상 콘텐츠에서 동등한 음성을 미제공시 -> 시각장애인에게는차별

3) 플레시나 움직이는 gif같은 경우

: 플래시 경우 이미지 컷에 네임값 적용 - 너무 이미지가 많으면 자막 제공 / 두세컷 이미지 교대는 이미지 네임값 적용

: 교대이미지의 gif는 하나에 대체 텍스트 명시

: 너무 많은 이미지의 gif는 롱디스크립션 혹은 관련 내용 본문 표시

4) 평가포인트

- 동기화된 자막 또는 수화, 원고 중 한가지를 제공한 경우 준수

- 음향정보가 없는 텍스트 영상 경우, 시각장애인이 인식할 수 없으니 대체수단을 제공해야 함

3. 색에 무관한 콘텐츠 인식

1) 기본내용

- 정보 구분의 구별점을 색상을 배제하고도 다른방식으로 인식 가능하게 함

  (고령자, 시력이 약한 사용자를 위해)

-> 도식유형(그래프, 차트)에 적용하던 검사항목, 페이지 네비게이션 을 패턴(무늬), 외곽선 등으로 정보 인식을 도와줌

(적록색맹, 녹내장 환자 등을 위해)

2) 오류유형

- 색상만으로 내용을 분별하도록 제공된 콘텐츠(x)

  -> 방법 : 차트 등에는 보조선, 범례를 이용

- 페이지 네비네기션, 메뉴, 현재 위치 등에 대해 명암, 패턴 등 변화없이 색상의 변환만으로 위치를 표시한 경우

  -> 방법 :색상과 밑줄 등의 표시를 함

- 필수입력항목을 색으로만 표시 (x) - 색상 구분이 안됨

  -> 방법 :필수입력화목에 체크표시를 함

ex) 페이스북 사례

: 마크 주커버그는 적록색맹임 -> 적록색맹은 붉은색, 녹색 구분 잘 못하나, 황색이나 청색은 매우 예민하게 구분함

3) 평가포인트

- 색상을 배제하고 판별하기 -> 패턴이나 무늬 넣어져있으면 판단 가능

 (색약자 사용성을 위해)

- OpenWAX 점검결과에서 흑백 토글 기능 이용 가능

4. 명확한 지시사항(특정감각에 장애있는 사용자가 웹에서 지시내용을 웹사이트에서 잘 인지)

 검사항목4. 지시사항을 전달하는 콘텐츠는 명확해야 함

1) 기본내용 : 특정감각에 의존하지 않고 다양한 감각을 통해서 제공해야 함(지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 함)

ex) 여기, 이곳 -> 내용 제출, 닫기

2) 오류유형

- 색, 크기, 모양, 방향으로만 정보를 제공한 경우 (x) -> 색맹

- 전달하고자 하는 지시사항을 소리로만 제공한 경우 (x) -> 청각장애

3) 평가포인트

- 시각장애인도 사용할 수 있도록 지시사항을 명확히 써야 함

ex) 좌측 메뉴를 클릭해주세요 -> 위치정보만 있는 지시사항은 시각장애인이 사용할 수 없음, 

   -> 세부 분류 ~와 

ex) 색을 지시요소로 쓰면 문제 있음

5. 텍스트 콘텐츠의 명도 대비

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

1) 기본 내용 :  웹 페이지 콘텐츠에 텍스트, 이미지 텍스트 정보에 대해 폰트 크기는 4.5:1 이상(18pt미만)

 (보통형태의 18px 미만 텍스트 명도대비 : 4:5:1, / 보통형태의 18px이상의 텍스트 명도대비 3:1)

- 굻은 14pt 이상 굵은 18px 미만은 3:1 이상의 명도 대비를 제공해야 함

# 화면 확대가 가능한 페이지는 텍스트 콘텐츠(텍스트, 텍스트 이미지) 명도 대비는 3:1까지 준수로 인정

# CCA 프로그램 이용

- 이미지 텍스트의 경우, 18.66px 미만인 경우 4.5:1 이상이거나, 18.66px 이상인 경우 3:1이상을 만족해야 함

- 텍스트 콘텐츠 명도 대비 제공방법시 주의사항

: 콘텐츠 영역으로 제공되는 표, 그래프, 텍스트 이미지의 텍스트 내용을 의미

: 화면의 footer 등 장신적 문구를 제외한 모든 텍스트의 명도 대비 지켜야 함

(Windows : 14pt는 18.66px , 18pt는 24px / Mac OS는 pt와 px가 같음)

(Windows 표준 해상도는 96dpi, Mac OS는 72dpi, 평가는 Windows 기준으로 실시)

-> OS에 따라 값이 달라짐. Windows는 18.66px, Mac은 14px이 14pt

2) 예외사항

로고, 상호, 마우스나 키보드 활용하여 초점을 받을 때 명도 대비가 변화하는 콘텐츠, 사용할 수 없음을 표현하여 명도대비를 낮춘 회색의 컨트롤이나 입력서식은 이 검사 항목에 적용 받지  X (장식 목적은 명도대비 검사에서 제외)

-> 색상테마 등을 이용하여 웹 사이트 색상정보 변경한 경우는 명도대비 규정을 준수해야 함

3) 평가포인트

- 눈으로 보았을 때 구분이 어려운 것을 평가하면 대다수 문제가 있음

 - CCA를 이용

6. 배경음 사용 금지 (자동 재생 금지)

검사항목6. 자동으로 재생되는 배경음을 사용하지 않아야 한다.

1) 기본 개념

- 배경음 : 페이지에서 배경으로 제공되는 음성정보

- 자동으로 재생되는 배경음 사용 금지(가장 좋은 방법)

- 사용한다면 3초 미만 / 배경음 제어수단 제공해야 함(페이지 가장 첫부분에 제공되는 경우)  (꼭 해야 한다면)

-> 배경음으로 화면 낭독기 음성 방해 안되게 함

# 3초 미만 배경음은 괜찮음

2) 오류유형

- 페이지 진입 후, 자동재생 3초이상 배경음 제공 (x) 

   -> 방법 : 정지된 상태에서 컨트롤(재생) 할수 있게 제공

- 마우스 오버, 키보드 초점을 받아 자동적으로 배경음이 3초이상 실행되는 경우

   -> 방법 : 선택(클릭)을 해야 재생되도록 바꿈

# 표 사용은 지양하는 게 좋음, 표안에 표를 넣지 않고 분리하는게 좋음, 낭독 프로그램은 좌에수 우를 읽으니 기획에 주의해야 함

# 접근성을 적용하면 콘텐츠에 더 많은 수단을 적용하는 것으로 이해하는 것이 좋음 (ex 플래시 콘텐츠도 접근성을 높이기 위한 패널 속성을 제공) 

3) 평가포인트

- 긴 배경음은 시각장애인을 위한 스크린리더(화면 낭독기) 사용에 방해를 줄 수 있음

- 자동 재생되는 콘텐츠는 정지상태로 제공되어야 함

- 마우스 올렸을 때 자동 재생되는 콘텐츠도 문제 있음

7. 콘텐츠 간의 구분

검사항목7. 이웃한 콘텐츠는 구분될 수 있어야 한다

1) 준수기준 : 이웃한 콘텐츠가 테두리, 기분선 서로 다른 무늬 등을 이용하여 시각적으로 구분되도록 제공한 경우 준수한 것으로 인정

2) 평가포인트  : 아래중 1개 이상으로 구분해야 함

- 테두리를 이용하여 구분

- 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분

- 서로 다른 무늬를 이용하여 구분

- 콘텐츠 배경색간 명도대비를 달리하여 구분

- 줄 간격 및 글자 간격을 조절하여 구분

- 기타 콘텐츠를 시각적으로 구분할 수 있는 방법

웹/모바일 접근성 관련 궁금 한 것들은 물어봐 주세요 ^^

공감 혹은 댓글은 

글쓴이에게 큰 도움이 됩니다~