웹 콘텐츠 접근성 인식의 용이성 - by. UXKM

요약 설명

kwcag 2.2 원칙을 구현하기 위해 14개의 지침을 따라야 하고, 각 지침의 준수 여부를 확인하기 위해 33개의 검사 항목을 마련해야 합니다.
검사 항목은 구체적인 테스트가 가능한 기준을 제공하여 웹사이트가 원칙 및 지침을 준수하고 있는지 확인하는 데 사용됩니다.
지능정보화기본법 시행규칙 일부개정령(안) 입법예고에 따라 ‘24.9.1부터 심사기준이 변경되며 이에따라 kwcag 2.2 기준으로 체크리스트를 제공합니다.

적절한 대체 텍스트 제공

요약 설명

텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 합니다.
시각 장애인 사용자가 스크린 리더를 통해 이미지의 내용을 이해할 수 있도록 모든 이미지에는 대체 텍스트를 제공하여야 합니다.

WCAG 2.2 Guidelines : 1.1 Text Alternatives

예시 이미지

마이크 앞에서 노래를 부르는 아이

예시 코드

검수 방법

  • 이미지가 적절한 대체 텍스트를 포함하고 있는가?
  • 스크린 리더로 테스트하여 텍스트가 올바르게 읽히는가?

자막 제공

요약 설명

멀티미디어 콘텐츠에는 자막, 대본 또는 수어를 제공해야 합니다.
동영상 및 오디오 콘텐츠에는 자막, 대체 텍스트, 오디오 설명, 수어 등을 제공해야 합니다.

WCAG 2.2 Guidelines : 1.2 Time-based Media

예시 비디오

예시 코드 1

캡션이 있는 비디오.

예시 코드 2

캡션을 포함 track 요소가 연결되어 있는 비디오.

검수 방법

  • 비디오 플레이어에서 자막이 정상적으로 표시되는가?
  • 오디오 설명이 포함된 경우 자막, 대본 또는 수어를 제공하는가?

표의 구성

요약 설명

표는 이해하기 쉽게 구성해야 합니다.
표는 데이터를 체계적으로 정리하고, 쉽게 이해할 수 있도록 구성해야 합니다.

W3C Accessible Tables

잘못된 예시

caption 미제공, scope속성 미제공, aria-* 속성 미제공

올바른 예시

caption제공, scope속성 제공, aria-* 속성 연결

검수 방법

  • 제목이 표의 내용을 잘 설명하고 있는지 확인하였는가?
  • 표의 헤더 셀과 테이터 셀의 관계(scope 속성) 정의가 되어있는가?
  • 캡션과 ARIA 속성이 적절하게 사용되었는지 확인하였는가?

콘텐츠의 선형구조

요약 설명

콘텐츠는 논리적인 순서로 제공해야 합니다.
모든 사용자가 콘텐츠를 쉽게 탐색하고 이해할 수 있어야 하며, 논리적인 순서는 시각적으로나 코드 구조적으로나 일관되어야 합니다.

WCAG 2.2 Guidelines : WCAG 2.2 - 1.3.2 Meaningful Sequence

잘못된 예시

<h1> 요소가 제목을 나타내기보다는 섹션 1과 섹션 2의 제목 사이에 위치해 있어 문서의 구조가 잘못되었습니다.

올바른 예시

콘텐츠가 논리적인 순서로 제공되어 있습니다.

검수 방법

  • 논리적인 순서로 배치되었는지 확인하였는가?
  • 스크린 리더(센스리더, JAWS, NVDA 등) 테스트를 통하여 확인하였는가?

명확한 지시사항 제공

요약 설명

지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 합니다.
웹 콘텐츠나 사용자 인터페이스를 설계할 때, 지시사항이나 안내는 특정 감각적 특성(모양, 크기, 위치, 방향, 색, 소리 등)에 의존하지 않고 명확히 전달되어야 합니다.
즉, 색상에만 의존하여 정보를 전달하는 것이 아니라 텍스트나 다른 시각적 단서도 함께 제공해야 합니다.

WCAG 2.2 Guidelines : WCAG 2.2 - 1.3.3 Sensory Characteristics

잘못된 예시

버튼에 색상만으로 기능을 설명하고 있어, 색맹 사용자가 버튼의 기능을 인식하기 어렵습니다.

올바른 예시

버튼에 대한 텍스트 설명을 제공하여 색상에 의존하지 않고 버튼의 기능을 명확히 전달하고 있습니다.

검수 방법

  • 지시 사항이 색상, 위치, 모양 등에 의존하지 않고 텍스트로 명확하게 제공되는지 확인하였는가?
  • 지시 사항이 색상이나 소리 이외에도 텍스트로 제공되었는지 확인하였는가?
  • 지시 사항이 일관되게 사용되고 있는지, 모호한 부분이 없는지 검토하였는가?
  • Axe, WAVE 등의 접근성 검사 도구를 사용하여 지시 사항의 명확성을 점검하였는가?
  • 다양한 사용자(시각, 청각, 인지 장애를 가진 사용자 포함)와 상황에서 지시 사항이 명확하게 이해되는지 테스트하였는가?

색에 무관한 콘텐츠 인식

요약 설명

콘텐츠는 색에 관계없이 인식될 수 있어야 합니다.
색상에 의존하는 정보 전달을 피해야 하며, 색상만으로는 정보를 전달하지 않도록 합니다.

WCAG 2.2 Guidelines : 1.4.1 Use of Color

잘못된 예시

색상만으로 중요한 정보를 전달합니다.

이 문장에서 빨간색 텍스트는 중요한 정보입니다.

올바른 예시

색상 외에 굵은 글씨체와 밑줄 사용하여 중요한 정보를 전달합니다.

이 문장에서 중요한 정보가 포함되어 있습니다.

검수 방법

  • 색상만으로 정보를 전달하지 않았는가?
  • 흑백 모드나 명도 대비를 낮춘 상태에서 정보를 인식할 수 있는지 확인하였는가?
  • 접근성 검사 도구(예: Axe, WAVE)를 사용하여 색 정보 사용 문제를 자동으로 검출하였는가?

자동 재생 금지

요약 설명

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

WCAG 2.2 Guidelines : 2.2.2 Pause, Stop, Hide

예시 코드(자동 재생 금지)

검수 방법

  • 페이지에 포함된 모든 오디오 및 비디오 요소를 확인하였는가?
  • 페이지가 로드될 때 오디오나 비디오가 자동으로 재생되지 않는지 확인하였는가?
  • 코드를 검토하여 autoplay 속성이 ‘false’로 설정, 제거되었는가?

텍스트 콘텐츠의 명도 대비

요약 설명

텍스트 콘텐츠와 배경 간의 명도대비는 4.5 대 1 이상이어야 합니다.
페이지에서 보이는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 충분한 대비를 제공하여, 저시력장애인, 색각장애인, 고령자 등도 콘텐츠를 인식할 수 있도록 제공해야 합니다.
다만, 로고, 장식목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예외로 합니다.

WCAG 2.2 Guidelines : 1.4.3 Contrast (Minimum)

잘못된 예시

명도 대비가 충분하지 않습니다.

명도 대비가 충분하지 않습니다.

올바른 예시

명도 대비가 충분합니다.

명도 대비가 충분합니다.

검수 방법

  • 콘텐츠의 명도 대비

    웹 페이지가 제공하는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 명도 대비는 4.5:1 이상이어야 한다. 준수하였는가?

  • 폰트 크기에 따른 명도 대비

    텍스트 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14pt 이상의 굵은 폰트를 사용하는 경우, 명도 대비를 3:1까지 낮출 수 있다. 준수하였는가?

  • 화면 확대가 가능한 콘텐츠

    화면 확대가 가능하도록 구현한 텍스트 콘텐츠(텍스트 및 텍스트 이미지)의 명도 대비는 3:1까지 낮출 수 있다. 준수하였는가?

콘텐츠 간의 구분

요약 설명

이웃한 콘텐츠는 구별될 수 있어야 합니다.
웹 페이지 내에서 서로 인접한 콘텐츠 블록들이 명확하게 구분되어 사용자가 쉽게 이해하고, 탐색하며, 상호작용할 수 있어야 합니다.

WCAG 2.2 Guidelines : 1.4.8 Visual Presentation

잘못된 예시

이웃한 콘텐츠가 구별되지 않습니다.

올바른 예시

충분한 간격과 각 콘텐츠에 테두리가 있어 이웃한 콘텐츠가 명확히 구분됩니다.

검수 방법

  • 시각적 구분 확인

    콘텐츠 간에 충분한 여백, 구분선, 또는 배경색이 사용되어 이웃한 콘텐츠가 명확히 구별되는지 확인하였는가?

  • 콘텐츠의 가독성 확인

    텍스트와 배경의 대비가 충분하여 가독성이 높은지 확인였는가?

웹 접근성 요약 보고서 예시

아래 표는 웹 접근성 요약 보고서 예시로, 체크박스의 체크 여부가 저장되지 않습니다.

  • 지침(14개)

  • 검사항목(33개)

    준수 여부

  • 5.1. 대체 텍스트

  • 5.1.1. (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

  • 5.2. 멀티미디어 대체수단

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

  • 5.3. 적응성

  • 5.3.1. (표의 구성) 표는 이해하기 쉽게 구성해야 한다.

    5.3.2. (콘텐츠의 선형구조) 콘텐츠는 논리적인 순서로 제공해야 한다.

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

  • 5.4. 명료성

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

    5.4.2. (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.

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

    5.4.4. (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

  • 6.1. 입력장치 접근성

  • 6.1.1. (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

    6.1.2. (초점 이동과 표시) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

    6.1.3. (조작 가능) 사용자 입력 및 콘트롤은 조작 가능하도록 제공되어야 한다.

    6.1.4. (문자 단축키) 문자 단축키는 오동작으로 인한 오류를 방지하여야 한다.

  • 6.2. 충분한 시간 제공

  • 6.2.1. (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

    6.2.2. (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

  • 6.3. 광과민성 발작 예방

  • 6.3.1. (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

  • 6.4 쉬운 내비게이션

  • 6.4.1. (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

    6.4.2. (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

    6.4.3. (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

    6.4.4. (고정된 참조 위치 정보) 전자출판문서 형식의 웹 페이지는 각 페이지로 이동할 수 있는 기능이 있어야 하고, 서식이나 플랫폼에 상관없이 참조 위치 정보를 일관되게 제공ㆍ유지해야 한다.

  • 6.5. 입력 방식

  • 6.5.1. (단일 포인터 입력 지원) 다중 포인터 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 한다.

    6.5.2. (포인터 입력 취소) 단일 포인터 입력으로 실행되는 기능은 취소할 수 있어야 한다.

    6.5.3. (레이블과 네임) 텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 네임에 시각적으로 표시되는 해당 텍스트를 포함해야 한다.

    6.5.4. (동작기반 작동) 동작기반으로 작동하는 기능은 사용자 인터페이스 구성요소로 조작할 수 있고, 동작기반 기능을 비활성화할 수 있어야 한다.

  • 7.1. 가독성

  • 7.1.1. (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.

  • 7.2. 예측 가능성

  • 7.2.1. (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

    7.2.2. (찾기 쉬운 도움 정보) 도움 정보가 제공되는 경우, 각 페이지에서 동일한 상대적인 순서로 접근할 수 있어야 한다.

  • 7.3. 입력 도움

  • 7.3.1. (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

    7.3.2. (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.

    7.3.3. (접근 가능한 인증) 인증 과정은 인지 기능 테스트에만 의존해서는 안 된다.

    7.3.4. (반복 입력 정보) 반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 한다.

  • 8.1. 문법 준수

  • 8.1.1. (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

  • 8.2. 웹 애플리케이션 접근성

  • 8.2.1. (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.