인식, 운용

웹 콘텐츠 접근성 지침(WCAG) - 인식, 운용

1. 인식 (Perceivable)

  • 정보 및 UI 컴포넌트가 인식 가능하도록 제공해야 합니다.

  * 컴포넌트란?
    + 유저가 사용하는 시스템에 대한 조작장치를 이야기 한다. 예를 들어, 사용자가 클릭하는 버튼이나 대화상자(dialog) 등을 말한다.
  * [참고] 컴포넌트(Component) : <https://opentutorials.org/course/473/2512>

1.1 대체 텍스트

  • 1.1.1 텍스트가 아닌 콘텐츠에 대한 적절한 대체 텍스트를 제공해야 한다.

    • 컨트롤, 입력 : 컴포넌트 이름, 폼 입력 필드 이름 등

    • 시간 기반 미디어 (오디오, 비디오) : 자막, 원고, 수화 등

    • 테스트 : 이미지 등 표시 텍스트가 아닌 것

    • 감각 : 시각 예술 작품, 음악 등 (예술품 같은 것에 대한 묘사는 명확하고 간결하게)

    • 보안 문자 : 대체 텍스트를 제공하거나 음성 캡챠(CAPTCHA)를 제공

    • 장식성, 포멧팅, 보이지 않는 : 보조기기가 텍스트로 인식하지 못하도록 처리

- 캡챠(CAPTCHA)란?
- 컴퓨터와 사람을 구분 짓기 위한 완전 자동 튜링 테스트
- 예를 들어 컴퓨터와 사람을 구분 짓기 위해 사이트에 로그인 할 때 자동차나 신호등으로 보이는 그림을 고르라고 하는 경우가 있다.

1.2 시간 기반 미디어

  • 시간에 기반한 미디어의 대체 수단을 제공해야 한다.

    1.2.1 오디오, 비디오

    1.2.2 캡션

    1.2.3 오디오 설명, 미디어 대체물

    1.2.4 라이브 캡션

    1.2.5 오디오 설명

    1.2.6 수화

    1.2.7 확장 오디오 설명

    1.2.8 미디어 대체물

    1.2.9 라이브 오디오

1.3 적응성

  • 정보나 구조를 잃지 않고 다양한 방식(예 : 간단한 레이아웃)으로 표현할 수있는 컨텐츠를 만든다.

    • 1.3.1 정보 및 관계

    • 1.3.2 의미적인 순서

      • 올바른 판독 순서

    • 1.3.3 감각적 특성

      • 모양, 색, 크기, 시각적 위치, 방향 또는 소리와 같은 감각적 특성에만 의존 하지 X

    • 1.3.4 기기 회전

      • 가로/ 세로. 한 방향으로 제한하지 않음 (단, 피아노, 은행 업무 등은 예외)

    • 1.3.5 입력 목적 식별

      • 메타 데이터를 첨부 함으로써 사용자가 입력을 보다 잘 할 수 있도록 돕는다. 이메일 주소, 검색창 같은 입력이 자동 완성 되도로 구성한다.

    • 1.3.6 목적 식별

      • 의미를 가진 UI 컴포넌트, 아이콘 및 영역(regions)의 목적을 사용자에게 이상하게 읽히지 않도록 적절한 대체 텍스트를 제공

1.4 명료성

  • 사용자가 콘텐츠를 보고 들을 수 있도록 명확하게 구분할 수 있어야 한다.

    • 1.4.1 컬러 활용

      • 색상 만으로 정보 전달, 행동을 지시하고, 반응을 유발하고, 시각적 요소를 식별하는 시각적인 용도로 사용하면 안된다.

    • 1.4.2 오디오 컨트롤

    • 1.4.3 대비

      • 텍스트 또는 이미지의 텍스트 아래의 예외사항을 제외하고 명도 대비 차는 최소 4.5:1이 되어야 한다.

        • 큰 텍스트 : 24px 이상 또는 18px Bold 텍스트의 경우 3:1 명도 대비 차까지 허용

        • 중요하지 않은 : 비 활성화된 UI 컴포넌트 텍스트 등 명도 대비 요구 없음

        • 로코타입(Logotypes) : 로고나 브랜드의 텍스트는 최소한의 명도 대비 요구가 없음

    • 1.4.4 텍스트 크기 조정

      • 텍스트는 콘텐츠와 기능의 손실없이 200% 이상 보조기술 없이 조정이 가능해야함

    • 1.4.5 이미지 텍스트 : 질문하고 다시 작성

    • 1.4.6 향상된 대비 : 질문하고 다시 작성

    • 1.4.7 작거나, 배경음악 아님

      • 사전 녹음된 오디오 전용 콘텐츠의 경우 배경음악이 아니다.

    • 1.4.8 시각적 표현

      • 텍스트 블록을 시각적으로 표현하기 위해 다음과 같은 메커니즘을 사용할 수 있다.

        1. 전경색과 배경색은 사용자가 선택할 수 있어야 합니다.

        2. 너비는 80 글자나 글리프 (CJK의 경우 40자)를 넘으면 안됩니다.

        3. 텍스트는 양쪽정렬이 아니어야 합니다. (왼쪽과 오른쪽 여백에 양 정렬 됨)

        4. 행간(단락 사이 간격)은 적어도 글자 높이의 1.5배 이상 되어야 합니다.

        5. 전체화면에서 콘텐츠를 읽거나, 기능을 사용하는데 문제가 없도록, 보조기술 없이 200% 확대 하더라도 가로 방향으로 스크롤이 생기면 안됩니다.

    • 1.4.9 이미지 텍스트: 예외 X

      • 순수 장식용 또는 텍스트의 특정 표현이 전달되는 정보에 필수적인 경우에만 사용

        • 로고 타입 (로고 또는 브랜드 이름의 일부인 텍스트)은 필수적인 것으로 간주

    • 1.4.10 리플로우

      • 콘텐츠는 정보나 기능의 손실없이 양 방향으로 스크롤하지 않도록 제공되어야 한다. (CSS 픽셀 기준)

        예를 들어 웹 사이트를 400% 확대했을 때 가로, 세로 양쪽 방향을 스크롤 바가 생기면 안된다는 말입니다. 스크롤 바는 가로 또는 세로 방향 한 쪽으로만 표시되어야 한다.

    • 1.4.11 비 텍스트 명도대비

      • 다음의 시각적 표현은 인접한 색상 대비 명도대비가 최소 3:1이상 되어야 한다.

      • 이 지침은 1.4.3 대비 (AA) 지침에서 다루는 명도대비 지침을 확장한 것이다.

        • 사용자 인터페이스(UI) 컴포넌트

          UI 컴포넌트 및 상태를 확인하기 위해 요구되는 시각적 정보. 즉, 활성화 된 UI 컴포넌트 (예: 버튼, 인풋 등)

        • 그래픽 객체

          특정 그래픽 표현이 전달되는 정보에 필수적인 경우를 제외하고 콘텐츠를 이해하는데 필요한 그래픽의 일부.

    • 1.4.12 텍스트 간격

      • 이 지침의 목적은 사람들이 텍스트를 수정하여 읽기 쉽도록 하는 것이다.

      • 다음 텍스트 스타일 속성을 지원하는 HTML 마크업 언어를 사용하여 구현된 콘텐츠에서 다음 스타일을 모두 설정하고 다른 스타일 속성을 변경하지 않으면 콘텐츠 또는 기능이 손실되지 않는다.

        • 행간(줄 사이 간격)은 글자 크기(높이)의 1.5배 이상 이어야 합니다.

        • 단락 간 간격은 글자 크기의 2배 이상으로 간격(마진)을 두어야 합니다.

        • 자간(글자 사이 간격)을 글자 크기의 0.12배 이상으로 설정합니다.

        • 어간(단어 사이 간격)은 글자 크기의 0.16배 이상으로 설정합니다.

      • 이 성공 기준을 지원하는 가장 좋은 방법은 반응형 디자인을 사용하고 고정된 높이나 너비를 컨테이너에 사용하지 않는 것이다.

    • 1.4.13 콘텐츠 포커스/ 호버

      • 닫을 수 있는 (Dismissable)

        포인터 호버나 키보드 포커스를 이동하지 않고도 추가 콘텐츠를 닫을 수 있는 메커니즘을 제공해야 한다.

      • 호버 가능한 (Hoverable)

        포인터 호버로 인해 추가 콘텐츠가 화면에 표시된 경우, 추가 콘텐츠 위로 포인터를 이동해도 추가 콘텐츠는 지속적으로 표시되어야 한다.

      • 지속성 있는 (Persistent)

        추가 콘텐츠는 포인터 호버 또는 포커스 트리거를 제거하거나 사용자가 닫고자 하는 경우가 아니라면, 해당 정보는 지속적으로 화면에 표시되어야 합니다.

운용 (Operable)

  • UI 컴포넌트와 내비게이션이 작동하는데 문제가 없어야 한다.

2.1 키보드 접근

  • 키보드로 모든 기능을 사용할 수 있어야 한다.

    • 2.1.1 키보드

    • 2.1.2 키보드 함정 X

      • 키보드 인터페이스를 사용하여 키보드 포커스를 페이지 컴포넌트로 이동할 수 있는 경우 키보드 인터페이스만 사용하여 해당 컴포넌트에서 포커스를 이동할 수 있다.

    • 2.1.3 키보드: 예외 X

      • 콘텐츠의 모든 기능은 개별 키 입력에 대한 특정 타이밍을 요구하지 않고 키보드 인터페이스를 통해 작동 가능

    • 2.1.4 문자 키 단축키

      • 단축키 기능 끄기

      • 단축키 재설정

        • 1개 이상 프린트 할 수 없는 키보드 문자(예: Ctrl, Alt 등)를 사용하도록 단축키를 다시 매핑 할 수 있는 기능을 제공해야 한다.

      • 포커스 상태에서만 활성화

      • 해설

        • 손떨림, 휴대성 또는 인공적인 손을 가진 사람들은 음성 키보드나 키보드 또는 화면 키보드가 있는 다른 포인팅 장치를 사용하기 때문에, 단일 문자 단축키를 제공할 경우 실수로 문자 단축키 눌러 원인도 모른채 혼란에 빠질 수 있습니다.

2.2 충분한 시간 제공

  • 콘텐츠를 읽고 사용할 수 있는 충분한 시간을 제공해야 한다.

  • 2.2.1 시간 조절 (A)

    • 시간 제한 해제

    • 시간 제한 조정

    • 실시간 예외

    • 필수 예외

    • 20시간 예외 : 제한 시간은 20시간을 초과 합니다.

  • 2.2.2 일시정지, 중지, 감추기 (A)

    • 이동, 깜박임, 스크롤링

      (1) 자동으로 시작되고, (2) 5초 이상 지속되며, (3) 다른 콘텐츠와 동시에 표시되는 이동, 깜박임 또는 스크롤 정보의 경우 일시정지, 중지 또는 감추기 기능이 요구된다.

    • 자동 업데이트

      (1) 자동으로 시작하고 (2) 다른 콘텐츠와 병행하여 표시되는 자동 업데이트 정보의 경우 사용자가 일시정지, 중지 또는 감추기 또는 자동 업데이트를 하지 않는 한 업데이트 빈도를 제어 할 수 있는 기능이 요구된다.

  • 2.2.3 No 타이밍 (AAA)

    • 타이밍은 인터랙션이 없는 동기화 미디어와 실시간 이벤트를 제외하고, 콘텐츠에 의해 제공되는 이벤트 또는 액션의 필수적인 부분이 아님

  • 중단

  • 재인증

    • 인증된 세션이 만료 되면, 사용자는 재 인증 후 데이터 손실 없는 행동을 지속할 수 있어야 한다.

  • 타임아웃

    • 사용자가 아무런 행동을 취하지 않고 있을 때, 데이터를 20시간 이상 보존할 수 없는 서비스 공급자는 사용자에게 데이터를 손실할 수 있는 시간 제한에 대해 경고해야 한다.

    • 해설

      • 어떤 사람들은 콘텐츠를 읽고 이해하는데 상당한 시간이 필요합니다. 기억에 없지만 필요한 개인 데이터를 찾아 입력해야 하는 상황도 있을 수 있습니다. 게다가 인지 장애가 있는 사용자는 오랜 시간 동안 집중할 수 없습니다. 때로는 긴 휴식 시간을 필요로 합니다. 이런 경우를 고려해 사용자가 활동을 완료해야 하는 시간을 알려줘야 합니다.

2.3 발작 예방

  • 발작이나 신체적 반응을 일으키는 것으로 알려진 방식으로 콘텐츠를 제작하지 말아야 한다.

    • 2.3.1 발작 요인 (A)

    • 2.3.2 1초에 3회 이상 깜빡임 (AAA)

      • 웹 페이지는 1초 동안 3번 이상 깜박이는 콘텐츠를 포함해서는 안된다.(발작요인이 될 수 있음)

    • 2.3.3 인터랙션 애니메이션 (AAA)

      • 애니메이션이 꼭 필요하지 않을 경우 사용자가 자율적으로 선택할 수 있도록 해야한다.

2.4 탐색 가능

  • 탐색하고, 콘텐츠를 찾고, 어디에 있는지 판단 할 수있는 방법을 제공해야 한다.

    • 2.4.1 블록 우회 (A)

      • 여러 웹 페이지에서 반복되는 콘텐츠 블록을 건너 뛸 수 있는 기능을 제공

      • 예를 들어 홈페이지 상단에 '본문바로가기' 버튼을 제공한다.

    • 2.4.2 페이지 제목 (A)

    • 2.4.3 포커스 순서 (A)

      • 웹 페이지를 순차적으로 탐색 할 수 있고 탐색 순서가 의미 또는 작업에 영향을 주는 경우, 포커스 가능 컴포넌트는 의미와 작동 가능성을 유지하는 순서로 포커스를 받아야 합니다.

    • 2.4.4 링크 목적: 컨스트 내 (A)

    • 2.4.5 다양한 방법 (AA)

      • 웹 페이지가 프로세스의 결과 또는 단계인 경우를 제외하고 웹 페이지 집합 내에서 웹 페이지를 찾을 수 있는 방법은 여러 가지 방법으로 제공 되어야 합니다.

    • 2.4.6 제목과 레이블 (AA)

    • 2.4.7 포커스의 시각적 표시 (AA)

    • 2.4.8 로케이션 (AAA)

      • 웹 페이지에서 사용자 위치에 대한 정보를 이용 가능해야 한다.

    • 2.4.9 링크 목적: 오직 링크만 (AAA)

      • 링크 텍스트만으로 각 링크의 목적을 식별 할 수 있는 방법을 제공해야 한다.

    • 2.4.10 섹션 제목 (AAA)

      • 섹션 제목은 콘텐츠를 구성하는데 사용

2.5 입력 양식

  • 키보드가 아닌 다양한 입력을 통해 기능을 보다 쉽게 조작 할 수 있도록 만들어야 한다.

    • 2.5.1 포인터 제스처 (A)

      • 필수적인 경우를 제외하고는 단 한 번의 터치 만으로 모든 기능을 사용할 수 있어야 한다.

    • 2.5.2 포인터 취소 (A)

      • <down> 이벤트에 함수를 연결하지 않는다 (No Down-Event)

      • 중단 또는 실행 취소할 수 있어야 한다.

      • <up> 이벤트를 통해 취소할 수 있다.

      • 필수(Essential)적인 상황은 예외로 <down> 이벤트를 사용할 수 있다.

      • 해설

        • 이 지침은 실수로 잘못된 위치를 만지거나 클릭 할 수 있는 손 떨림, 운동 장애가 있는 사람들을 돕는다. 실수로 인해 의도하지 않은 동작이 발생했을 때 취소할 수 있는 기능을 제공.

    • 2.5.3 레이블과 접근 가능한 이름 (A)

      • 이름에 시각적으로 표시되는 텍스트가 포함되어야 한다.

    • 2.5.4 동작(모션) 실행 (A)

      • 아래와 같은 경우를 제외하고 우발적인 동작을 방지하기 위해 동작에 대한 응답을 비활성화 할 수 있다.

      • 접근성 지원 인터페이스

      • 필수 상황

      • 해설

        • 제한된 이동성을 가진 사람들은 장치를 정확하게 이동하거나 제스처를 수행하지 못할 수 있습니다. 일부 사용자는 장치를 고정된 위치에 고정시킨채 이동할 수 없다.

    • 2.5.5 실행 영역 (AAA)

      • 포인터 또는 터치에 의한 실행 영역은 아래의 경우를 제외하고는 44×44 CSS 픽셀 이상이어야 합니다.

        • 동등한 기능 존재

        • 인라인

        • 사용자 에이전트 컨트롤

        • 필수 -해설

          • 컨트롤을 정확히 터치 하기 힘든 사람들에게 도움이 되는 지침이다.

    • 2.5.6 동시 입력 메커니즘 (AAA)

      • 웹 콘텐츠는 플랫폼에서 사용할 수 있는 입력 방식을 제한하지 않는다,

      • 사용자는 콘텐츠 작업 중에 다른 입력 장치로 전환해 사용할 수 있다 그렇기에 개발자는 사용자가 터치 또는 마우스만 사용한다고 가정하여 개발 해서는 안된다.

개인 메모

  • 프로세스란?

  • '데이터 손실 없는 행동'

  • 강조 표시 한 것들 다시 보기

Previous웹 콘텐츠 접근성 지침(WCAG)Next이해, 견고

Last updated