04. 인식의 용이성(2) | sohinggu๑°⌓°๑

인식의 용이성 (2)

학습목표
1. 인식의 용이성을 높이기 위한 검사항목 중 색에 무관한 콘텐츠 인식을 이해하고 콘텐츠에 제공할 수 있습니다.
2. 명확한 지시사항 항목을 이해하고 콘텐츠를 제공할 수 있습니다.
3. 텍스트 콘텐츠의 명도 대비 항목을 이해하고 콘텐츠를 제공할 수 있습니다.
4. 배경음 사용 금지 항목을 이해하고 콘텐츠를 제공할 수 있습니다.

웹 접근성 검사 항목 - 인식의 용이성

 

<항목3> 색에 무관한 콘텐츠 인식: 콘텐츠를 색에 관계없이 인식될 수 있다.

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

<항목5> 콘텐츠 명도 대비: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 : 1 이상 이여야 한다.

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

<항목7> 콘텐츠 간의 구분: 이웃한 콘텐츠를 구별될 수 있어야 한다.

색에 무관한 콘텐츠 인식

1. 색에 무관한 콘텐츠 인식의 개념

정보를 구분하는 구별점을 색상으로만 하지 않고, 색을 배제하더라도 인식할 수 있도록 제공하는 것

색과 무관하게 콘텐츠를 인식할 수 있도록 그래프 각 항목의 모양을 다르게 해주었다. (출처: 배움나라) 

2. 색에 무관한 콘텐츠 인식의 필요성/목적

색맹, 색약, 저시력 등 색에 장애가 있는 사용자나 고령자와 같이 색상을 구분하지 못하거나 시력이 약한 사용자를 위해 색생이 아닌 다른 방식으로 구분할 수 있는 정보 제공함으로써 콘텐츠를 인지할 수 있도록 한다.

3. 색에 무관한 콘텐츠 인식의 검사항목 해설

도식 유형에 적용하던 검사항목, 페이지 네비게이션, 필수 입력 항목 등과 같이 주로 색상만으로 구분하는 모든 요소에 적용하기 시작하였다. 따라서 색상 뿐만 아니라 무늬와 같은 패턴, 외곽선 또는 주변정보를 통해 정보를 인식할 수 있도록 해주는 것이 중요하다. 다양한 시각장애인의 유형에 따라 색상만으로 구분해도 콘텐츠를 인식할 수 있을 정도로 전경과 배경에 명도차를 준다면 가능한 지표지만 평가 측면에서 볼때 평가자의 시력차에 따라 다른 결과값이 나올 우려가 있기 때문에 명도차에 대한 색상구분 항목은 따로 두지 않는다.

4. 색에 무관한 콘텐츠 제공 방법

(1) 제공 방법

기준: 색을 배제하여도 해당 콘텐츠를 인식할 수 있는 정보를 제공한 경우 기준을 준수한 것으로 인정한다.

(2) 오류 유형

a. 색상만으로 내용을 분별하도록 제공된 콘텐츠(그래프, 차트, 지도 등)

색에 무관한 콘텐츠 오류 유형1 (출처: 배움나라)

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

색에 무관한 콘텐츠 오류 유형2 (출처: 배움나라)

c. 필수 입력 항목을 색으로만 표시한 경우

색에 무관한 콘텐츠 오류 유형3 (출처: 배움나라)

[Tip] 필수항목

필수항목 인식 방법 (출처: 배움나라)

[Tip] 페이스북 컬러의 비밀

페이스북 컬러의 비밀 (출처: 배움나라)

명확한 지시사항 제공

1. 명확한 지시사항 제공의 개념

- 지시사항을 전달하는 콘텐츠에 한정해 적용하는 것
- 무엇을 지시하는지 명확하게 하기 위해 목적이 분명한 지시가 되어야 하는 것
- 특정 감각에만 의존하지 않고 다른 감각을 통해서도 지시사항을 인식할 수 있도록 정보를 제공하는 것

2. 명확한 지시사항 제공의 필요성/목적

특정한 감각에 장애가 있는 사용자가 웹 사이트에서 지시된 내용을 제대로 실행할 수 있도록 한다.

3. 명확한 지시사항 제공의 검사항목 해설

- 시각정보를 이용한 지시나 청각정보를 이용한 지시는 서로 보완할 수 있는 타감각과 함께 제시하여 우회적인 방법이며 링크 텍스트의 내용과 똑같이 대체 텍스트를 제공하기 때문에 시각장애인들도 이해할 수 있다.
- 모호하거나 한가지 감각만으로 지시된 표현을 구체적으로 지시한다면 용도나 목적이 명확해진다.

4. 명확한 지시사항 제공 방법

(1) 제공 방법

기준: 지시사항 정보를 특정 감각에 의존하지 않고 다양한 감각을 통해 용도나 목적을 이해할 수 있도록 제동한 경우 기준을 준수한 것으로 인정한다.

(2) 오류 유형

a. 색, 크기, 모양, 방향 등으로만 정보를 제공한 경우

명확한 지시사항 제공 오류 유형1 (출처: 배움나라)

b. 전달하고자 하는 지시사항을 소리로만 정보를 제공한 경우

명확한 지시사항 제공 오류 유형2 (출처: 배움나라)

[Tip] 지시사항 형태

• 특수기호만을 이용하여 지시사항을 알려주는 경우 (1)

  

  특수기호만을 이용하여 지시사항을 알려주는 경우1 (출처: 배움나라)

  - 시각적으로 의미가 있고 이해할 수 있으나 화면 낭독기와 같은 보조기기에서는 의미를 파악하기 매우 어려움
  - *가 의미하는 것이 무엇인지 안내를 하고 있지 않기 때무에 '필수제출'과 같은 의미있는 텍스트로 변경해주는 것이 바람직함
  - 시각적으로는 *가 보이지만 숨김텍스트를 이용하여 '필수제출'이라는 음성정보가 시각장애인들에게 지원될 수 있도록 지원함

  

• 특수기호만을 이용하여 지시사항을 알려주는 경우 (2)

  

  특수기호만을 이용하여 지시사항을 알려주는 경우2 (출처: 배움나라)

  - 특수기호(◈)를 사용하여 선택적 교과목을 표시하였지만, 보조기기에서의 이해가 어려우므로 '해당'이라는 표현과 같이 의미있는 텍스트로 변경해주는 것이 좋음

텍스트 콘텐츠의 명도 대비

1. 명도 대비의 개념

- 텍스트 콘텐츠와 배경 간의 명암의 차이
- 4.5:1 이상을 권장
- 명도: 물체의 색이나 빛의 색이 지니는 밝기의 정도

2. 텍스트 콘텐츠의 명도 대비의 필요성/목적

색맹, 색약, 저시력, 고령자 등의 시력이 약한 사용자를 위한 지침으로 최소한의 명도 차이를 둠으로써 정보를 인식할 수 있도록 한다.

3. 텍스트 콘텐츠의 명도 대비의 검사항목 해설

논란이 매우 많았던 지표중의 하나로 현재는 '본문 콘텐츠'에 대해서만 적용한다.

[검사 적용 예외]

• 단순히 장식 목적으로만 사용한 텍스트
• 로고 또는 상호와 같은 텍스트 이미지
• 마우스나 키보드를 활용하여 초점을 받았을 때 색이나 명도 대비가 변화하는 콘텐츠
• 사용할 수 없음을 표시하기 위해 명도 대비를 낮춘 회색의 컨트롤이나 입력 서식 등

4. 텍스트 콘텐츠의 명도 대비 제공 방법

(1) 제공 방법

기준: 웹페이지 콘텐츠에 텍스트, 이미지 텍스트 정보에 대해 폰트의 크기가 4.5:1 이상(18pt이상), 굵은 14pt이상은 3 : 1 이상의 명도 대비를 제공하는 경우 (단, 화면 확대가 가능하도록 구현한 텍스트 콘텐츠(텍스트 및 텍스트 이미지)의 명도대비는 3:1 까지 기준을 준수한 것으로 인정한다.

(2) 오류 유형

a. 텍스트의 규격 정보가 있으며, 보통 크기(18pt 미만, 또는 굵은 14pt 미만)의 텍스트가 4.5:1을 만족하지 않은 경우

텍스트 콘텐츠의 명도 대비 오류 유형1 (출처: 배움나라)

b. 텍스트의 규격 정보가 있으며, 텍스트의 크기가 18pt 이상, 또는 굵은 14pt 이상의 텍스트가 3 : 1을 만족하지 않은 경우

텍스트 콘텐츠의 명도 대비 오류 유형2 (출처: 배움나라)

c. 이미지 텍스트의 경우 폰트 종류와 상관없이 14pt크기에 해당하는 18.66px 미만인 경우 4.5:1 이상이거나, 18.66px 이상인 경우 3:1 이상을 만족 하지 않은 경우(굵은 14pt 기준은 적용하지 않음)

텍스트 콘텐츠의 명도 대비 오류 유형3 (출처: 배움나라)

(3) 주의사항

a. 본문은 콘텐츠 영역으로 제공된 텍스트 또는 정보를 제공하는 표, 그래프 및 텍스트 이미지의 텍스트 내용을 의미

• 명도의 차이를 두어야 하는 대상: 웹페이지 콘텐츠(전체) - '웹페이지 콘텐츠(전체)'를 심사의 대상으로 정함
• 장식적인 문구를 제외한 모든 텍스트에 대해서 명도 대비 줌

 

b. 텍스트 크기가 구분이 되지 않는 경우나 이미지 텍스트의 경우는 글 모양과 상관없이 Windows에서 14pt는 18.66px이고 18pt는 24px로 적용하며, 굵음의 여부와 상관 없이 14pt 이상은 3:1 이상, 미만은 4.5:1 이상의 명도대비를 제공하는 경우 준수하는 것으로 인정

• MacOS는 pt와 px가 같음
• Windows의 표준 해상도: 96dpi, MacOS의 표준 해상도: 72dpi. 평가는 Windows의 기준으로 실시 - 운영체제에 따라서 값이 달라지므로 Windows에서는 18.66px, Mac에서는 14px이 14pt에 해당한다는 설명

 

c. 웹페이지 콘텐츠에 장식 목적으로만 사용한 텍스트, 로고 또는 상호와 같은 텍스트 이미지, 마우스나 키보드를 활용하여 초점을 받았을 때 색이나 명도 대비가 변화하는 콘텐츠, 사용할 수 없음을 표시하기 위하여 명도 대비를 낮춘 회색의 컨트롤이나 입력 서식 등은 이 검사 항목의 적용을 받지 않음

• 장식목적으로 사용한 텍스트나 로고 등에 대한 이미지 텍스트와 비활성화를 나타내기 위해 명도를 낮추어 회색으로 적용하는 컨트롤이나 입력 서식은 명도 대비 검사 대상에서 제외

 

d. 색상테마 등을 이용하여 전체 웹 사이트의 색상정보를 변경하여 준수한 경우 인정

배경음 사용 금지

1. 배경음의 개념

페이지에서 배경으로 제공되는 음성 정보
- 자동으로 재생되는 배경음을 사용하지 않음
- 배경음을 3초 미만으로 사용

2. 자동 재생 금지의 필요성/목적

배경음으로 인해 화면낭독기의 음성이 방해받지 않게 하여 웹 콘텐츠를 인식 가능하도록 한다.

3. 자동 재생 금지의 검사항목 해설

'배경음이 자동으로 재생되지 않도록'하는 것이 가장 좋은 방법이며, 부득이한 경우 3초 미만 이거나 배경음을 제어할 수 있는 수단(멈춤, 일시정지, 음량 조절 등)을 웹 페이지의 첫 부분에 제공하는 것은 지침에서 예외로 규정하고 있다. 그러나 되도록이면 사용하지 않는 것을 권장하고 있다.

4. 자동 재생 금지의 제공 방법

(1) 제공 방법

기준: 배경음을 사용하지 않았거나 3초 이내 또는 바로 정지할 수 있는 배경음 콘텐츠를 사용한 경우 기준을 준수한 것으로 인정한다.

(2) 오류 유형

a. 웹 페이지에서 자동적으로 재생되는 3초 이상의 배경음(동영상, 음성, 음악 등) 콘텐츠를 제공하는 경우

자동 재생 금지 오류 유형1 (출처: 배움나라)

b. 마우스 오버 또는 키보드 초첨을 받아 자동적으로 배경음이 3초 이상 실행되는 경우

자동 재생 금지 오류 유형2 (출처: 배움나라)

(3) 주의사항

a. 3초 미만의 배경음은 예외

b. 자동적으로 재생되는 배경음의 지속시간이 3초 이상, 제어 수단이 페이지의 가장 첫 부분에 제공되는 경우 기준을 준수한 것으로 인정

내용 정리

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

• 그래프의 경우 색이 아닌 패턴 또는 인출선 등을 이용하여 알려줌
• 필수입력 항목을 색으로만 표현하지 않고, 블릿이나 텍스트의 형태를 구분하여 제공함

2. 명확한 지시사항 제공

• '여기를 클릭하세요', '검정색을 클릭하세요' 등 모양, 색, 방향 등으로만 구분지면 안되며, 다양한 감각을 통해 용도나 목적을 이해할 수 있도록 해야 함

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

• 굵은 14px이상 굵은 18px미만의 텍스트 명도 대비 - 3:1
• 보통형태의 18px미만의 텍스트 명도 대비 - 4.5:1
• 보통형태의 18px이상의 텍스트 명도 대비 - 3:1
• 화면 확대가 가능하도록 구현한 콘텐츠의 명도 대비 - 4.5:1

4. 배경음 사용 금지

• 3초 이내 자동으로 재생되는 배경음은 예외
• 3초 이상 재동으로 재생되는 배경음에 대하여 정지 기능을 바로 제공하면 준수한 것으로 인정

5. 콘텐츠 간의 구분

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