Web Content Accessibility Guidelines (웹 콘텐츠 접근성 지침)

시각, 청각, 신체, 언어, 인지, 학습 및 신경 장애 등 광범위한 장애뿐만 아니라 노화로 인해 신체 능력이 변하는 노인을 비롯한 비장애인들의 접근성을 증진시키는 방법을 정의한다.

웹 접근성은 접근 가능한 콘텐츠뿐만 아니라 웹 브라우저 및 다른 사용자 에이전트들에도 영향을 주고 받는다.

0. 지침의 위계구조 (layers)

콘텐츠를 좀 더 접근성있게 만드는 방법에 대한 지침을 제공하기 위해 함께 작동

원칙 (principles)

• 웹 접근성의 기초를 제공하는 4가지 원칙
  • 인식의 용이성 (perceivable)
  • 운용의 용이성 (operable)
  • 이해의 용이성 (understandable)
  • 견고성 (robust)

지침 (guildlines)

• 웹 콘텐츠 저작자들이 노력을 해야할 기본적인 목적들
• 성공기준을 이해하고 기법들을 보다 더 잘 구현할 수 있도록 도와주는 기본적인 틀(framework)과 전반적인 목표들(objectives)

성공기준 (success criteria)

• 요구사항과 준수에 대한 검증이 필요한 곳에서 해당 지침이 사용되기 위한 각 지침별 검증가능한 성공기준
• A (최저), AA, AAA (최고) 세 가지 기준 존재

충분/조언기법 (sufficient and advisory techniques)

• 개별 성공기준이 요구하는 것 이상을 다룸. 지침을 보다 더 잘 구현할 수 있도록 도움

1. 인식의 용이성

정보와 사용자 인터페이스 요소는 사용자가 인식할 수 있는 방법으로 제시되어야 함

1) 대체 텍스트

큰 인쇄물, 점자, 음성, 기호 또는 간단한 언어와 같이 사용자가 필요로 하는 다른 형식으로 변경할 수 있도록 콘텐츠에 대한 대체 텍스트를 제공해야 함

👉 level A

• 사용자가 필요로하는 다른 형식으로 변경할 수 있도록 텍스트가 아닌 콘텐츠들은 대체 텍스트를 제공해야 함
• controls, input: 목적을 설명하는 이름을 가져야 함

<label for="user-email">아이디</label><input type="email" id="user-email" **name="uid"** required placeholder="이메일 주소">

2) 시간 기반 미디어

👉 level A

• 오디오와 비디오 같은 미디어의 경우, 시각 및 청각 정보를 올바른 순서로 제공하는 텍스트 설명과 시간 기반 인터렉션의 결과를 달성하기 위한 수단을 제공해야 함
• 모든 사전 녹음된 오디오 콘텐츠에는 자막을 제공해야 함

👉 level AA

• 실시간 오디오 콘텐츠에 실시간 자막을 제공

👉 level AAA

• 사전 녹음된 오디오 콘텐츠에 수어 통역 제공
• 오디오의 일시정지만으로는 충분하지 않은 경우, 확장형 오디오 설명을 제공

3) 적응 가능

콘텐츠는 정보나 구조의 손실 없이 더 간단한 레이아웃 같은 다른 방법들로 표시될 수 있도록 제작되어야 함

👉 level A

• 전달되는 정보와 구조, 관계는 프로그래밍 방식으로 결정되거나 텍스트로 이용가능해야 함
• 콘텐츠가 표시되는 순서가 의미있는 순서일 경우, 단어와 단락이 콘텐츠의 의미를 변경하지 않는 순서로 제시되어야 함
• 이해를 돕기 위한 지시문은 감각적인 특성에만 의존해서는 안 됨
  • 시각적인 분별을 위한 용도로만 사용하면 안 된다는 뜻

👉 level AA

• 특정 디스플레이 방향이 필수적이지 않는 이상, 콘텐츠는 한 방향으로만 보거나 작동되도록 제한해서는 안 됨
• 입력 목적 필드는 의미를 식별할 수 있도록 결정되어야 함

👉 level AAA

• 사용자 인터페이스 구성요소, 아이콘, 영역의 목적 식별 가능하도록 프로그래밍 방식으로 결정되어야 함

4) 식별 가능

사용자가 콘텐츠를 더 쉽게 보고 들을 수 있도록 제작되어야 함

👉 level A

• 색상은 시각적인 수단으로만 사용되어서는 안 됨
• 3초 이상 재생되는 오디오의 경우, 일시정지 또는 중지할 수 있는 메커니즘을 제공해야 함

👉 level AA

• 텍스트와 텍스트 이미지의 시각적 표현을 위한 명도대비율은 4.5:1 이상 되어야 함
  • 식별가능한 색상을 사용해야 함
• 텍스트는 콘텐츠나 기능 손상, 보조 공학 없이 최대 200%까지 크기 조정이 가능해야 함
  • 자막, 텍스트 이미지 제외
• 사용되는 기술이 시각적 표현을 할 수 있는 경우라도, 텍스트 이미지보다는 텍스트로 전달해야 함
  • 사용자의 요구사항이나 로고의 경우 제외
• 스크롤의 경우, 단방향으로만 가능하도록 제공
• UI 구성요소, 그래픽 객체는 명도대비율이 최소 3:1 이상 되어야 함
• 텍스트 간격
  • 줄 높이 - 글자 크기의 1.5배 이상
  • 문단 간격 - 글자 크기의 2배 이상
  • 글자 간격 - 글자 크기의 0.12배 이상
  • 단어 간격 - 글자 크기의 0.16배 이상
• hover 나 focus 적용 시, 이를 해제할 수 있으면서 마우스 포인터로 가리킬 수 있으면서 지속되어야 함

👉 level AAA

• 텍스트와 텍스트 이미지의 시각적 표현을 위한 명도대비율은 7:1 이상 되어야 함
• 배경음이 없거나 배경음을 끌 수 있어야 함. 배경음이 있다면, 전반적인 음성 콘텐츠보다 최소한 20dB 이상 낮아야 함
• 텍스트 블록의 시각적 표현
  • 사용자가 글자색과 배경색을 선택할 수 있어야 함
  • 가로폭은 80자 이상, 글리프 이하
  • 줄 간격은 문단 내에서 최소 1.5배 이상, 문단 간격은 행 간격보다 최소 1.5배 이상
  • 텍스트 크기를 최대 200%까지 조절할 수 있어야 함
• 텍스트 이미지는 필수적인 경우에만 사용되어야 함

2. 운용의 용이성

사용자 인터페이스 구성요소 및 네비게이션은 운용 가능해야 함

1) 키보드 접근성

키보드로 모든 기능을 사용할 수 있어야 함

👉 level A

• 키보드 인터페이스를 통해 모든 콘텐츠의 기능을 이용할 수 있어야 함
• 다른 표준 종료 방법이 필요한 경우, 사용자에게 포커스를 이동시키는 방법에 대해 안내해야 함
• 키보드 단축키를 문자, 구두점, 숫자, 기호만 이용하도록 구현할 경우, 준수 사항
  • 단축키를 끌 수 있어야 함
  • 단축키를 재설정하는 메커니즘을 제공해야 함
  • 단축키는 해당 구성요소가 포커스를 받았을 때만 활성화되어야 함

👉 level AAA

• 개별 키 입력에 대한 특정 timeout을 요구하지 않는 키보드 인터페이스를 통해 운용 가능해야 함

2) 충분한 시간

사용자가 콘텐츠를 읽고 사용할 수 있도록 충분한 시간을 제공해야 함

👉 level A

• 콘텐츠에 의해 설정된 시간 제한의 경우 조정이 가능해야 함
  • 시간 제한을 해제할 수 있어야 함
  • 제한 시간을 조정할 수 있어야 함
  • 시간 만료 최소 20초 전에 경고를 받고, 제한 시간을 10회 이상 연장할 수 있어야 함
  • 실시간 이벤트의 경우는 예외
  • 시간 제한이 필수적인 경우 예외
  • 제한 시간이 20시간을 초과하는 경우 예외
• 이동, 깜빡임, 스크롤, 자동 업데이트 정보를 일시정지, 중지, 숨김할 수 있어야 함

👉 level AAA

• 시간 제한 없음
• 작업 방해를 연기하거나 차단할 수 있음
• 인증 세션이 종료되었을 때, 재인증을 할 수 있음
• 사용자에게 데이터의 손실을 초래할 수 있는 사용자 비활동 상태에 대해 알려주어야 함

3) 발작 및 신체적 반응

콘텐츠는 발작 또는 신체적 반응을 일으키지 않도록 설계되어야 함

👉 level A

• 초당 3회 이상 번쩍이는 콘텐츠를 포함하지 않거나, 일반 번쩍임과 적색 번쩍임 임계값 이하로 설정해야 함

👉 level AAA

• 초당 3회 이상 번쩍이는 콘텐츠를 포함해서는 안 됨
• 모션 애니메이션은 기능 조작이나 정보 전달을 위해 반드시 필수적인 경우가 아니라면 비활성화할 수 있어야 함

4) 네비게이션 기능

사용자에게 콘텐츠를 찾을 수 있고, 현재 위치를 파악할 수 있는 방법을 제공해야 함

• 반복되는 콘텐츠 블록이 있는 경우, 이를 건너뛸 수 있어야 함
• 주제나 목적을 설명하는 제목을 포함해야 함
• 웹 페이지를 순차적으로 탐색할 수 있을 때, 포커스할 수 있는 요소들은 의미와 운용가능성이 유지되는 순서로 포커스를 받아야 함
• 링크의 목적은 링크 텍스트만으로도 식별 가능하거나 링크 맥락과 함께 식별 가능해야 함

👉 level AA

• 특정 웹 페이지를 찾을 수 있는 방법을 한 가지 이상 제공해야 함
• 헤딩과 레이블에는 주제 또는 목적을 기술해야 함
• 키보드로 조작할 수 있는 사용자 인터페이스는 키보드 포커스가 표시되는 작동 모드를 제공해야 함

👉 level AAA

• 웹 사이트가 웹 페이지 세트로 구성되어 있는 경우, 사용자의 위치 정보를 제공해야 함
• 링크 텍스트만으로도 각 링크의 목적을 식별 가능하게 해야 함
• 섹션 헤딩을 사용하여 조직화해야 함

5) 입력 방식

사용자가 키보드 이외의 다양한 입력 장치를 통해 기능들을 보다 쉽게 조작할 수 있도록 해야 함

👉 level A

• 멀티 포인트 또는 경로 기반 제스처로 작동되는 모든 기능은 경로 기반 제스처 없이 단일 포인터로 작동 가능해야 함
• 포인터의 취소
  • 다운 이벤트 상태에서는 어떠한 기능도 실행되어서는 안 됨
  • 이벤트 실행 전에 기능을 중지하거나, 실행 후 기능을 취소할 수 있는 메커니즘을 제공해야 함
  • 다운 이벤트의 결과를 되돌릴 수 있어야 함
  • 다운 이벤트에서 기능을 완료하는 것이 필수적
• 텍스트 또는 텍스트 이미지가 포함된 레이블을 가지고 있는 UI 구성요소의 경우, **name** 은 시각적으로 표시되는 텍스트를 포함해야 함
• 장치나 사용자의 모션으로 작동될 수 있는 기능은 UI 구성요소로 작동할 수 있어야 함. 모션에 대한 반응은 우발적인 작동을 방지할 수 있도록 비활성화될 수 있어야 함

👉 level AAA

• 포인터 입력용 타겟의 크기는 최소 44X44 px이상이어야 함
• 웹 콘텐츠는 플랫폼 상에서 이용가능한 입력 방식의 사용을 제한해서는 안 됨

3. 이해의 용이성

사용자 인터페이스의 정보와 운용은 이해가능해야 함

1) 가독성

텍스트 콘텐츠는 읽을 수 있고 이해할 수 있어야 함

👉 level A

• 각 웹 페이지는 언어는 프로그래밍 방식으로 결정될 수 있어야 함

👉 level AA

• 특정 절이나 문구의 언어는 프로그래밍 방식으로 결정될 수 있어야 함

👉 level AAA

• 관용어와 전문용어 같은 단어나 문구의 구체적인 정의를 인식할 수 있어야 함
• 약어의 본딧말이나 의미를 인식할 수 있어야 함
• 텍스트의 독해에 중학생 수준 이상의 독해능력이 요구되는 경우, 보충 콘텐츠나 상응하는 버전을 제공해야 함
• 발음을 모르면 문맥상 의미가 명확하지 않은 용어에 대해서는, 구체적인 발음을 인식할 수 있어야 함

2) 예측 가능성

웹 페이지는 예측 가능한 방식으로 제시되고 작동해야 함

👉 level A

• UI 구성요소가 포커스를 받은 경우, 맥락의 변경을 초래해서는 안 됨
• 자동으로 맥락의 변경을 초래해서는 안 됨

👉 level AA

• 네비게이션은 사용자가 변경하지 않는 한, 반복될 때마다 동일한 순서를 유지해야 함
• 동일한 기능을 지닌 구성 요소들은 일관되게 식별되어야 함

👉 level AAA

• 맥락의 변경은 사용자의 요청에 의해서만 변경되어야 함

3) 입력 지원

사용자가 실수를 회피하거나 수정할 수 있도록 지원해야 함

👉 level A

• 입력 오류가 자동으로 감지되면, 사용자에게 오류 항목과 설명을 텍스트로 보여줘야 함
• 입력이 필요한 부분은 레이블 또는 지시문을 제공해야 함

👉 level AA

• 사용자에 대한 법률, 금융, 데이터 관련 이벤트 발생 시, 제출 내역을 되돌리거나, 입력 오류를 점검하고 수정할 수 있는 기회를 제공하거나, 제출 전 확인할 수 있는 기회를 제공해야 함

👉 level AAA

• 맥락에 적합한 도움말이 제공되어야 함
• 사용자가 정보를 제출해야 하는 경우, 제출 내역을 되돌리거나, 입력 오류를 점검하고 수정할 수 있는 기회를 제공하거나, 제출 전 확인할 수 있는 기회를 제공해야 함

4. 견고성

콘텐츠는 보조공학을 포함한 다양한 사용자 에이전트가 해석할 수 있을 정도로 견고해야 함

1) 호환성

콘텐츠는 보조공학을 포함한 다양한 사용자 에이전트가 해석할 수 있을 정도로 견고해야 함

👉 level A

• 파싱 - 마크업 언어를 사용하여 구현된 콘텐츠의 경우, 구성요소는 완전한 시작 태그와 종료 태그를 갖추어야 하고, 사양에 따라 중첩되며, 요소는 중복 속성을 포함해서는 안 됨
• 모든 UI 구성요소의 경우, 이름과 역할은 프로그래밍 방식으로 결정되어야 함. 상태, 속성 및 값 또한 사용자에 의해 설정될 수 있어야 함

👉 level AA

• 상태 메시지는 포커스를 받지 않고 보조공학을 통해 사용자에게 제시될 수 있도록 역할이나 속성을 통해 프로그래밍 방식으로 결정될 수 있어야 함