[HTML] 웹 콘텐츠 접근성 가이드라인 WCAG 2.1

Seonup·2022년 9월 5일
0

HTML

목록 보기
6/6

웹 콘텐츠 접근성 가이드라인 WCAG이란?

웹 콘텐츠 접근성 가이드라인(이하 WCAG)은 Web Content Accessibility Guidelined의 약자로, 어떠한 장애유형에 영향을 받지 않고 모든 사람이 웹 콘텐츠에 보다 쉽게 접근할 수 있게 만들기 위해 발표된 W3C의 권장 표준이다.

WCAG 2.1

WCAG 2.1은 보다 광범위한 장애 유형을 다루어 신체 장애로만 국한하지 않고 장애의 유형을 넓게 규정하였다. 아래의 WCAG 2.1 장애 유형에서 인지 장애와 학습 장애를 추가하여 2.0 버전을 기준으로 확장한 것을 볼 수 있다.

장애 유형

  • 시각 (Visual)
  • 청각 (Auditory)
  • 지체 (Physical)
  • 음성 (Speech)
  • 인지 (Cognitive): WCAG 2.1 추가 항목
  • 언어 (Language)
  • 학습 (learning): WCAG 2.1 추가 항목
  • 신경 (Neurological)

그렇다면, WCAG 2.1은 어떤 기준으로 장애의 유형을 추가하고 가이드라인을 업데이트 했을까?

하위 버전을 간단하게 살펴보면서 어떠한 기준으로 2.1 버전이 발표되었는지 알아보자.

버전별로 간단하게 알아보기

WCAG는 1999년 버전 1.0의 발표를 시작으로 WCAG 2.0을 거쳐, 현재는 WCAG 2.1의 버전까지 발표되었으며 2.2와 3.0 초안까지 공개되었다.

WCAG 1.0 (1999)

WCAG 1.0은 신체 장애와 사용자 에이전트를 기준으로 접근성을 높이는 방법에 대해 14가지의 가이드라인을 발표했다. 가이드라인은 우선순위에 따라 3가지 준수 레벨로 구분된다.

지침

  1. 청각 및 시각 콘텐츠에 대안을 제공해야 한다.
  2. 색상에만 의존하면 안된다.
  3. 마크업과 스타일시트를 적절하게 사용한다.
  4. 약어나 외래어 등 자연어 사용을 명확히 해야 한다.
  5. table은 페이지 레이아웃이 아닌 표의 용도로 마크업 되어야 한다.
  6. 최신 기술이 지원되지 않어가 꺼져 있는 경우에도 페이지에 엑세스 할 수 있어야 한다.
  7. 시간에 민감한 콘텐츠 변경에 대한 사용자 제어를 보장해야 한다.
  8. 임베디드 사용자 인터페이스의 직접적인 접근성을 보장해야 한다.
  9. 장치 독립성을 위한 설계가 필요하다.
  10. 임시 솔루션을 사용한다.
  11. W3C 기술 및 지침을 사용합니다.
  12. 상황 및 방향 벙보를 제공합니다.
  13. 명확한 탐색 네커니즘을 제공하한다.
  14. 문서는 명확하고 단순해야 합니다.

WCAG 2.0 (2008)

WCAG 2.0은 WCAG 1.0의 지침을 모두 통합하여, 크게 4가지의 지침과 12개의 성공기준으로 분리하였다. 또한 자문 기술을 추가하여 지침을 지키기 위한 성공기준의 보조 장치로 제안된다.

지침 및 성공기준

  1. 인지의 용이성
    • 1.1 큰 활자, 점자, 음성, 기호 또는 간단한 언어와 같이 사람들이 필요로 하는 다른 형식으로 변경할 수 있도록 텍스트가 아닌 콘텐츠에 대한 대체 텍스트를 제공한다.
    • 1.2 시간 기반 미디어에 대한 대안을 제공한다.
    • 1.3 정보나 구조를 잃지 않고 다양한 방식으로 표시할 수 있는 콘텐츠를 만든다
    • 1.4 전경과 배경을 분리하는 등 사용자가 콘텐츠를 보다 쉽게 보고 들을 수 있도록 한다.
  2. 운용의 용이성
    • 2.1 키보드에서 모든 기능을 사용할 수 있도록 한다.
    • 2.2 사용자에게 콘텐츠를 읽고 사용할 수 있는 충분한 시간을 제공한다.
    • 2.3 발작을 일으키는 방식의 콘텐츠를 디자인하지 않아야 한다.
    • 2.4 사용자의 탐색, 콘텐츠 찾기, 위치 결정에 도움이 되는 방법을 제공한다.
  3. 이해의 용이성
    • 3.1 텍스트 내용을 읽고 이해할 수 있도록 만든다.
    • 3.2 웹 페이지가 예측 가능한 방식으로 나타나고 작동하도록 한다.
    • 3.3 사용자가 실수를 피하고 수정하도록 돕는다.
  4. 견고성
    - 4.1 보조 기술을 포함하여 현재 및 미래의 사용자 에이전트와의 호환성을 최대화 한다.

WCAG 2.1 (2018)

WCAG 2.1은 2.0을 확장한 버전으로, 모바일 장치, 저시력, 인지 또는 학습 장애를 가진 사람들의 접근성을 높이는 방법을 추가하였다. 2.0이 발표되던 당시보다 모바일 웹 접유율이 높아지고 웹 자체의 조작이 복잡해진 것 등을 고려하여 2.1 버전으로 업데이트 하였다.

(간략한 지침은 아래 작성해 두었고, 자세한 내용은 다음 포스트에서 다룰 예정이다.)

WCAG 2.1의 구조

각 지침에는 내용과 연결된 문서들이 많다. 이해를 돕기 위해 지침의 내용을 살펴보기 전, 먼저 지침이 어떤 구조로 이뤄져있는지 훑어보고 가자.

  • 원칙: 웹 접근성의 기반을 제공하는 4가지 원칙인 인지의 용이성, 운용의 용이성, 이해의 용이성, 견고성으로 구성됨.
  • 지침
    - 원칙 아래 13가지 지침이 있으며, 다양한 장애가 있는 사용자가 콘텐츠에 더 쉽게 접근할 수 있도록 작성자가 작업해야 하는 기본 목표를 제공함
    • 개발자가 성공 기준을 이해하고 기술을 더 잘 구현할 수 있도록 기준과 전반적인 목표를 제공
  • 성공 기준
    - 각 지침에 대해 테스트 가능한 성공 기준이 제공됨
    • 성공기준은 지침의 충족 수준을 확인하기 위해 A -> AA -> AAA 순으로 높아지는 레벨 구조를 가지고 있음
  • 자문 기술
    - 성공 기준을 보조하여 지침을 구현하는 비규범적 기술
    - 모든 장치에서 기술의 안정성이 검증된 것이 아니기 때문에 지침을 충족시키기에는 부족함

내용 간략하게 알아보기

WCAG 2.1의 내용은 사례를 들어가며 보다 자세하게 살펴볼 예정이기 때문에 이번 포스트에서는 어떤 내용으로 이뤄져 있는지 작성했다. 작성된 구조는 원칙 -> 지침 -> 성공기준 (준수 레벨) 이다.

1. 인식의 용이성

1.1 대체 텍스트

  • 1.1.1 텍스트가 아닌 콘텐츠 (A)

1.2 시간 기반 미디어

  • 1.2.1 오디오 전용 및 비디오 전용(사전 녹음) (A)
  • 1.2.2 캡션(사전 녹음) (A)
  • 1.2.3 오디오 설명 또는 미디어 대안(사전 녹음) (A)
  • 1.2.4 캡션(라이브) (AA)
  • 1.2.5 오디오 설명(사전 녹음) (AA)
  • 1.2.6 수화(사전 녹음) (AAA)
  • 1.2.7 확장 오디오 설명(사전 녹음) (AAA)
  • 1.2.8 미디어 대안(사전 녹음) (AAA)
  • 1.2.9 오디오 전용(라이브) (AAA)

1.3 적응할 수 있는

  • 1.3.1 정보 및 관계 (A)
  • 1.3.2 의미있는 시퀀스 (A)
  • 1.3.3 감각적 특성 (A)
  • 1.3.4 오리엔테이션 (AA)
  • 1.3.5 입력 목적 식별 (AA)
  • 1.3.6 목적 식별 (AAA)

1.4 구별 가능

  • 1.4.1 색상의 사용 (A)
  • 1.4.2 오디오 제어 (A)
  • 1.4.3 대비(최소) (AA)
  • 1.4.4 텍스트 크기 조정 (AA)
  • 1.4.5 텍스트 이미지 (AA)
  • 1.4.6 대비(고급) (AAA)
  • 1.4.7 배경 오디오의 데시벨이 낮거나 없음 (AAA)
  • 1.4.8 시각적 표현 (AAA)
  • 1.4.9 텍스트 이미지(예외 없음) (AAA)
  • 1.4.10 리플로우 (AA)
  • 1.4.11 텍스트가 아닌 대비 (AA)
  • 1.4.12 텍스트 간격 (AA)
  • 1.4.13 호버 또는 포커스에 대한 콘텐츠 (AA)

2. 운용의 용이성

2.1 키보드 접근 가능

  • 2.1.1 키보드 (A)
  • 2.1.2 키보드 함정 방지 (A)
  • 2.1.3 키보드(예외 없음) (AAA)
  • 2.1.4 문자 단축키 (A)

2.2 충분한 시간

  • 2.2.1 시간 제한 조정 가능 (A)
  • 2.2.2 일시정지, 중지, 숨김 (A)
  • 2.2.3 시간제한 없음 (AAA)
  • 2.2.4 작업방해 금지 (AAA)
  • 2.2.5 재인증 (AAA)
  • 2.2.6 시간 종료 (AAA)

2.3 발작 및 신체 반응

  • 2.3.1 번쩍임을 3회 또는 임계값 이하로 설정 (A)
  • 2.3.2 3회 번쩍임 (AAA)
  • 2.3.3 모션 애니메이션 (AAA)

2.4 탐색 가능

  • 2.4.1 블록 건너뛰기 (A)
  • 2.4.2 제목(title)이 있는 페이지 (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 섹션(section) 헤딩 (AAA)

2.5 입력 방식

  • 2.5.1 포인터 제스쳐 (A)
  • 2.5.2 포인터 취소 (A)
  • 2.5.3 네임(Name) 안의 레이블(Label) (A)
  • 2.5.4 모션기반 작동 (A)
  • 2.5.5 포인터 타겟(target)의 크기 (AAA)
  • 2.5.6 동시 입력 메커니즘 (AAA)

3. 이해의 용이성

3.1 가독성

  • 3.1.1 페이지의 언어 (A)
  • 3.1.2 특정 부분의 언어 (AA)
  • 3.1.3 생소한 단어 (AAA)
  • 3.1.4 약어 (AAA)
  • 3.1.5 독해 수준 (AAA)
  • 3.1.6 발음 (AAA)

3.2 예측 가능성

  • 3.2.1 포커스 상태 (A)
  • 3.2.2 입력 상태 (A)
  • 3.2.3 일관된 네비게이션 (AA)
  • 3.2.4 일관된 식별 (AA)
  • 3.2.5 요구에 의한 변경 (AAA)

3.3 입력 지원

  • 3.3.1 오류 식별 (A)
  • 3.3.2 레이블 또는 지시문 (A)
  • 3.3.3 오류 수정 제안 (AA)
  • 3.3.4 오류 예방(법률, 금융, 데이터) (AA)
  • 3.3.5 도움말 (AAA)
  • 3.3.5 오류 예방(공통)

4. 견고성

4.1 호환성

  • 4.1.1 해석 (A)
  • 4.1.2 이름, 역할, 값 (A)
  • 4.1.3 상태 메세지 (AA)

사용된 용어

  • 사용자 에이전트: 브라우저, 미디어 플레이어, 리더 및 웹 콘텐츠를 렌더링하는 기타 애플리케이션
profile
Seonup
박선우
이전 포스트

[HTML] target="_blank"와 noopener, noreferrer의 관계

0개의 댓글