웹 콘텐츠 접근성 - by. UXKM

웹 페이지의 경우

1. Level A
   • 예시 1: 이미지 대체 텍스트

     모든 웹 페이지 이미지는 alt 텍스트를 포함하여야 합니다. 예를 들어, "회사 로고"라는 이미지는 "회사 로고"라는 대체 텍스트를 갖춰야 합니다.

   • 예시 2: 링크 설명

     링크 텍스트는 명확하고 직관적이어야 합니다. 예를 들어, "자세한 정보 보기" 대신에 "접근성 원칙 자세히 보기"와 같이 구체적인 설명을 제공해야 합니다.

2. Level AA
   • 예시 1: 색상 대비

     텍스트와 배경 사이의 색상 대비는 최소한 4.5:1 이상을 충족해야 합니다. 예를 들어, 흰색 배경에 회색 텍스트는 적절한 대비를 유지해야 합니다.

   • 예시 2: 키보드 접근성

     모든 기능은 키보드로 접근 가능해야 합니다. 예를 들어, 모든 웹 페이지의 콘텐츠를 키보드 만으로 탐색이 가능해야 하고, 드롭다운 메뉴는 키보드 탐색 시 스페이스나 엔터 키를 사용하여 열 수 있어야 합니다.

3. Level AAA
   • 예시 1: 동영상 자막

     동영상에는 오디오 대화의 자막이 제공되어야 합니다. 자막은 음성 내용을 정확하게 반영하고 시각적으로 명확하게 표시되어야 합니다.

   • 예시 2: 명료성과 이해도

     복잡한 용어나 문장보다는 간단하고 명확한 언어를 사용해야 합니다. 예를 들어, 기술적인 용어 대신 일반 사용자도 이해할 수 있는 용어를 사용해야 합니다.

오디오와 비디오 같은 미디어의 경우

1. Level A
   • 오디오

     오디오 콘텐츠에는 모든 사용자가 이해할 수 있도록 텍스트로 된 대체 자료가 포함되어야 합니다.

   • 비디오

     비디오 콘텐츠는 자막을 포함해야 합니다. 자막은 비디오의 오디오 내용을 정확히 반영하고, 사용자가 콘텐츠를 시청하는 동안 시각적으로 접근할 수 있어야 합니다.

2. Level AA
   • 오디오

     오디오 콘텐츠에는 명확하고 이해하기 쉬운 언어를 사용해야 합니다. 복잡한 용어나 문장보다는 일반 사용자도 이해할 수 있는 단순한 언어를 사용해야 합니다.

   • 비디오

     비디오 콘텐츠의 자막은 오디오와 시각적 콘텐츠 사이의 정확한 타이밍과 일치해야 합니다. 또한, 사용자가 자막의 크기나 색상을 조정할 수 있도록 해야 합니다.

3. Level AAA
   • 오디오

     오디오 콘텐츠에는 추가적인 언어 옵션이 제공되어야 합니다. 다국적 환경을 고려하여 여러 언어의 자막을 제공하는 것이 이 예시에 해당합니다.

   • 비디오

     비디오 콘텐츠의 자막은 사용자가 자막을 간단히 숨길 수 있도록 하는 기능을 제공해야 합니다. 사용자가 필요할 때 언제든지 자막을 다시 켤 수 있도록 해야 합니다.

국제 디지털 출판 포럼인 IDPF(International Digital Publishing Forum)에서 제정한 전자 출판물 표준인 EPUB(Electronic PUBlication) 출판물의 경우 반드시 수준 A를 충족해야 하지만 AA는 준수하는 것을 권고하고 있습니다.

WCAG 버전

최신 버전은 2023년 10월 5일 권고사항으로 WCAG 2.2 입니다.

1. WCAG 1.0 (1999) 제정
   • 1999년에 출간.
   • 14개의 가이드라인을 우선 순위에 따라 1~3점으로 구분하여 평가.
   • 접근성 가이드라인이 생겼다는 점에서는 큰 의미가 있지만, 웹 페이지가 제작되는 방식이나 보조기술 등이 급격히 발전 함에 따라 가이드라인이 해당 기술을 따라가지 못했다는 면에서 한계를 들어내기도 했습니다.
2. WCAG 1.0 개정
3. WCAG 2.0 (2008)
   • 2008년에 발표.
   • 1.0의 준수사항을 모두 통합하면서, 콘텐츠를 인지 가능하고 조작 가능하며 이해할 수 있고 견고해야 한다는 4가지 원칙으로 구조가 개편.
   • 구분된 원칙에 따라 장애가 있는 사용자가 웹 콘텐츠를 보다 쉽게 접근할 수 있도록 하기 위한 기본 목표를 제시하는 12개 가이드라인을 제시.
   • 4가지 원칙(인지 가능, 운용 가능, 이해 가능, 견고성)도 확립.
4. WCAG 2.0 (2010) 개정
5. WCAG 2.1 (2015) 개정
6. WCAG 2.1 (2018) 권고안
   • WCAG 2.0을 확장한 버전으로 2018년 6월에 최종 권고안이 발표됨.
   • 2.0 가이드라인 자체를 대체하는 것이 아니라, 장애가 있는 사람들의 모바일 장치 사용, 저시력, 인지 또는 학습 장애를 가진 사람들이 웹 콘텐츠에 보다 쉽게 접근할 수 있도록 만드는 요구 사항 중 일부를 개선.
   • 17개의 새로운 가이드라인(성공기준)을 제공.
   • 2.0이 출시 되었던 당시(2008) 보다 모바일 장치 사용률이 높아졌고 기존 환경보다 조작 자체가 복잡해진 점 등을 고려.
   • 이전 버전의 WCAG를 개선하기 위해 지속적으로 연구된 개발 성과물.
   • WCAG 2.0과 호환 되므로 웹 사이트가 2.1에 부합하면 2.0에도 부합하는 것입니다.
   • WCAG 2.1의 새로운 요구 사항은 2.0과 마찬가지로 특정 장치, 운영 체제, 브라우저 또는 기타 기술 사용에 의존하지 않음.
7. WCAG 2.2 (2020) 초안
8. WCAG 2.2 (2022) 개정

   2.1 기준에서 9개 성공기준 새로 추가.

9. WCAG 2.2 (2023) 권고
10. WCAG 3.0 (2023) 초기단계(Draft)
    • 2.2 버전의 다음 버전.
    • WCAG 3.0은 웹 콘텐츠, 앱, 도구, 출판, 웹상의 신기술에 적용됩니다.

W3C 표준화 제정 단계

W3C(세계 웹 consotium)는 WCAG를 개발하고 유지 관리하는 기관입니다. WCAG의 표준화 제정 단계는 W3C의 프로세스를 따릅니다.

1. 초안 - Working Draft (WD)

   W3C7 W3C Member, 대중, 다른 기관, 단체 등에 검토받기 위한 초안

2. 후보 권고안 - Candidate Recommendation (CR)

   초안을 통해 다양한 검토를 받고, 워킹 그룹의 기술적 요구사항을 정리하고, 구현 경험을 공유, 확인하기 위한 문서

3. 제안 권고안 - Proposed Recommendation (PR)
   • 기술 구현과 검토가 끝나 거의 완성된 문서
   • 최종 승인을 위해 자문위원회에 제출
4. 권고안 - W3C Recommendation (REC)

   모든 합의를 마치고, W3C Member들과 감독, 위원회 승인을 모두 마친 널리 적용을 권장하는 문서

WCAG 2.1 성공 기준

WCAG 전체 성공 기준 - 총 78개(A 30개, AA 20개, AAA 28개)

1. 1.1.1 비텍스트 콘텐츠 Non-text Content (Level A)
2. 1.2.1 오디오 전용 및 비디오 전용 (사전 녹화) Audio-only and Video-only (Prerecorded) (Level A)
3. 1.2.2 자막 (사전 녹화) Captions (Prerecorded) (Level A)
4. 1.2.3 오디오 설명 또는 미디어 대체물 (사전 녹화) Audio Description or Media Alternative (Prerecorded) (Level A)
5. 1.2.4 실시간 자막 Captions (Live) (Level AA)
6. 1.2.5 오디오 설명 (사전 녹화) Audio Description (Prerecorded) (Level AA)
7. 1.2.6 수화 (사전 녹화) Sign Language (Prerecorded) (Level AAA)
8. 1.2.7 확장된 오디오 설명 (사전 녹화) Extended Audio Description (Prerecorded) (Level AAA)
9. 1.2.8 미디어 대체물 (사전 녹화) Media Alternative (Prerecorded) (Level AAA)
10. 1.2.9 오디오 전용 (실시간) Audio-only (Live) (Level AAA)
11. 1.3.1 정보와 관계 Info and Relationships (Level A)
12. 1.3.2 의미 있는 순서 Meaningful Sequence (Level A)
13. 1.3.3 감각적 특성 Sensory Characteristics (Level A)
14. 1.3.4 방향성 Orientation (Level AA)
15. 1.3.5 입력 목적 식별 Identify Input Purpose (Level AA)
16. 1.3.6 목적 식별 Identify Purpose (Level AAA)
17. 1.4.1 색상 사용 Use of Color (Level A)
18. 1.4.2 오디오 제어 Audio Control (Level A)
19. 1.4.3 대비 (최소) Contrast (Minimum) (Level AA)
20. 1.4.4 텍스트 크기 조정 Resize Text (Level AA)
21. 1.4.5 텍스트 이미지 Images of Text (Level AA)
22. 1.4.6 대비 (강화) Contrast (Enhanced) (Level AAA)
23. 1.4.7 낮거나 없는 배경 오디오 Low or No Background Audio (Level AAA)
24. 1.4.8 시각적 프레젠테이션 Visual Presentation (Level AAA)
25. 1.4.9 텍스트 이미지 (예외 없음) Images of Text (No Exception) (Level AAA)
26. 1.4.10 리플로우 Reflow (Level AA)
27. 1.4.11 비텍스트 대비 Non-text Contrast (Level AA)
28. 1.4.12 텍스트 간격 Text Spacing (Level AA)
29. 1.4.13 호버 또는 포커스 시 내용 Content on Hover or Focus (Level AA)
30. 2.1.1 키보드 Keyboard (Level A)
31. 2.1.2 키보드 포착 방지 No Keyboard Trap (Level A)
32. 2.1.3 키보드 (예외 없음) Keyboard (No Exception) (Level AAA)
33. 2.1.4 문자 키 바로 가기 Character Key Shortcuts (Level A)
34. 2.2.1 시간 조정 가능 Timing Adjustable (Level A)
35. 2.2.2 일시 정지, 정지, 숨기기 Pause, Stop, Hide (Level A)
36. 2.2.3 시간 지정 없음 No Timing (Level AAA)
37. 2.2.4 중단 Interruptions (Level AAA)
38. 2.2.5 재인증 Re-authenticating (Level AAA)
39. 2.2.6 시간 초과 Timeouts (Level AAA)
40. 2.3.1 임계값 이하의 세 번의 번쩍임 Three Flashes or Below Threshold (Level A)
41. 2.3.2 세 번의 번쩍임 Three Flashes (Level AAA)
42. 2.3.3 상호 작용으로 인한 애니메이션 Animation from Interactions (Level AAA)
43. 2.4.1 블록 바이패스 Bypass Blocks (Level A)
44. 2.4.2 페이지 제목 Page Titled (Level A)
45. 2.4.3 포커스 순서 Focus Order (Level A)
46. 2.4.4 링크 목적 (컨텍스트 내) Link Purpose (In Context) (Level A)
47. 2.4.5 다양한 방법 Multiple Ways (Level AA)
48. 2.4.6 제목과 라벨 Headings and Labels (Level AA)
49. 2.4.7 포커스 시 가시성 Focus Visible (Level AA)
50. 2.4.8 위치 Location (Level AAA)
51. 2.4.9 링크 목적 (링크만) Link Purpose (Link Only) (Level AAA)
52. 2.4.10 섹션 제목 Section Headings (Level AAA)
53. 2.5.1 포인터 제스처 Pointer Gestures (Level A)
54. 2.5.2 포인터 취소 Pointer Cancellation (Level A)
55. 2.5.3 이름으로 레이블 Label in Name (Level A)
56. 2.5.4 동작 활성화 Motion Actuation (Level A)
57. 2.5.5 대상 크기 Target Size (Level AAA)
58. 2.5.6 동시 입력 메커니즘 Concurrent Input Mechanisms (Level AAA)
59. 3.1.1 페이지의 언어 Language of Page (Level A)
60. 3.1.2 부분의 언어 Language of Parts (Level AA)
61. 3.1.3 이상한 단어 Unusual Words (Level AAA)
62. 3.1.4 약어 Abbreviations (Level AAA)
63. 3.1.5 읽기 수준 Reading Level (Level AAA)
64. 3.1.6 발음 Pronunciation (Level AAA)
65. 3.2.1 포커스 시 On Focus (Level A)
66. 3.2.2 입력 시 On Input (Level A)
67. 3.2.3 일관된 탐색 Consistent Navigation (Level AA)
68. 3.2.4 일관된 식별 Consistent Identification (Level AA)
69. 3.2.5 요청에 따른 변경 Change on Request (Level AAA)
70. 3.3.1 오류 식별 Error Identification (Level A)
71. 3.3.2 레이블 또는 지침 Labels or Instructions (Level A)
72. 3.3.3 오류 제안 Error Suggestion (Level AA)
73. 3.3.4 오류 예방 (법적, 금융, 데이터) Error Prevention (Legal, Financial, Data) (Level AA)
74. 3.3.5 도움말 Help (Level AAA)
75. 3.3.6 오류 예방 (모든) Error Prevention (All) (Level AAA)
76. 4.1.1 구문 분석 Parsing (Level A)
77. 4.1.2 이름, 역할, 값 Name, Role, Value (Level A)
78. 4.1.3 상태 메시지 Status Messages (Level AA)

WCAG 2.2에 새로 추가된 성공 기준

WCAG 2.2에서는 9개의 성공 기준이 추가로 도입되었습니다. 주로 운동 장애 사용자, 고령자, 인지 및 학습 장애 사용자, 저시력 사용자를 대상으로 하고 있습니다.

• 2.4.11 포커스 가려짐 (최소) Focus Not Obscured (Minimum) (Level AA)
• 2.4.12 포커스 가려짐 (개선) Focus Not Obscured (Enhanced) (Level AAA)
• 2.4.13 포커스 외형 Focus Appearance (Level AAA)
• 2.5.7 드래깅 동작 Dragging Movements (Level AA)
• 2.5.8 대상 크기 (최소) Target Size (Minimum) (Level AA)
• 3.2.6 일관된 도움말 Consistent Help (Level A)
• 3.3.7 중복 입력 Redundant Entry (Level A)
• 3.3.8 접근 가능 인증 (최소) Accessible Authentication (Minimum) (Level AA)
• 3.3.9 접근 가능 인증 (개선) Accessible Authentication (Enhanced) (Level AAA)

WCAG 2.2에서 제거된 성공 기준

이 기준은 원래 보조 기술이 HTML을 직접 분석하는 문제를 해결하기 위해 도입되었습니다. 하지만, 시간이 지나면서 보조 기술은 HTML을 직접 분석할 필요가 없어졌고, 브라우저들은 마크업의 구문 분석 오류를 처리하는 능력이 크게 향상되었습니다. 결과적으로, 정확한 마크업 구조는 더 이상 필수 요소가 아니게 되었습니다. 따라서 이 기준은 그 유용성이 사라져 삭제되었습니다.
단, 다른 기준에서 확장되어 세부적인 내용들이 추가되었습니다.

• 4.1.1 구문 분석(사용되지 않고 제거됨) Parsing (Obsolete and removed)

ATAG(웹 저작 도구 접근성 지침)

• Authoring Tool Accessibility Guildelines의 약자로 접근 가능한 콘텐츠를 생성하는 접근 가능한 작성 도구를 구축하기 위한 W3C 권장 사항입니다.
• 저작도구는 “저자” (웹 개발자, 디자이너, 작가 등)가 웹 콘텐츠를 생산하는 데에 사용하는 서비스나 소프트웨어를 가리킵니다.
• 예) HTML 에디터, 콘텐츠 관리 시스템 (CMS) 그리고 사용자가 콘텐츠를 생산할 수 있는 블로그나 소셜 네트워킹 사이트가 있습니다.
• 목표로는 저작도구의 접근성을 보장하여 장애가 있는 사용자가 웹 콘텐츠를 생산할 수 있도록 하고, 저자가 더 접근성이 좋은 웹 콘텐츠를 생산하는 것을 돕는데 있습니다.

UAAG(사용자 에이전트 접근성 지침)

• User Agent Accessibility Guidelines의 약자로 사용자 에이전트는 브라우저, 브라우저 확장프로그램, 미디어 플레이어, 리더기와 같은 웹 콘텐츠를 제공하는 어플리케이션을 포함합니다.

WAI-ARIA(접근가능한 리치 인터넷 어플리케이션)

• Web Accessibility Initiative’s Accessible Rich Internet Applications의 약자로 스크린리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술입니다.
• ARIA는 의미를 제공하여 저자가 유저 인터페이스 행동이나 구조적 정보를 스크린 리더와 같은 보조 기술에 전달할 수 있게 합니다. ARIA 기술 명세는 역할, 상태, 접근 가능한 유저 인터페이스 요소로 정의되는 속성들의 온톨로지를 제공합니다.
• ARIA 모음은 유저 에이전트 실행 지침을 제공하는 명세를 모은 API를 포함합니다. 그래픽, 디지털 출판을 위한 모듈 또한 포함됩니다.
• WAI : ‘Web Internet Applications’의 약자로 웹 접근성을 담당하는 조직.
• ARIA : ‘Accessible Rich Internet Applications’의 약자로 리치 인터넷을 위한 W3C 접근성 명세.

웹 접근성과 W3C 표준에 대한 소개 비디오 (4분)

웹 접근성의 다양한 관점들에 대한 비디오 (7분 36초)

접근성이 장애를 가진 사람들에게 얼마나 필수적이고, 다양한 상황 속에 있는 모든 사람들에게 도움이 되는지에 대한 예시를 보여주는 7분짜리 비디오 입니다.