a11y

웹 콘텐츠 접근성

인식의 용이성 (Perceivable)

인식의 용이성 (Perceivable) 은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미한다. KWCAG 2.1 인식의 용이성은 대체 텍스트, 멀티미디어 대체 수단, 명료성의 3 가지 지침으로 구성되어 있다.
KWCAG 2.2 인식의 용이성은 대체 텍스트, 멀티미디어 대체 수단, 적응성, 명료성의 4가지 지침으로 구성되어 있다.

5.1. 대체 텍스트

이미지 등 텍스트 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 동등하게 인식할 수 있도록 적절한 대체 텍스트를 제공해야 한다. 또한 대체 텍스트는 간단명료하게 제공해야 한다.
WCAG 2.1 부분 참조.
1.1 Text Alternatives (Level A)

5.1.1. 적절한 대체 텍스트 제공

텍스트가 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
WCAG 2.1 부분 참조.
1.1.1 Non-text Content (Level A)

대체 텍스트를 제공할 경우

  1. 구체적인 정보를 제공해야 하는 경우
    • 이미지 링크, 이미지 버튼 등은 용도가 매우 명확하므로 이미지 링크나 이미지 버튼의 핵심 기능에 대한 설명을 간단한 대체 텍스트로 제공해야 한다.
  2. 의미 있는 배경 이미지
    • 배경 이미지의 의미가 사용자에게 전달되어야 하는 콘텐츠는 그 의미가 보조 기술로 전달되도록 대체 텍스트를 제공해야 한다.
  3. 충분한 정보가 필요한 경우
    • 데이터 차트와 같이 내용이 복잡한 콘텐츠는 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체 텍스트를 제공해야 한다.

대체 텍스트를 제공하지 않거나 제한적으로 제공할 경우

  1. 대체 콘텐츠의 경우
    • 대체 콘텐츠에는 대체 텍스트를 반드시 제공할 필요는 없다. 예를 들어, 텍스트와 함께 동등한 내용의 수화 동영상을 제공하는 경우, 수화 동영상에는 대체 텍스트를 제공할 필요가 없다.
  2. 콘텐츠의 내용을 설명하는 대체 텍스트를 제공할 수 없는 경우
    • 생방송 콘텐츠와 같이 그 내용이 지속적으로 변화하여 설명하기 어려운 경우, 해당 콘텐츠에 대한 간략한 용도를 알려주는 대체 텍스트를 제공하는 것으로 충분하다
    • 또한 색맹검사, 청각검사, 시력검사, 받아쓰기 등과 같은 검사 또는 시험의 경우에도 콘텐츠의 간략한 용도를 알려주는 대체 텍스트만으로 충분하다.
  3. 특정 감각으로만 제공되는 콘텐츠인 경우
    • 플루트 독주나 시각적 예술 작품 등의 경우, 해당 콘텐츠에 대한 간략한 용도를 알려주는 대체 텍스트만으로 충분하다.
  4. 불필요한 설명을 제공하는 경우
    • 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우, 보조 기술을 통해 해당 설명을 제공받을 때 오히려 혼란을 일으킬 가능성이 있으므로 대체 텍스트로 공백 문자를 제공해야 한다.
  5. 동일한 정보를 중복해서 제공하는 경우
    • 보조 기술로 동일한 정보가 반복해서 전달되지 않도록 구현하는 것이 바람직하다.

기대 효과

5.2. 멀티미디어 대체 수단

멀티미디어 콘텐츠를 장애인도 비장애인과 동등하게 인식할 수 있도록 제작하기 위해서는 자막, 대본 또는 수화를 제공해야 한다. 여기서 가장 중요한 요소는 멀티미디어 콘텐츠와 동등한 내용을 제공하는 것이다. 가장 바람직한 방법은 폐쇄 자막을 오디오와 동기화시켜 제공하는 것이다. 대사 없이 영상만 제공하는 경우에는 화면 해설(텍스트, 오디오, 대본)을 제공한다. 음성만 제공하는 경우에도 자막, 대본 또는 수화를 제공해야 한다. 자막, 대본 및 수화는 멀티미디어 콘텐츠에 포함된 음성의 문맥과 동등하여야 한다.
WCAG 2.1 부분 참조.
1.2 Time-based Media

5.2.1. 자막 제공

멀티미디어 콘텐츠에는 자막, 대본 또는 수어를 제공해야 한다.
WCAG 2.1 부분 참조.
1.2.1 Audio-only and Video-only (Prerecorded) (Level A)
1.2.2 Captions (Prerecorded) (Level A)
1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)

다음 중 한 가지 이상의 대체 수단을 제공해야 한다.

  1. 자막 제공
    • 멀티미디어 콘텐츠를 재생시킬 때마다 자동적으로 자막을 화면에 표시할 수 있는 멀티미디어 콘텐츠는 이 검사 항목을 만족하는 것으로 간주할 수 있다. 자막은 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등하여야 한다. 필요에 따라 자막을 여러 벌 제공하고 사용자가 사용하는 자막을 지정할 수 있다.
  2. 대본 제공
    • 자막과는 달리 멀티미디어가 재생되는 과정에서 시나리오를 제공하는 경우도 이 검사 항목을 만족하는 것으로 간주한다. 대본은 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등하여야 한다. 필요에 따라 대본을 여러 벌 제공하고 사용자가 사용하는 대본을 선택할 수 있다.
  3. 수화 제공
    • 비디오 콘텐츠에 수화를 중첩하여 녹화한 콘텐츠도 이 검사 항목을 만족하는 것으로 간주한다. 수화는 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등하여야 한다.

기대 효과

5.3. 명료성

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

콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
콘텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자, 흑백 디스플레이 사용자, 흑백 인쇄물을 보는 사용자 및 고대비 모드 사용자가 인식할 수 있도록 제공해야 한다.
WCAG 2.1 부분 참조.
1.3.1 Info and relationships (Level A)
1.4.1 Use of Color (Level A)

고려 사항

  1. 색에 의한 정보 표현 방지
    • 차트나 그래프 등을 고대비 모드로 화면에 표시하면 모든 색이 단색(회색조)으로 표시되어 사용자가 색을 구분하지 못하는 경우가 발생한다. 따라서 사용자가 경조 모드에서도 콘텐츠를 인식할 수 있도록 색을 이용하여 정보를 제공하지 않아야 한다. 즉, 색은 시각적인 강조를 위해서만 사용해야 한다.
  2. 무늬를 이용한 정보 제공
    • 서로 다른 정보를 무늬로 구분하여 표시하면 경조 모드 사용자, 단색 디스플레이 사용자, 흑백 인쇄물의 사용자도 충분히 정보를 구분할 수 있다. 무늬와 색을 동시에 이용한 콘텐츠는 색각 장애가 있는 사용자도 접근이 가능하다.

기대 효과

5.3.2. 명확한 지시 사항 제공

지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
특정 요소를 가리키거나 지시 사항을 전달하는 콘텐츠에 한정해 적용하는 것으로, 콘텐츠의 사용에 필요한 지시 사항을 시각이나 청각 등과 같은 특정한 단일 감각에만 의존하는 방법으로 제공해서는 안 된다는 것이다. 즉, 여러 가지 다른 감각을 통해서도 지시 사항을 인식하는 데 문제가 없도록 콘텐츠를 제공해야 한다.
텍스트 콘텐츠(대체 텍스트 포함)는 보조 기술을 통해 다른 감각으로의 변환이 가능하기 때문에 텍스트 지시 사항에는 추가적인 음성 콘텐츠를 제공할 필요는 없다.
WCAG 2.1 부분 참조.
1.3.3 Sensory Characteristics (Level A)

고려 사항

  1. 색, 크기, 모양 또는 위치와 같은 정보에 대한 인식
    • 웹 콘텐츠는 콘텐츠에 접근하는 사용자들이 색, 크기, 모양 또는 위치에 관한 정보를 인식하지 못하더라도 원하는 콘텐츠에 접근할 수 있도록 제작되어야 한다.
      예) 특정 요소를 ‘동그란 버튼을 누르시오’ 또는 ‘오른쪽 버튼을 누르시오’라고 가리킬 때, 그 대상이 되는 버튼이 ‘동그란 버튼’ 또는 ‘오른쪽 버튼’이라는 대체 텍스트를 포함하고 있지 않을 경우 시각 장애를 지닌 사용자는 어떤 요소를 지칭하는지 알 수 없다. 따라서 이러한 경우, 가리키고자 하는 요소의 실제 명칭이나 그 요소가 포함하고 있는 대체 텍스트를 사용해 지칭하거나, 불가피하게 색, 크기, 모양, 위치와 같은 정보를 사용해 특정 요소를 가리킬 때는 이를 보완할 수 있는 다른 감각을 이용하는 정보를 제공해야 한다.
  2. 음성이나 음향 정보의 인식
    • 사용자에게 음성이나 음향을 사용해 지시 사항을 전달하는 경우 사용자가 소리를 들을 수 없더라도 전달하고자 하는 지시 사항을 인식할 수 있어야 한다.
      예) 온라인 시험 진행 중 사용자에게 비프 음으로 정답인지 오답인지를 사용자에게 알려주면, 청각 장애 사용자나 스피커가 설치되어 있지 않은 환경에 있는 사용자는 정답과 오답 여부를 확인할 수 없다. 이 경우에 비프 음과 함께 정답과 오답 여부를 시각적으로 확인할 수 있는 수단을 제공하면 더 많은 사용자가 지시 사항을 인지할 수 있게 된다.

기대 효과

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

텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
웹 페이지에서 보이는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 충분한 대비를 제공하여, 저시력 장애인, 색각 장애인, 노인 등도 콘텐츠를 인식할 수 있도록 제공해야 한다. 다만, 로고, 장식 목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예외로 한다.(7.2.1. 사용자 요구에 따른 실행 참조)
WCAG 2.1 부분 참조.
1.4.3 Contrast (Minimum) (Level AA)

고려 사항

  1. 콘텐츠의 명도 대비
    • 웹 페이지가 제공하는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
  2. 폰트 크기에 따른 명도 대비
    • 텍스트 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt(24px) 이상 또는 14pt(19px) 이상의 굵은 폰트를 사용하는 경우에는 명도 대비를 3대 1까지 낮출 수 있다.
  3. 화면 확대가 가능한 콘텐츠
    • 화면 확대가 가능하도록 구현한 텍스트 콘텐츠(텍스트 및 텍스트 이미지)의 명도 대비는 3 대 1까지 낮출 수 있다.

5.3.4. 자동 재생 금지

자동으로 소리가 재생되지 않아야 한다.
웹 페이지에서 자동으로 소리(동영상, 오디오, 음성, 배경 음악 등 콘텐츠가 제공하는 모든 소리)가 재생됨으로 인해 화면 낭독 프로그램 사용자가 콘텐츠를 인식하고 사용하는데 방해 받지 않아야 한다. 단 3 초 미만의 소리는 허용한다. 3 초 이상 재생되는 소리는 제어할 수 있는 수단(멈춤, 일시정지, 음량 조절 등)을 함께 제공해야 한다.
참고로 플랫폼은 콘텐츠가 제공하는 배경음의 음량을 조절하더라도 화면 낭독 프로그램의 음량에는 영향을 주지 않아야 한다.
WCAG 2.1 부분 참조.
1.4.2 Audio Control (Level A)

고려 사항

  1. 자동 재생음을 허용하는 경우
    • 자동으로 재생되는 소리는 3 초 내에 멈추거나, 지정된 키(예 : esc 키)를 누르면 재생을 멈추도록 구현한다.
  2. 사용자 요구에 의한 재생
    • 콘텐츠에 포함된 멀티미디어 파일은 정지 상태로 제공하며 사용자가 요구할 경우에만 재생할 수 있도록 제어판(멈춤, 일시 정지, 음량 조절 등)을 제공한다.

기대 효과

5.3.5. 콘텐츠 간의 구분

이웃한 콘텐츠는 구별될 수 있어야 한다.
웹 페이지를 구성하는 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 한다.
WCAG 2.1 부분 참조.
1.4.8 Visual Presentation (Level AAA)

이웃한 콘텐츠를 시각적으로 구분하기 위한 예

  1. 테두리를 이용하여 구분함.
  2. 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분함.
  3. 서로 다른 무늬를 이용하여 구분함.
  4. 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분함.
  5. 줄 간격 및 글자 간격을 조절하여 구분함.
  6. 기타 콘텐츠를 시각적으로 구분할 수 있는 방법 등.

기대 효과

참조